Back to Home
Completed
1 Month

Quick Chat.

Real-time, WhatsApp-inspired messaging platform built for scale with sub-100ms latency and offline-first capabilities.

LiveView Site View Source
Real-timeSocket.io
BrokerRedis
OfflineDexie.js
FrontendNext.js
DatabaseMongoDB
Latency< 100ms

Overview

QuickChat is a high-performance messaging platform designed to explore large-scale realtime communication architectures. It emphasizes horizontal scalability and a resilient offline-first user experience.

Key focus areas:

  • Horizontal WebSocket scaling
  • Local-first state management
  • 60 FPS UI performance
  • Event-driven consistency
Interactive Topology

System Architecture & Realtime Topology

Explore the distributed WebSocket architecture: Next.js client with offline-first IndexedDB, Express REST + Socket.io servers, Redis cache/Pub/Sub, MongoDB persistence, and BullMQ background workers.

Click to interact & explore topology

Real-time Infrastructure

A distributed WebSocket architecture utilizing Redis Pub/Sub for horizontal scaling and Dexie.js for local-first persistence.

Component Breakdown
Browser Clients
├── Local DB (Dexie.js/IndexedDB)
└── WebSocket Client (Socket.io-client)
 
Service Layer
├── Load Balancer (Horizontal Scaling)
├── WebSocket Servers (Socket.io)
└── Redis Pub/Sub (Cross-server Broadcast)
 
Persistence Layer
└── MongoDB (Chat History & Metadata)

Impact & Results

< 100msMessage Latency

Achieved through optimized Socket.io events and Redis Pub/Sub.

60 FPSUI Performance

Virtualized lists maintain smooth scrolling with 10k+ messages.

100%Offline Capable

Dexie.js ensures zero message loss during network drops.

Features

Real-time Engine

Sub-100ms message delivery powered by Socket.io and Redis Pub/Sub for horizontal scaling.

Offline-First

Messages are queued locally in IndexedDB and synced automatically when the network restores.

Optimistic UI

Immediate rendering of sent messages with background reconciliation for a lag-free experience.

60 FPS Scrolling

Virtualized message lists ensuring smooth performance even with 10k+ messages.

Technical Challenges

Scaling WebSockets

The Problem

A single Node.js instance limits concurrent connections, preventing the system from scaling horizontally.

The Solution

Implemented Redis Pub/Sub as a message broker to synchronize state across multiple Socket.io server instances.

Result: Seamless message delivery across distributed servers supporting 10k+ concurrent users.

High-Performance Rendering

The Problem

Rendering large chat histories caused DOM bloat, layout thrashing, and laggy scrolling.

The Solution

Adopted window virtualization and leveraged CSS overflow-anchor to maintain scroll position during updates.

Result: Maintained 60 FPS scrolling performance with 10,000+ messages in the view.

Resilient Connectivity

The Problem

Unstable network conditions caused message loss and a broken user experience.

The Solution

Designed a local-first architecture using Dexie.js. Messages are persisted locally first and synced via an idempotent retry queue.

Result: 100% message delivery reliability even in intermittent connectivity environments.

Event Flow

User Sends Message

Message is instantly saved to local Dexie.js DB and rendered in the UI (Optimistic Update).

Socket.io Emission

The client emits the message event to the connected WebSocket server instance.

Redis Broadcast

Server publishes to Redis Pub/Sub, ensuring all other server instances receive the message.

Target Delivery

The target user's server instance receives the Redis event and emits it to their client.

API Reference

Performance Optimizations

OptimizationResult
Delivery Latency< 100ms
Scroll Performance60 FPS
Concurrent Capacity10k+ Users
Offline SyncAutomatic

Lessons Learned

  • Distributed Systems: Designing pub/sub patterns across multiple server instances.
  • Offline State: Managing complex reconciliation between local and server databases.
  • Browser Optimization: Mastering virtualization and layout stabilization for high-volume UIs.
  • Scalability: Implementing horizontal scaling strategies for persistent connections.

Screenshots

Liked this project?

Check out more of my work or get in touch.

Browse All ProjectsGet In Touch