Skip to content

Design a notification system (frontend)

Design notifications for a web app: a list of past notifications that loads as you scroll, new ones appearing live, a count of unread ones, and short pop-up messages any part of the app can show.

System designFrontend and full stackMessaging and notificationsSeniorStaff

What to work through

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

  • Open a list of past notifications that loads more as the person scrolls
  • Show new notifications as they arrive, in the list and in a count of unread ones
  • Mark one notification or all of them as read, on every device the person uses
  • Let any part of the app show a short pop-up message that closes by itself

Constraints to discuss

  • The unread count agrees across open tabs and devices within seconds
  • No notification shows twice or goes missing after a reconnect
  • A pop-up never takes focus and is still announced to a screen reader
  • A tap on a notification answers within 200 milliseconds
  • A tab left in the background does almost no work
Need a starting point?

Watch for these common gaps as you prepare:

  • Page numbers for a list that new items keep shifting
  • Adding up the unread count on the client instead of taking the server's
  • Moving focus to each pop-up, or giving it no announcement at all
  • Pop-ups that close before a person can reach their action, with no other way to do it
  • Reconnecting after time away without fetching what was missed
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)Messaging and notificationsDesign a chat app (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.