A full-stack real-time chat application built with the MERN stack — MongoDB, Express.js, React.js, and Node.js — designed to deliver a fast, secure, and modern messaging experience. The app enables users to send and receive messages instantly, create groups, share images, and manage conversations. Powered by Socket.IO, it provides a responsive and dynamic messaging interface.
📌 WebRTC-based video calling is not yet implemented — planned for a future update.
| Login Page | Chat UI | Group Chat |
|---|---|---|
| (Add screenshots here) | (Add screenshots here) | (Add screenshots here) |
- 🔐 User Authentication using JWT
- 🔒 Password hashing with Bcrypt
- 💬 Real-time Chat using Socket.IO
- 👥 Private and Group Chat
- 📷 Image Uploads using Multer
- 📥 Media Preview in Chat UI
- 🕒 Chat History with MongoDB Persistence
- 🎥 Video/Voice Calling with WebRTC
- 🛎️ Push Notifications
- 🔔 Read Receipts and Typing Indicators
- 📌 Message Pinning, Editing, and Deletion
- 🔎 Chat Search Functionality
- 🧪 Unit & Integration Testing
| Layer | Technologies |
|---|---|
| Frontend | React.js, Tailwind CSS, React Router, React Icons, Axios, Socket.IO-Client |
| Backend | Node.js, Express.js, MongoDB, Mongoose, Multer, JWT, Bcrypt, Socket.IO |
| Database | MongoDB (NoSQL, document-oriented) |
| Authentication | JWT (Access Token), Bcrypt (Password Hashing) |
| Deployment | Render / Vercel (setup instructions below) |
git clone https://github.com/aadityaexe/ChatApp.git
cd ChatAppcd Backend
npm installPORT=5000
MONGO_URI=your_mongo_connection_uri
JWT_SECRET=your_jwt_secretnpm run serverThe server will start at
http://localhost:5000.
cd ../Frontend
npm installnpm startThe React app will run at
http://localhost:3000.
ChatApp/
├── Backend/
│ ├── config/ # DB connection
│ ├── controllers/ # Route logic
│ ├── middleware/ # Auth middlewares
│ ├── models/ # Mongoose models
│ ├── routes/ # API routes
│ ├── uploads/ # Uploaded media
│ └── server.js # App entry point
├── Frontend/
│ ├── src/
│ │ ├── assets/ # Images, icons
│ │ ├── components/ # Reusable UI components
│ │ ├── context/ # User context
│ │ ├── pages/ # App pages (Login, Chat)
│ │ └── App.js # App root
└── README.md
- Passwords hashed with
bcrypt - JWT tokens issued on login and stored in localStorage
- Protected routes using middleware
- User context maintained globally in frontend
Implemented using Socket.IO on both server and client:
- Join chat rooms
- Send/receive messages instantly
- Live updates for new messages
- Future scope for online indicators and typing notifications
- Users can send and receive images (JPG, PNG, etc.)
- Uploaded images are stored in
Backend/uploads/ - File preview shown inline in chat
| Method | Endpoint | Description |
|---|---|---|
| POST | /api/user/register |
Register a new user |
| POST | /api/user/login |
Login and receive JWT |
| GET | /api/chat/:id |
Fetch all messages for a chat |
| POST | /api/message/ |
Send a message |
| POST | /api/chat/group |
Create a new group chat |
- Create a new Web Service on Render
- Connect your GitHub repo
- Add environment variables from
.env - Set start command as:
npm run server- Push the
Frontendfolder to a separate GitHub repo (or subtree split) - Import it on vercel.com
- Set build command:
npm run build - Set output directory:
build
Contributions are welcome! Follow these steps:
- Fork this repo
- Create a new branch:
git checkout -b feature/your-feature - Commit your changes:
git commit -m "Add your message" - Push to your branch:
git push origin feature/your-feature - Open a Pull Request 🚀
Aditya Kumar
- GitHub: @aadityaexe
- LinkedIn: (Add your link)
- Twitter: (Optional)
This project is licensed under the MIT License.