Design a news feed frontend with infinite scroll
PremiumFrontend systemMedium
- Infinite scroll
- List virtualization
- Cursor pagination
Quick answer
This frontend system interview question asks you to design a news feed frontend with infinite scroll. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design the frontend of a news feed with infinite scroll, like the Facebook or Twitter home timeline. Posts load endlessly as the user scrolls, and the hard part is staying smooth after 2,000 posts, never showing a post twice, and making likes feel instant.
The page shows a column of posts (text, images, like and comment counts). As the user scrolls down, more posts load without a page change. The user can like a post, open its comments and write a comment. New posts published while the user reads appear behind a "new posts" button at the top.
What must a news feed frontend with infinite scroll do?
- Endless list: Load the next page when the user nears the bottom; show a loading state and a retry on failure.
- Interactions: Like and unlike feel instant; a comment appears in the thread immediately and is reconciled with the server response.
How well must it do it?
- Smooth scrolling: 60 fps on a mid-range phone after 2,000 loaded posts; DOM size must not grow without bound.
- Resilient: Duplicate or missing posts across page boundaries must not appear when new posts are inserted server-side between requests.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- Infinite scroll
- List virtualization
- Cursor pagination
- Optimistic UI
- IntersectionObserver
- Normalized store
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design a news feed frontend with infinite scroll and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Medium. Entry-level engineers can practise it, but it expects you to reason about requirements and trade-offs, not only list components.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team