Design WhatsApp chat (frontend) | Frontend System Design

Problem

Design a real-time chat app: chat list, conversations, sending/receiving messages, delivery/read receipts, presence, and offline support.

Discussion areas

• Transport: WebSocket for real-time bidirectional messaging; fallback to long-polling; reconnection with backoff and resync.
• Data model: normalized chats and messages stores; Message { id, chatId, sender, text, status, ts } where status = sending → sent → delivered → read.
• Sending: optimistic append with a temp id and sending status; reconcile with server id/ack; retry on failure; ordering via timestamps/sequence numbers.
• Receiving: push new messages into the store; update unread counts; show typing indicators and presence (online/last seen).
• History: paginate (reverse infinite scroll) older messages; maintain scroll position when prepending.
• Offline: queue outgoing messages locally (IndexedDB), flush on reconnect; cache conversations.
• Performance: virtualize long message lists; lazy-load media; debounce typing events.
• Receipts: delivery and read receipts via acks; per-message status ticks.