Design a real-time stock dashboard frontend
PremiumFrontend systemMedium
- WebSocket
- Update batching
- requestAnimationFrame
Quick answer
This frontend system interview question asks you to design a real-time stock dashboard frontend. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design a real-time stock dashboard frontend like Zerodha Kite or Yahoo Finance, with a watchlist of up to 200 tickers, a live candlestick chart and price alerts. The hard part is applying up to 2,000 WebSocket ticks per second at 60 fps without melting the CPU.
Each watchlist row shows last price, change, percent change and a sparkline, flashing green or red on movement. Selecting a ticker shows a candlestick chart that updates live, an order-book depth panel and recent trades. Users set price alerts that pop a notification. The page is often left open all day in a background tab.
What must a real-time stock dashboard frontend do?
- Watchlist: 200 rows, sortable by change, with flash animations on price moves and a 1-minute sparkline per row.
- Chart: Candlesticks for the selected symbol at 1-minute intervals, last candle updating live, pan and zoom, 2,000 candles of history.
How well must it do it?
- Frame rate: 60 fps even in the worst case of all 200 tickers subscribed (a tall screen), an aggregate 2,000 ticks per second during market open.
- CPU: Under 30% of one core in the foreground; near zero in a background tab.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- WebSocket
- Update batching
- requestAnimationFrame
- Canvas charts
- Backpressure
- Ring buffer
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design a real-time stock dashboard frontend and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Medium. Entry-level engineers can practise it, but it expects you to reason about requirements and trade-offs, not only list components.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team