Katkat
Back

Design a Real-Time Comment System Front End With Optimistic Updates

CohereFrontend Engineer · Onsite
MediumFrontend EngineerOnsiteSystem Design

Last updated

Front-end system design for a real-time comment feed, centered on optimistic updates: a new comment is appended to the list before the backend confirms it, so the user can keep typing. It tests client state modeling, reconciliation with live echoes, failure and retry handling, ordering, reconnection and rendering performance.

Design the front end of a real-time comment system. Viewers see new comments from other people appear live, and can post their own.

The interviewer's focus is optimistic updates. When a user submits a comment, append it to the end of the comment list immediately, before the backend has confirmed that it was saved, so the user can keep typing and interacting without waiting. Your design has to explain what happens to that comment afterwards, in every outcome.

Clarifying Questions

  • What are the comments attached to (a live video, a document, an article), and roughly how many concurrent viewers and comments per second are expected at peak?
  • Is the list flat, or are there threaded replies?
  • Can users edit or delete their comments?
  • Must every client show exactly the same order, or is a slightly different local order acceptable until refresh?
  • What should the user see when a comment fails to send, or is rejected by moderation?
  • Which transports are available on the backend: WebSocket, server-sent events, or polling only?

Hints

Hint 1

Follow one comment: Trace a single comment through its whole life: typed, shown, sent, confirmed or rejected, and also delivered back to this client through the live channel. Decide what state the UI must keep at each step.

Hint 2

Whose clock decides: Consider two people posting at nearly the same moment, and decide which ordering the list shows before and after the server has responded.

Follow-up questions

  • A thousand comments per second arrive during a popular live event. How does the client stay responsive?
  • The user posts, loses connectivity, and comes back ten minutes later. What happens to the pending comment?
  • How would you support optimistic edit and delete, including deleting a comment that is still pending?
  • How would you test the optimistic flow, including acknowledgements that arrive out of order?