FSD Frontend System Design

Part V — The Craft

10 Low Level Design

GoalDesign and build reusable components under interview time pressure, narrating trade-offs as you go.

  1. 10.1 Component Design Design the props API before the implementation — the API is the part you can't change later. Props API surface + composition vs configuration · 18 min
  2. 10.2 Config Driven UI The server sends JSON describing the screen, and the client renders whatever it's told. Config → registry → rendered UI · 16 min
  3. 10.3 Shimmer UI Show the shape of the content while it loads — perceived speed improves even though nothing got faster. Spinner vs skeleton timeline + layout stability · 13 min
  4. 10.4 Routing & Protected Routes A route table plus a guard that knows three answers: yes, no, and not yet. Route tree with guard nodes + the three-state auth check · 16 min
  5. 10.5 State Management + Libraries Pick the library by re-render behaviour and team size, once you've classified the state correctly. Re-render blast radius per approach · 16 min
  6. 10.6 Multi Language Support Keys not sentences, one locale bundle at a time, and a layout that survives text growing 35%. i18n pipeline + what changes besides words · 17 min
  7. 10.7 Infinite Scroll A sentinel element triggers the next page, and virtualization stops the DOM from growing forever. Sentinel + viewport window + virtualization · 18 min
  8. 10.8 Accordion A list of disclosure toggles — trivial to render, and a complete accessibility contract to get right. Open/close state machine + the ARIA wiring · 14 min
  9. 10.9 Nested Comments A recursive tree render over a flat, normalized store — with a depth cap so it stays usable. Flat data → tree structure → recursive render · 17 min
  10. 10.1 Image Slider One transform on a track, plus autoplay, swipe, preload, and the accessibility everyone forgets. Track offset model + infinite loop with clones · 16 min
  11. 10.11 Pagination Part-1 Offset is simple and drifts; cursor is stable and can't jump to page 7 — pick by what the data does. Offset drift vs cursor stability · 16 min
  12. 10.12 Pagination Part-2 Build it: URL-driven state, an ellipsis page range, and a keyboard-accessible nav element. Component structure + the ellipsis window algorithm · 17 min
  13. 10.13 Real-Time Updates Merge live events into rendered lists without losing the user's place or their scroll position. Event → reducer → UI, and the merge conflict with local edits · 17 min
  14. 10.14 YouTube Live Stream Chat UI Hundreds of messages a second into a fixed-size window — buffer, cap, virtualize, and pin to bottom carefully. Buffer and flush pipeline + the bounded window · 18 min
  15. 10.15 Autocomplete & Search Bar Debounce, cancel, cache, and keyboard-navigate — the most-asked LLD question, and the most detail-rich. Keystroke timeline with debounce + race condition · 19 min

Capstone

Build any three of these in 45 minutes each, out loud: state the API first, handle loading/empty/error, then optimise.