How would you build the frontend for a real-time feature like a shared task board where many users edit at the same time?

What the interviewer wants to hear

• Use a persistent connection such as WebSockets or Server-Sent Events, with reconnect and backoff
• Normalised client state updated from server events, with ordering or version numbers
• Optimistic updates with reconciliation and rollback
• Conflict handling: server authority, operational transforms or CRDTs for rich collaborative editing
• Performance: batch updates, avoid re-rendering the whole board, presence indicators

Model answer

I would open a WebSocket connection, or Server-Sent Events if clients mostly listen, with automatic reconnect, exponential backoff and a resync step that fetches missed changes using the last known version. Client state is normalised by id, so an incoming event like "task moved" updates one record and only the affected column re-renders. Every change is applied optimistically with a client-generated id; the server confirms it, assigns a version and broadcasts it. If the server rejects it, I roll back and show a message. For conflicts on simple fields, the server is the authority and uses versions to detect stale writes. For rich shared text, I would use a CRDT library such as Yjs instead of inventing my own merging. To stay fast, I batch bursts of events into one render, virtualise long columns and keep drag state local. I also show presence, like avatars and who is editing a card, and test with simulated latency and dropped connections.

More hard Frontend Developer questions

• How would you design and build a shared component library (design system) used by several product teams?
• A page must show a table with 50,000 rows and stay smooth while scrolling and filtering. How would you build it?
• What are the main security risks for a frontend application and how do you protect against them?
• Your company wants to split a large frontend into micro-frontends. What are the trade-offs and how would you approach it?
• What are React Server Components, and how do they change the way you build a React app?
• How would you design a web app that keeps working offline, for example for field workers with poor connectivity?
• You join a team with a large JavaScript React codebase. How would you migrate it to TypeScript without stopping feature work?
• Users report that your single-page app becomes slow and crashes after being open for a few hours. How do you investigate and fix it?
• How do you know your frontend is healthy in production? Describe the monitoring you would set up.