Realtime Chat System.
A live messaging system built to stay accurate when real life gets messy — bad connections, multiple tabs open, users coming and going.
- Messages appear the moment they're sent
- Instant
- History loads automatically after reconnecting
- No missed messages
- Online status reflects actual connection
- Always accurate
- Works correctly with multiple browser tabs open
- Multi-tab
Overview
A live messaging system built to stay accurate when real life gets messy — bad connections, multiple tabs open, users coming and going. Messages don't get lost. Online status is always correct. Nothing requires a page refresh.
My Role
Key Results
- Online status is always accurate — even across multiple open tabs
- Missed messages load automatically after reconnecting — no refresh needed
- Built to handle real-world connection problems, not just the ideal case
The Challenge
Live chat looks easy until users start behaving like real people. Someone's laptop goes to sleep and comes back — but the chat still shows them as online. A user loses their connection for 30 seconds and misses three messages with no way to know. Someone has the app open in two tabs, closes one, and disappears from the active users list even though they're still there.
The Solution
Built a messaging system that tracks the full picture — not just whether a message was sent, but whether the user is actually connected, across how many devices, and what they may have missed. When someone reconnects, their missed messages load automatically. When they close one tab out of two, they stay marked as online. The experience stays consistent without anyone needing to refresh.
Core Features
Instant messaging
messages appear the moment they're sent
Accurate online/offline status that updates in real time
Missed messages load automatically when a user reconnects
Typing indicators so users know when someone is responding
Chat rooms for group conversations
Works correctly across multiple browser tabs
Screenshots
Tech Stack
What the system runs on, and the decisions behind each layer.
- Frontend
- React
- Backend
- Node.js (event-driven WebSocket handling)
- Database
- MongoDB (message persistence and history)
- Realtime
- Socket.io (bidirectional communication with lifecycle events)
Impact
- Online status is always accurate — even across multiple open tabs
- Missed messages load automatically after reconnecting — no refresh needed
- Built to handle real-world connection problems, not just the ideal case