Turn non-functional requirements into decisions
Requirements with numbers lead straight to decisions. Change scrolled to 50 or tick "needs SEO" and watch the decisions change. The thresholds are rules of thumb for this demo, not universal constants.
Frontend system design is planning a product's client side before building it; the RADIO steps (Requirements, Architecture, Data model, Interface, Optimisations) give you an order to follow, a time plan for a 45–60 minute interview and a shape for a real design doc.
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.
Write the requirements (functional, non-functional with numbers, out of scope) for an image carousel on a product page.
Change the time-plan example so it also shows the plan as percentages next to the minutes.
Explain it without notes
Walk me through how you'd structure a 45-minute frontend system design interview.
What's the difference between functional and non-functional requirements? Give three non-functional requirements with numbers for a photo-sharing app.
Which clarifying questions would you ask before designing a frontend, and how does each answer change the design?
What do interviewers look for in a frontend system design round?
Preview
Console
Nothing logged yet.Expected console output
JSON per page: about 40 KB
DOM nodes after scrolling: 20000
Decision: virtualise the list
Decision: client rendering is fine
Decision: poll every 30 s