Numbers for the answer: how big is the data, and what does a poll cost?
Sizes are the uncompressed text, before gzip. In the interview, say that: servers compress text, so the real transfer is several times smaller. The decision they support (poll the small file, aggregate the big one) stays the same.
A frontend system-design round asks you to plan a whole product screen, not write one function. You practise the order of a good answer on a live metrics dashboard: requirements, data flow, rendering choice, real-time updates, states, accessibility and a performance budget with numbers.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Draw the data flow for a page showing stations on a map, with a filter and a table twin. Name the one place that owns the filter state.
For a dashboard with 5,000 viewers instead of 50, and data that changes every second, what changes in your answer to "how does data arrive"? Give two changes.
Write the screen-state function for a chart that has partial failure: the rides line loaded, the station map failed. What does each chart show?
Explain it without notes
How do you start a frontend system-design answer for a metrics dashboard?
When would you choose polling, SSE or WebSockets for the live data?
Which states does a dashboard chart need, and why?
How do you set and check a performance budget?
Console
(nothing was printed)Expected console output
stations.csv 1.4 KB, 25 rows
daily.csv 13.1 KB, 365 rows
trips-10k.csv 475.9 KB, 10000 rows
status.json 1.3 KB
ardenvale.topojson 2.6 KB
status.json every 10 s: 458 KB per hour per open tab
10 wall screens + 40 phones: 5 requests per second
trips-10k.csv is 36x the size of daily.csv