Design a Real-Time Chat Application

Designing a real-time chat application is a classic frontend system design question. It combines WebSocket management, message ordering, optimistic updates, and offline resilience. Here's a structured approach.

Requirements Clarification

Functional Requirements

• Display messages in a conversation (chronological order).
• Send text messages with real-time delivery.
• Support file uploads (images, documents).
• Typing indicators when others are typing.
• Read receipts (seen/delivered).
• Message search within a conversation or across conversations.
• Optional: edit/delete, reactions, threads.
• Offline: queue messages when disconnected; sync when back online.

Non-Functional Requirements

• Latency: Messages appear within ~100ms of send/receive.
• Reliability: Reconnection with exponential backoff; no duplicate messages.
• Ordering: Messages displayed in deterministic order (server timestamp or sequence).
• Scalability: Handle long conversations (10k+ messages) without full load.

High-Level Architecture

┌─────────────────────────────────────────────────────────────────┐
│  ChatLayout                                                      │
│  ┌─────────────┐  ┌────────────────────────────────────────────┐│
│  │ Conversation│  │ ChatView                                    ││
│  │ List        │  │  ┌──────────────────────────────────────┐  ││
│  └─────────────┘  │  │ VirtualizedMessageList                │  ││
│                   │  │   MessageBubble (text, media, status) │  ││
│                   │  └──────────────────────────────────────┘  ││
│                   │  ┌──────────────────────────────────────┐  ││
│                   │  │ MessageInput (text, file picker)      │  ││