Design a News Feed (Infinite Scroll & Real-time) – Frontend System Design Interview Guide
Design a news feed experience - an infinite scrolling feed with images, videos, likes, comments, and real-time updates. Handle millions of active users with optimal performance.
Backend as Black Box: Assume you have APIs for posts, likes, comments, and real-time updates. Focus on the frontend architecture.
Key Challenges
- Media-heavy infinite feed with smooth 60fps scrolling
- Cursor pagination stability under live inserts/deletes
- Optimistic like/comment interactions with safe rollback
- Realtime updates without disrupting scroll position
- Mobile-first performance on degraded networks
RADIO Framework
Use the RADIO framework to structure your solution:
- Requirements: Clarify functional and non-functional requirements
- Architecture: High-level component structure and system design
- Data Model: Data structures, API contracts, state management models, and data flow
- Interface: Key implementation details, component interfaces, and integration points
- Optimization: Performance and scalability improvements
Note: RADIO framework helps structure your system design approach. Focus on high-level design and architecture decisions. Avoid diving into low-level implementation details unless specifically asked.
Interview Approach
System design interviews are collaborative discussions where you work with the interviewer to explore different approaches and trade-offs. There are no single "correct" answers—instead, focus on:
- Asking clarifying questions to understand requirements and constraints
- Discussing trade-offs for different architectural approaches
- Starting with high-level design before diving into implementation details
- Considering edge cases and how to handle them gracefully
- Thinking about scalability and performance from the start
Important: Revise your 2-minute TL;DR before going to system design interviews, then expand through RADIO during the discussion. In real interviews, you won't have enough time to cover every trade-off in depth. Prioritize explicit comparisons (cursor vs offset, polling vs SSE vs WebSocket, CSR vs SSR/ISR), and browse the Web Fundamentals for deeper reference.
For more guidance on approaching system design interviews, see the introduction section in the sidebar.
When users scroll through their feed, they expect smooth performance, instant interactions, and seamless media loading—even with thousands of posts. This solution designs a news feed that handles infinite scrolling, real-time updates, optimistic interactions, and media optimization while maintaining 60fps performance. The key insight: a good feed feels instant, preserves scroll position, and gracefully handles network issues.
HLD interview focus: Requirements, architecture, tradeoffs, data flow, and scaling decisions. Low-level implementation snippets are collected in the final optional section and are only needed when explicitly asked.
Key Takeaways
- ✓Cursor pagination prevents duplicates/missing items under live inserts.
- ✓Virtualization keeps DOM size bounded, which is key to stable 60fps scrolling.
- ✓Real-time strategy: update counts immediately, but insert new posts via banner to preserve scroll context.
- ✓React Query manages server state + optimistic updates; Zustand manages UI state + offline queue.
- ✓In HLD interviews, clear tradeoff reasoning (not code volume) is what gets scored.
- ✓Stable API/event contracts (IDs, cursors, idempotency) reduce inconsistency during retries and real-time sync.