Slack-Clone - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #llm #machine-learning #rust #deep-learning #docker #nodejs #java #windows #awesome #kubernetes #vue #ios

Slack-Clone

(★ 55)

Slack clone using React, MaterialUI with google-authentication & firestore database for a real-time chat across multiple channels.

File Explorer

Download Latest Version (.zip)

- hosting.YnVpbGQ.cache
- favicon.ico
- index.html
- logo192.png
- logo512.png
- manifest.json
- robots.txt
- - 1.jpg
  - 2jpg.jpg
  - 3jpg.jpg
  - 4jpg.jpg
  - DevCommunity-channel.png
  - Login-Page-auth.png
  - logo-readme.png
  - slack_logo-ebd02d1.svg
- App.css
- App.js
- index.css
- index.js
- serviceWorker.js
.firebaserc
.gitignore
firebase.json
index.html
LICENSE
package-lock.json
package.json
README.md

# Installation Guide

1. Get the code

git clone https://github.com/abhishekpatel946/Slack-Clone

Downloads the entire project code from GitHub to your computer.

cd Slack-Clone

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![GitHub license](https://img.shields.io/github/license/abhishekpatel946/Slack-Clone)](https://github.com/abhishekpatel946/Slack-Clone)

<br />
<p align="center">
  <a href="https://github.com/abhishekpatel946/Slack-Clone">
    <img src="https://github.com/abhishekpatel946/Slack-Clone/blob/main/src/assets/logo-readme.png" alt="Logo" width="80" height="80">
  </a>

<h3 align="center">Slack Clone</h3>

<p align="center">
    Slack Clone README template to jumpstart your projects!
    <br />
    <a href="https://github.com/abhishekpatel946/Slack-Clone"><strong>Explore the docs»</strong></a>
    <br />
    <br />
    <a href="https://github.com/abhishekpatel946/Slack-Clone">View Demo</a>
    Â·
    <a href="https://github.com/abhishekpatel946/Slack-Clone/issues">Report Bug</a>
    Â·
    <a href="https://github.com/abhishekpatel946/Slack-Clone/issues">Request Feature</a>
  </p>
</p>

## Table of Contents

* [About the Project](#about-the-project)
  * [Built With](#built-with)
* [Getting Started](#getting-started)
  * [Prerequisites](#prerequisites)
  * [Installation](#installation)
* [Usage](#usage)
* [Roadmap](#roadmap)
* [Contributing](#contributing)
* [License](#license)
* [Contact](#contact)
* [Acknowledgements](#acknowledgements)

## About The Project
<p align="center">
  <a href="https://github.com/abhishekpatel946/Slack-Clone">
    <img src="https://github.com/abhishekpatel946/Slack-Clone/blob/main/src/assets/slack_logo-ebd02d1.svg" alt="Logo" width="300" height="300">
  </a>
</p>

# Slack Clone

### Description
- Slack-Clone is a clone of a slack. Implemented using React and Firebase.
- Behind the backend, I was used React-Firebase for authentication with Google-auth, and highly secure specially for non-authorized users. 
- And I have developed a channel section to add new channels and communicate through these channels.
- I have used firestore to keep store all the messages spread among the channels or community. 
- And ofcourse our database will be safe under google-firebase security so no worries about securities.

### Features
- The channels or messages are stored in firestore database so quickly accessible via our app.
- I was used react-router-dom for saving server-side loads or refreshing. this functionality improve the speed for redirect to one component to another without refreshing from  server-side it makes life easier, save lots of time and fast to switch without loading or refreshing the whole page.
- Our data will be in real-time, if any changes make happens in messages or channels then it will automatically changes in our app in real-time no need to refresh our page.
the app will be responsive like if you used in Desktop or Mobile devices it render same thing.

### Built With
This section should list any major frameworks that you built your project using. Leave any add-ons/plugins for the acknowledgements section. Here are a few examples.
* [React](https://reactjs.org/docs/getting-started.html)
* [Firebase](https://firebase.google.com/docs)
* [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)

## Getting Started

This is an example of how you may give instructions on setting up your project locally.
To get a local copy up and running follow these simple example steps.

### Prerequisites

This is an example of how to list things you need to use the software and how to install them.
* Clone
```sh
git clone https://github.com/abhishekpatel946/Slack-Clone.git
```

* Link
#### [Slack Clone](https://slack-clone-152da.web.app/)

## Installation

1. Clone the repo
```sh
git clone https://github.com/abhishekpatel946/Slack-Clone.git
```

2. Go to the Slack-Clone
```sh
cd Slack-Clone
```

3. Run the slack-clone in localhost
```sh
npm start
```

## Usage

![1!](https://github.com/abhishekpatel946/Slack-Clone/blob/main/src/assets/1.jpg)
![2!](https://github.com/abhishekpatel946/Slack-Clone/blob/main/src/assets/2jpg.jpg)
![3!](https://github.com/abhishekpatel946/Slack-Clone/blob/main/src/assets/3jpg.jpg)
![4!](https://github.com/abhishekpatel946/Slack-Clone/blob/main/src/assets/4jpg.jpg)

_For more examples, please refer to the [Documentation](#built-with)_

## Roadmap

See the [open issues](https://github.com/abhishekpatel946/Slack-Clone/issues) for a list of proposed features (and known issues).

## Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## License

Distributed under the MIT License. See [`LICENSE`](https://github.com/abhishekpatel946/Slack-Clone/blob/main/LICENSE) for more information.

## Contact

Project Link: [https://github.com/abhishekpatel946/Slack-Clone](https://github.com/abhishekpatel946/Slack-Clone)

## Acknowledgements
* [GitHub Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet)
* [Img Shields](https://shields.io)
* [Choose an Open Source License](https://choosealicense.com)
* [Firebase](https://firebase.google.com/)
* [MaterialUI](https://material-ui.com/)

[contributors-shield]: https://img.shields.io/github/contributors/abhishekpatel946/Slack-Clone.svg?style=flat
[contributors-url]: https://github.com/abhishekpatel946/Slack-Clone/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/abhishekpatel946/Slack-Clone.svg?style=flat
[forks-url]: https://github.com/abhishekpatel946/Slack-Clone/network/members
[stars-shield]: https://img.shields.io/github/stars/abhishekpatel946/Slack-Clone.svg?style=flat
[stars-url]: https://github.com/abhishekpatel946/Slack-Clone/stargazers
[issues-shield]: https://img.shields.io/github/issues/abhishekpatel946/Slack-Clone.svg?style=flat
[issues-url]: https://github.com/abhishekpatel946/Slack-Clone/issues
[product-screenshot]: https://github.com/abhishekpatel946/Slack-Clone/blob/main/src/assets/slack_logo-ebd02d1.svg