Portfolio logo
Realtime Communication
Personal ProjectInfrastructure System

Live Messaging System — Real-Time Chat with Accurate Status and Message History

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.

Instant

Messages appear the moment they're sent

No missed messages

History loads automatically after reconnecting

Always accurate

Online status reflects actual connection

Multi-tab

Works correctly with multiple browser tabs open

Key highlights

  • 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

Data layer

MongoDB (message persistence and history)

Node.js (event-driven WebSocket handling)

System Preview

System preview 1
System preview 2
System preview 3
System preview 4

Problem

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. These aren't edge cases. They happen constantly, and each one makes the product feel unreliable.

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.

Features

Capabilities & System Features

Security & Auth
Secure — login required to access any conversation
Real-time
Typing indicators so users know when someone is responding
Chat rooms for group conversations
Users & Tenancy
Missed messages load automatically when a user reconnects
Core
Instant messaging — messages appear the moment they're sent
Accurate online/offline status that updates in real time
Works correctly across multiple browser tabs
Full message history stored and retrievable

Engineering challenges

Complex problems solved

01

Online Status That's Actually Accurate

Problem

Most chat systems mark you as offline the moment your connection drops — even if you have the app open in another tab. Or they keep you marked as online long after you've left. Users notice both, and neither feels right.

Solution

Built the system to track every active connection per user individually. A user is only marked offline when every single one of their connections closes — not just one. Status updates the moment that last connection drops, not on a timer.

Impact: Online indicators are accurate. Users aren't shown as offline when they're still there, and they're not shown as online after they've left. It's a small thing that makes the whole product feel more trustworthy.

02

No Missing Messages After a Dropped Connection

Problem

If a user loses their internet for 30 seconds and reconnects, they have no idea what they missed. A system that doesn't handle this just shows the chat as it is now — with a silent gap no one warned them about.

Solution

When a user reconnects, the system automatically figures out what messages arrived while they were gone and loads them in. The chat catches up on its own. No refresh, no manual reload, no visible gap.

Impact: Users reconnect and see everything — in order, with nothing missing. The experience feels seamless even after a dropped connection.

Architecture

System structure

Frontend

React

Backend

Node.js (event-driven WebSocket handling)

Database

MongoDB (message persistence and history)

Realtime

Socket.io (bidirectional communication with lifecycle events)

Technologies

Tooling used

ReactNode.jsMongoDBSocket.ioJWT

Need something similar built?

Describe your system — the workflow, the users, the constraints. I'll respond with what it would take to build it properly.

Send your project brief