Skip to content

Design a chat app (frontend)

Design the web client for a chat app: a list of conversations, one open conversation, sending and receiving messages as they happen.

System designFrontend and full stackMessaging and notificationsMid-levelSenior

What to work through

Work through a chat app as a spoken system design interview. Start by clarifying the scope, sketch a working design and explain the trade-offs behind your choices.

  • See a list of conversations with unread counts
  • Open a conversation and scroll back through older messages
  • Send a message and see new messages arrive as they happen
  • See who is typing and which messages were read

Constraints to discuss

  • A new message shows without a refresh, in the order it was sent
  • A message is never lost or sent twice, even on a bad connection
  • Opening a conversation shows its latest messages without loading its whole history
  • Typing and scrolling answer within 200 milliseconds
  • New messages are announced to screen readers
Need a starting point?

Watch for these common gaps as you prepare:

  • Keeping a copy of a message in each place it shows, so an edit misses some
  • Losing the reading place when older messages load above
  • Loading every channel's history at start
  • Sending a typing signal on every keystroke
  • Treating a quiet connection as a live one
  • Retrying a failed send in a way that posts it twice
Read: Frontend system design interview questions, and who asks them

Why this question is in the collection

These sources connect the problem to company interview reports or preparation guides. They do not guarantee what a company will ask you.

Your next question

AI systemsDesign a ChatGPT-style chat (frontend)Search and autocompleteDesign an autocomplete search box (frontend)CollaborationDesign a calendar (frontend)CollaborationDesign a collaborative document editor (frontend)
Browse the collection
01

Pick a question

Read the brief and choose what you want to work on.

02

Talk it through

Explain your thinking. Respond to follow-ups. Draw when a design needs it.

03

Find your next improvement

Use the feedback from your interview to decide what to practice next.