Recommended preparation
Premium

Scalable Notifications Feed (Real-time)

By FrontendAtlas Editorial · Updated Aug 6, 2026

Try the prompt first

Senior20 min first pass

Design a real-time notifications feed with resumable delivery, deduplication, unread semantics, burst batching, bounded storage, virtualization, and recovery.

Constraints

  • Keep client, server, and rendering ownership explicit.
  • Cover loading, failure, recovery, and accessible interaction states.

Challenge summary

Design a real-time notifications feed that remains responsive during bursts without losing authoritative events or corrupting unread state.

What you'll practice

  • Merge snapshots and resumable events through one idempotent reducer.
  • Separate delivery, read markers, unread derivation, and presentation urgency.
  • Bound rendered rows and payload memory without dropping notification identities.
  • Recover from gaps, cursor expiry, replay, and cross-device read conflicts.

What Premium unlocks

Premium unlocks the ordered-resume example, read-marker reconciliation, burst trade-offs, and degraded-feed recovery.

Free related practice

Related questions
AI Agent Run Inspector Frontend System DesignLive Comments for Global Streams (Real-time)PremiumNews Feed / Timeline Front-End System DesignPremiumReal-time Model Training DashboardPremium
Blueprint guides
RADIO Framework: Frontend System Design Interview TemplateFrontend System Design Performance Optimization Guide Recommended Front-End System Design: What It Really TestsFrontend System Design 5-Step Answer MethodFrontend System Design Interview Rubric and ScorecardFrontend System Design Interview Pitfalls and Red FlagsD - Data Model Deep Dive for Frontend System Design Interviews
Try free JavaScript challengeOpen track previewsBrowse company previews

Upgrade to FrontendAtlas Premium to access this system design scenario. Already upgraded? Sign in to continue.