Realtime Order Tracker
Problem statement
Build a realtime order tracker like the status screen in a food delivery app. The UI receives simulated socket events and advances a timeline from order placed to delivered.
The tracker should show connection state, reconnect after a simulated disconnect, ignore duplicate events, and reject stale out-of-order events that would move the timeline backward.
The key challenge is treating realtime updates as an event stream with ids and versions, not just blindly setting the latest status from every incoming message.
Requirements & constraints
- Render an order timeline with multiple delivery states.
- Simulate incoming realtime events over time.
- Show connected and disconnected states.
- Reconnect after disconnect with a simple backoff.
- Ignore duplicate events by event id.
- Ignore stale events that have an older version than the current timeline.
How to approach Realtime Order Tracker
The strategy an interviewer expects you to reach for.
How to Think About This Problem A realtime order tracker is not just a status badge. It is a small event-processing system. Messages can arrive late, arrive twice, or arrive after a reconnect. Your UI must protect the user from those messy details. The senior mindset is: never blindly trust event arrival order. Accept only events that are valid for the current timeline.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.