Slack Clone with REACT.JS!

A website like Slack which is created using ReactJS, the React-Router is implemented for the different pages, React-Redux has been used as a state management tool. The firebase is used for the authentication and firebase firestore is used as a realtime database. Firebase-hooks are being implemented, styled-components are used and Material-UI icons have been used.

View Demo · Documentation · Report Bug · Request Feature

📔 Table of Contents

• About the Project
  • Screenshots
  • Tech Stack
  • Firebase Config
• Getting Started
  • Prerequisites
  • Installation
  • Run Locally
  • Deployment
• Contact

🌟 About the Project

📷 Screenshots

• Application Home page & Demo

2023-04-01-18-10-28.mp4

LIVE DEMO 💥

👾 Tech Stack

Client

• React.js
• React Router
• React Redux
• Material UI

Database and Hosting

• Firebase

🧰 Getting Started

‼️ Prerequisites

• Sign up for Firebase account HERE
• Install Node JS in your computer HERE

🔑 Firebase Config

To run this project, you will need to add the following config of your project to firebase file

apiKey

authDomain

projectId

storageBucket

messagingSenderId

appId

measurementId

⚙️ Installation

Install my-project with npm

npx create-react-app my-project --template redux

cd my-project

Install dependencies

🧪 Install Firebase and Material UI

Install Firebase

Install Firebase and copy the config of your project and setup locally.

npm install firebase

Install Material UI

Install material ui icons

npm install @mui/material @emotion/react @emotion/styled

Install dependencies

🔶 Other Dependency Info

🏃 Run Locally

Clone the project

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

cd Slack-Clone

Install dependencies This is a React.js project bootstrapped with create-react-app.

npm install

Start the server First, run the development server:

npm run start

This is a React.js project bootstrapped with create-react-app.

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying src/app.js. The page auto-updates as you edit the file.

Learn More

This project uses react-spinkit for smooth loading, react-firebase-hooks.

🚩 Deployment

To deploy this project run

Commands

firebase login

firebase init

npm run build

firebase deploy

🤝 Contact

Your Name - @twitter_handle - 2040020@sliet.ac.in

Project Link: https://github.com/Priyanshu88/Slack-Clone.git

---

Don't forget to leave a star ⭐️