Design a Real-Time Comment System Front End With Optimistic Updates
Company: Cohere
Role: Frontend Engineer
Category: System Design
Difficulty: medium
Interview Round: Onsite
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.
```hint 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 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.
```
### 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?
### What a Strong Answer Covers
- A client state model for comments, including a per-comment delivery status
- The API and real-time channel contract the front end needs from the backend
- The optimistic lifecycle: immediate display, confirmation, deduplication against the live echo, failure and retry
- Ordering, reconnection and catch-up after missed events
- Rendering performance for long, fast-moving lists, plus scroll behavior
- Security, accessibility and how the design is tested
### 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?
Overview: 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.