Skip to content

Design a news feed (frontend)

Design the web client for a news feed: people scroll posts from the accounts they follow, react and comment, and write posts of their own.

System designFrontend and full stackSocial feed and timelineMid-levelSenior

What to work through

Work through a news feed as a spoken system design interview. Start by clarifying the scope, sketch a working design and explain the trade-offs behind your choices.

  • Scroll a feed of posts from followed accounts, more loading as the reader goes
  • Like a post and comment on it
  • Write a post with text and photos
  • Learn that new posts have arrived without a manual refresh

Constraints to discuss

  • The first posts show within 2.5 seconds on a phone
  • A tap answers within 200 milliseconds
  • Scrolling stays at 60 frames a second with 100 or more posts loaded
  • Usable with a keyboard and a screen reader
Need a starting point?

Watch for these common gaps as you prepare:

  • Page numbers for a feed that new posts keep shifting
  • Adding new posts to the top while the reader is scrolling
  • Keeping every post ever loaded in the page
  • Restoring the reading place by a pixel offset when post heights vary
  • Leaving accessibility out: unlabelled buttons and no announcement of new posts
Read: Frontend system design interview questions, and who asks them

Why this question is in the collection

These sources connect the problem to company interview reports or preparation guides. They do not guarantee what a company will ask you.

Your next question

AI systemsDesign a ChatGPT-style chat (frontend)Search and autocompleteDesign an autocomplete search box (frontend)CollaborationDesign a calendar (frontend)Messaging and notificationsDesign a chat app (frontend)
Browse the collection
01

Pick a question

Read the brief and choose what you want to work on.

02

Talk it through

Explain your thinking. Respond to follow-ups. Draw when a design needs it.

03

Find your next improvement

Use the feedback from your interview to decide what to practice next.