/WhatsApp-Clone-React

Fullstack clone of WhatsApp Web (PUBLIC ROOMS), created with React and Firebase.

Primary LanguageJavaScript

Table of contents

General info

This a WhatsApp Web clone that is still a work in progress. Users can only create public rooms.

Features

  • Add/Delete Room (only admin or room owner can delete the room)
  • Update User Profile: Name, About, Profile Photo
  • Upload photos and videos (cannot upload multiple files)
  • Search rooms and messages
  • Emojis

Technologies

Project is created with:

  • React
  • React Context API
  • React Router v5.2.0
  • React Player v2.6.2
  • React Toastify v6.0.8
  • Emoji Mart v3.0.0"
  • Material-Ui v4.11.0
  • Firebase: Authentication, Cloud Firestore(db), Storage, Hosting

Steps on how to clone

1: Clone this repo using this command

git clone https://github.com/muga-mark/WhatsApp-Clone-React.git

2: Enter

cd WhatsApp-Clone-React

3: Next

npm install

4: Goto src/components & Find file named firebase2.js => Rename the file to firebase.js and input your config data.

5: Now, Goto src directory again and find file named .firebasesrc

Replace the line "default": "your_project__name" & save.

6: Hit npm start in terminal.

Set Up Hosting in Firebase

1: Hit command firebase init

2: Enter Yes

3: Goto the 4th option says - "Configure and Deploy firebase Hosting sites", Use Arrow key to go down & Hit spacebar to select the option and then hit Enter key

4: Enter build for directory && select Yes for for as a single-page app and No for Overwrite.

5: After initialization Completed. Enter

npm run build

6: Now the last command

Enter firebase deploy

You have succesfully hosted your firebase app. Click on the link and Enjoy!. Don't forget to rate the repository.