Design WhatsApp Web Chat – Frontend System Design Interview Guide
Design a WhatsApp-like chat experience for web/mobile web. Support 1:1 messaging, conversation list, unread counts, typing indicators, message delivery states, optimistic sending, and realtime updates. Handle large chat histories, network interruptions, and multi-device synchronization.
Backend as Black Box: Assume you have APIs/WebSocket for conversations, messages, presence, and sync. Focus on frontend architecture, state design, rendering strategy, and UX tradeoffs.
Key Challenges
- Realtime incoming/outgoing messages without janky re-renders
- Scroll anchoring for long chat history while loading older messages
- Optimistic sending with retry/failure states
- Conversation list consistency with unread counts and last message preview
- Mobile-first performance under poor network conditions
- Multi-device sync and eventual consistency handling
RADIO Framework
Use the RADIO framework to structure your solution:
- Requirements: Clarify functional and non-functional requirements
- Architecture: High-level component structure and system design
- Data Model: Data structures, API contracts, state management models, and data flow
- Interface: Key implementation details, component interfaces, and integration points
- Optimization: Performance and scalability improvements
Note: RADIO framework helps structure your system design approach. Focus on high-level design and architecture decisions. Avoid diving into low-level implementation details unless specifically asked.
Interview Approach
System design interviews are collaborative discussions. There is no single perfect answer. Strong answers usually:
- Clarify product scope first (1:1 only vs groups, attachments, reactions, search)
- Separate conversation-list problems from message-thread problems
- Explain optimistic UI and reconciliation clearly
- Protect scroll position and reading context during updates
- Discuss tradeoffs for polling vs SSE vs WebSocket, normalized vs denormalized cache, and pagination direction
Important: Revise your 2-minute TL;DR before interviews, then expand using RADIO. In a real interview, do not overfocus on code-level details. Prioritize message ordering, retry semantics, unread consistency, and scroll behavior. For deeper concepts, browse the Web Fundamentals.
Full system design walkthrough
Get the complete interview-ready solution with requirements, architecture, data model, API contracts, tradeoffs, scaling notes, and evaluation signals.