Chat App
A full-featured real-time chat application that enables one-to-one messaging with typing indicators, online/offline presence detection, and media sharing capabilities. Built from scratch to understand WebSocket architecture and real-time system design.
Technologies Used
Problem
Building real-time communication systems requires understanding WebSocket protocols, connection management, and state synchronization across multiple clients. I wanted to build a production-quality chat system from scratch.
What I Built
A complete messaging platform with real-time bidirectional communication using Socket.io, persistent message storage in MongoDB, and a polished React frontend with multiple customization options.
Challenges
Managing WebSocket connection lifecycles, handling reconnection logic, synchronizing online status across multiple browser tabs, and optimizing image delivery through CDN integration.
Architecture
React frontend communicating with a Node.js/Express backend via REST API for CRUD operations and Socket.io for real-time events. MongoDB for persistent storage, Clerk for authentication, and ImageKit for media optimization.
Key Features
- Real-time one-to-one messaging via WebSocket communication
- Typing indicators and online/offline presence detection
- Last-seen timestamps for all users
- Clerk authentication with Google OAuth integration
- Image and video sharing via ImageKit CDN
- Multiple themes with light/dark mode support
- Custom chat wallpapers
- Sound notifications for new messages
- Dockerized deployment setup