ChitChat is a real-time communication platform built with a modern full-stack architecture, focused on performance, scalability, and clean separation of concerns.
It goes beyond basic messaging by integrating real-time chat, media sharing, and peer-to-peer audio/video calling, simulating a production-grade communication system.
Most chat applications hide complexity behind simple UI. ChitChat is built to embrace that complexity—handling real-time messaging, state synchronization, pagination, socket-driven updates, and peer-to-peer communication in a clean and maintainable way.
This project prioritizes:
- Real-world architecture
- Clean code separation
- Scalable real-time communication
- Industry-aligned development practices
- Secure user authentication (JWT-based)
- One-to-one real-time messaging
- Socket-based instant message delivery
- Optimistic UI updates for seamless UX
- Message pagination & scroll preservation
- Reply-to message support
- Delivery & read receipts
- Media sharing (files, attachments, audio)
- 🎙️ Voice messaging support
- 📹 Real-time audio & video calling (WebRTC)
- Modular frontend and backend separation
- Extensible architecture for future AI integration
ChitChat follows a client-server architecture with a dedicated real-time and peer communication layer:
- Frontend: Manages UI, state, socket listeners, and WebRTC connections
- Backend: Handles authentication, APIs, message persistence, and socket signaling
- Realtime Layer: Socket.io enables instant bi-directional communication
- Peer Layer (WebRTC): Handles audio/video streaming between users
- Database: MongoDB stores users, chats, and messages
chitchat/
├── .github/ # GitHub workflows
├── frontend/ # Client-side application (React + Vite)
├── backend/ # Server-side APIs & socket server
├── docker-compose.yml # Docker configuration for local development
└── README.md # Project overview- React (Vite)
- Context API
- Custom Hooks
- Socket.io Client
- WebRTC APIs
- Node.js
- Express
- MongoDB
- JWT Authentication
- Socket.io
# Clone the repository
git clone https://github.com/raj-krr/chitchat.git
# Start backend
cd backend
npm install
npm run dev
# Start frontend
cd frontend
npm install
npm run dev- User registers or logs in
- Backend issues a JWT
- Token is stored on the client
- Authenticated API requests and socket connections use the token
- User sends a message
- Frontend updates the UI optimistically
- Message is emitted through a socket event
- Backend validates and persists the message
- Receiver is notified instantly via socket
- User initiates a call
- Socket event is sent to the receiver (call-user)
- WebRTC peer connection is created
- Offer/Answer exchange happens via socket signaling
- ICE candidates are shared
- Direct peer-to-peer media stream is established
⚡ Socket.io is used for signaling, while WebRTC handles real-time media streaming
- WebRTC-based peer-to-peer communication
- Socket-driven signaling architecture
- Optimistic UI with rollback handling
- Efficient state management using Context API
- Scalable backend structure with modular services
- ✅ Authentication system implemented
- ✅ Core real-time messaging
- ✅ Message pagination & UI optimization
- ✅ Delivery & read receipts
- ✅ Media handling (files, audio messages)
- ✅ Real-time audio & video calling (WebRTC)
- ✅ AI-assisted features
🚀 Try it here: https://chitchatt.tech
- 🔐 Create an account or log in
- 💬 Start real-time chatting instantly
- 📞 Try audio/video calling in action
Contributions are welcome. Please follow the existing project structure and coding conventions. Refer to the frontend and backend READMEs for implementation details.
This project is intended for learning, portfolio, and development use.