A simple clone of Facebook Messenger built using ReactJS and Firebase. Most primary features of Messenger have been ported to this app; however, more advanced features are currently pending. This is one of my first solo, full scale projects, so I might make some pretty awful mistakes in the docs/code. Feel free to create issues! 🎇
Clone the project
git clone https://github.com/Sang-Dang/simple-chat
Go to the project directory
cd simple-chat
Install dependencies and include Firebase Environment Variables in .env
pnpm install
Start the server
pnpm dev
To run this project, you will need to add the following environment variables to your .env file
NODE_ENV
VITE_RECAPTCHA_SITE_KEY
VITE_FIREBASE_API_KEY
VITE_FIREBASE_AUTH_DOMAIN
VITE_FIREBASE_DATABASE_URL
VITE_FIREBASE_PROJECT_ID
VITE_FIREBASE_STORAGE_BUCKET
VITE_FIREBASE_MESSAGING_SENDER_ID
VITE_FIREBASE_APP_ID
VITE_FIREBASE_MEASUREMENT_ID
- Real-time text and image messaging
- Create chat rooms
- React to messages with live notifications
- Reply to previous messages
- View recipients' seen status for different messages
Client: React, Redux, TailwindCSS, NextUI
Server: Firebase - Firestore, Authentication, Realtime Database, Hosting
- Facebook Messenger is a bloody complex application.
- Probably don't use NoSQL for a chat application (I already used it so, sunk cost fallacy, here we go)
- Handling pagination and infinite scrolling in a chatbox... is complicated, but fun
- Managing rerenders in a complex chat (with reactions, seen notifications, and typing indicators) can be mostly done with redux. In fact, most of my time wouldn't have been wasted if I'd used redux from the getgo.
- Lack of sleep greatly inhibits the human cerebral, most notably when performing tasks closely tied to logic.
- Add video support
- Add text image viewer
- Implement pagination for chat room messages
- Optimize bundle size
- Basic Social Media (Posts, Comments, Likes) on Homepage Page
- Account Details and Account Deletion on Profile Page
- Add chat room options and deletion
Honestly, I've been asking myself this question for 20 years... I don't know, I guess remaking Facebook Messenger is fun!
Probably in one to two months. I'm lazy and inexperienced, so making this takes some time.
Yes mom!