Recommended preparation
Premium
News Feed / Timeline Front-End System Design
Try the prompt first
Senior20 min first pass
Design a news-feed timeline with cursor pagination, ranked and live updates, deterministic merge rules, stable scroll anchors, media loading, and recovery.
Constraints
- Keep client, server, and rendering ownership explicit.
- Cover loading, failure, recovery, and accessible interaction states.
Challenge summary
Design a media-rich ranked feed that combines cursor pages and live events without recreating ranking or moving the reader unexpectedly.
What you'll practice
- Separate normalized post entities from a server-versioned ordered projection.
- Merge pages and live events with event identity, entity versions, and resume cursors.
- Preserve a stable content anchor across rank refreshes and variable-height media.
- Reconcile optimistic reactions without changing authoritative order.
- Bound rendering and media work while preserving keyboard reachability.
What Premium unlocks
Premium unlocks the ranked projection model, anchor-preserving worked example, stream contracts, recovery matrix, and performance plan.
Free related practice
Upgrade to FrontendAtlas Premium to access this system design scenario. Already upgraded? Sign in to continue.