Design Real-Time Chat Application (Slack/Discord) - Frontend System Design Interview Guide

Hard

Design a production-ready real-time chat application like Slack, Discord, or Microsoft Teams with channels, direct messages, presence indicators, and rich media support.

Backend as Black Box: Assume you have APIs for messages and real-time updates. Focus on the frontend architecture.

Key Challenges

This problem explores real-time communication challenges:

  • Message Delivery: Send, receive, and sync messages reliably
  • Message States: Sent → Delivered → Read with visual indicators
  • Presence System: Online/Away/Offline status with typing indicators
  • Offline Support: Queue messages, sync on reconnect
  • Rich Content: Attachments, embeds, reactions, threads
Unlock with Pro

Full system design walkthrough

Get the complete interview-ready solution with requirements, architecture, data model, API contracts, tradeoffs, scaling notes, and evaluation signals.

Unlock with Pro