Whatsapp Clone

This is a whatspp clone with features like one to one messaging, read receipts, etc built using React.js and Firebase.

Screenshots

Login Page

Register Page

Message Page

Features

1. Authentication done with Firebase Auth
2. Realtime messaging with Firebase Realtime Database. Users maintained with Firestore.
3. Single tick delivery, double tick for message receiving, and blue double tick for message read like Whatsapp.
4. Shows users who are online, realtime.

Idea for database structure in Firebase RTDB taken from

https://ngengesenior.medium.com/database-structure-of-one-to-one-chat-app-with-firebase-93f813184dfe

Test credentials

email: test@gmail.com password: 123456

To Run and test locally

1. Clone into repo
2. Run npm install
3. Create a folder called config and create a file firebaseConfig.js for your firebase app credentials.
4. Run npm run dev

Live Demo

https://whatsapp-clone-91f87.web.app/login

Loom Video Demo

https://www.loom.com/share/cbe936e2b6784928aa6119948b7c9b12