131Design WhatsApp Web: real-time messaging, ordering, offline state and reconciliation
hardAbout 60 minutesSystem designreal-timewebsocketsofflineindexeddbsystem-design
Problem
Design the frontend of a WhatsApp Web–style messenger:
- a chat list with unread counts and last-message previews, and a conversation view with message history;
- sending and receiving messages in real time, with delivery states (sending, sent, delivered, read);
- correct ordering even when messages arrive late, out of order or twice;
- typing indicators and online presence;
- working offline: reading history, composing messages that are sent when the connection returns;
- multiple tabs and devices staying consistent.
Focus on the client: the real-time transport, the local data model, ordering and reconciliation, rendering long histories, and failure handling.
Step-by-step
Agree on the core: 1:1 and group text messages, delivery and read receipts, presence, offline sending, history. Leave out calls, media editing and end-to-end encryption details (mention them as follow-ups).
Unlock the full solution
What's inside
- Step-by-step
- Requirements
- Architecture
- Data model and state
- Key flows and trade-offs
- Performance and reliability
- Follow-up questions
Includes 2 code listings, 5 follow-up questions.
One-time payment by UPI, card or net banking. Launch price.