Design a Notification Center – Frontend System Design
We’ll walk through the frontend system design for an in-app notification center: the bell, the inbox, the unread badge, and the live updates that keep them honest. You’ll see why the badge is not a count of the rows on screen, why grouping belongs on the server, how to pick between a stream and a poll, and how a mark-all-read click races the mention that arrives in the same millisecond.
The interviewer phrases it as “design the notifications dropdown”. A list of toasts is a junior answer. The real product is an inbox that survives pagination, two open tabs, a muted thread, a deep link to a deleted issue, and a screen reader that should not hear every like.
Problem Statement
Design the frontend for an in-app notification center, like GitHub, Linear, or LinkedIn.
Requirements:
- A bell with an unread badge, a popover inbox, and a full-page inbox
- Unread counts that stay correct across tabs and after mark-read
- Grouping (“Priya and 4 others liked your post”)
- Live updates while the app is... premium content.
