Skip to content

Design nested comments (frontend)

Design the web client for nested comments under a post: replies to replies at any depth, loading more of a long thread, and posting, editing and deleting.

System designFrontend and full stackSocial feed and timelineMid-levelSenior

What to work through

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

  • Read the comments under a post, each reply shown under the comment it answers
  • Reply to any comment, at any depth
  • Load more top-level comments, and more replies under one comment, when asked
  • Edit or delete your own comment

Constraints to discuss

  • A posted reply shows within 200 milliseconds, before the server has answered
  • A thread of 10,000 comments is never drawn all at once
  • Deleting a comment leaves the replies under it readable
  • Showing and hiding replies works by keyboard and is announced to screen readers
Need a starting point?

Watch for these common gaps as you prepare:

  • Removing a failed reply without telling the person
  • Deleting a parent in a way that hides the replies under it
  • Rendering every comment of a large thread at once
  • Inserting new comments silently so the reading place jumps
  • Letting reply counts drift from the replies loaded
  • Losing a half-written reply when the parent is edited
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.