System Design Interview Questions
15 System Design interview questions with worked answers, complexity notes, and runnable code you can edit in the browser — ordered easy to hard so you build up steadily. Free, no signup. Open any question for the full answer.
A repeatable way to design a frontend
Frontend system design feels open-ended until you have a structure to hang it on. The one these questions use is RADIO: Requirements, Architecture, Data model, Interface, Optimizations. Its whole purpose is to stop you from diving into a component tree before you have agreed on what you are building and how you will know it is done. Spend the first minutes scoping — functional requirements (what it does) and non-functional ones (how fast, how accessible, how resilient) — because the constraints you surface here are what every later decision refers back to.
From there, the shape of a strong answer is breadth first, then one deliberate deep-dive. Sketch the component tree and each part’s responsibility. Decide what state exists and where it lives — server, client, URL, or local storage — since that single choice drives most of your data flow, caching, and consistency questions. Define the interfaces: the props between components and the API contracts with the backend, including the states everyone forgets — loading, empty, and error.
Then pick the hard part and go deep. In a news feed it is infinite scroll and cache invalidation; in an autocomplete it is debouncing, cancellation, and race conditions; in a chat app it is the real-time transport and optimistic updates. Interviewers reward the candidate who covers the whole surface competently and then demonstrates depth on the piece that actually matters, while narrating the trade-offs out loud. These questions walk through that method on the designs that come up most, so the framework becomes a habit rather than something you reconstruct under pressure.
Easy
- The RADIO framework itself RADIO Framework
You're asked to 'design a component/feature'. What structure do you use to answer? - Design an optimistic like/save button Optimistic UI
Design a like (or save/follow) button that feels instant. Apply RADIO; cover rollback and rapid clicks. - Design an in-app toast / notification system Notification Queue
Design a toast system any component can trigger. Apply RADIO; cover stacking, auto-dismiss, and a11y. - Design light/dark theme switching Theming
Design theme switching (light/dark/system). Apply RADIO; cover FOUC, persistence, and prefers-color-scheme.
Medium
- Design a reusable component (e.g. Modal / Button) Reusable Component
Design a reusable Modal for a shared component library used by multiple teams. Apply RADIO. - Design an infinite-scroll feed Infinite Scroll / Feed
Design a news/social feed with infinite scroll. Apply RADIO; call out pagination and performance. - Design a data table (sort, filter, pagination) RADIO
Design a reusable data-table component that supports column sorting, filtering, and pagination over large datasets. - Design an autocomplete / typeahead Autocomplete / Typeahead
Design a search autocomplete. Apply RADIO; call out debouncing, race handling, caching, and a11y. - Design a client-side SPA router Client-side Router
Design a client-side router for a single-page app. Apply RADIO; cover the History API, lazy routes, and scroll.
Hard
- Design a real-time BI dashboard Real-time Dashboard
Design a real-time analytics dashboard with live-updating D3 charts (à la Domo). Apply RADIO. - Design a shared component library Component Library
Design a component library adopted by multiple product teams. Apply RADIO; cover theming, versioning, a11y. - Design a resilient file uploader RADIO
Design a file uploader that handles large files with progress, retries, concurrency limits, and resilience to flaky networks. - Design a notifications delivery system Real-time Transport
Design real-time notification delivery to the client. Apply RADIO; compare transports and cover reconnect, ordering, and dedup. - Design a client data-fetching cache (SWR) Client Data Cache
Design a data-fetching layer like React Query / SWR. Apply RADIO; cover dedup, stale-while-revalidate, invalidation, and GC. - Design a real-time collaborative editor Collaborative Editing
Design a collaborative document editor (à la Google Docs). Apply RADIO; cover presence, conflict resolution, and offline.
Other topics
HTML/CSS · Browser · JavaScript · TypeScript · React · Accessibility · Web Performance · Testing · Networking/Security · DSA