Frontend architecture curriculum
Frontend System Design Questions
Learn how familiar interfaces behave as production systems. Each solution starts with the user contract, then works through state, browser boundaries, accessibility, performance, failures, testing, and the trade-offs an interviewer expects you to defend.
Published solutions
Start with the interaction primitives
- FSD-001Free
Design an Autocomplete System: Frontend System Design Guide
Design a production autocomplete system with clear state, race-safe requests, caching, accessibility, APIs, performance, testing, and trade-offs.
Debouncing, cancellation, ranking, caching, keyboard and screen-reader behavior
25 min read - FSD-002Premium
Design a Production Dropdown and Select Primitive
Design an accessible dropdown and select primitive with sound semantics, focus, positioning, state APIs, performance, and testing.
Positioning, portals, focus, typeahead, and controlled or uncontrolled APIs
34 min read - FSD-003Premium
Design a Multi-Select with Thousands of Options
Design a large multi-select with remote search, durable selection, virtualization, accessible focus, responsive chips, and reliable APIs.
Virtualization, remote search, durable selection state, responsive chips, and accessibility
48 min read - FSD-004Premium
Design a Date Picker and Date-Range Picker
Design a locale-aware date picker and date-range picker with correct date values, constraints, keyboard access, and reliable form contracts.
Date-only values, range invariants, locale presentation, keyboard access, and server validation
39 min read - FSD-005Premium
Design a Scheduler and Time-Slot Picker
Design a time-slot scheduler with correct time-zone semantics, live availability, temporary holds, accessible interaction, and conflict-safe booking.
Zoned time, daylight-saving transitions, live availability, temporary holds, and idempotent booking
44 min read - FSD-006Premium
Design an Accessible Modal and Nested-Dialog Manager
Design a modal platform with correct top-layer ownership, inert background content, focus containment, nested dialogs, and reliable restoration.
Top-layer ownership, focus containment, inertness, nested dialogs, dismissal, and restoration
40 min read - FSD-007Premium
Design a Tooltip, Popover, and Floating-Layer Platform
Design a floating-layer platform that separates semantics from geometry, handles collision and scrolling, and preserves accessible interaction.
Semantic families, anchor geometry, collision fallback, dismissal, focus, and cross-surface layering
41 min read - FSD-008Premium
Design a Toast and Notification-Center System
Design durable notification records, bounded toast queues, an in-product center, deduplication, accessible urgency, and hidden-tab behavior.
Durable records, delivery policy, queue bounds, deduplication, urgency, accessibility, and cross-device read state
43 min read - FSD-009Premium
Design a Command Palette
Design a fast, accessible command palette with indexed search, stable ranking, nested scopes, async actions, and safe execution.
Indexed search, shortcuts, asynchronous actions, nested command scopes, permissions, and accessibility
46 min read - FSD-010Premium
Design a Drag-and-Drop Framework
Design an accessible drag-and-drop framework with input parity, hit testing, auto-scroll, optimistic moves, rollback, and undo.
Pointer and keyboard parity, hit testing, nested scrolling, previews, optimistic persistence, rollback, and undo
50 min read - FSD-011Premium
Design a Sortable Kanban Board Component
Design a large, accessible Kanban board with stable ordering, cross-lane moves, optimistic updates, conflict recovery, virtualization, and undo.
Cross-lane moves, stable ordering, optimistic persistence, conflicts, accessibility, and large-board rendering
52 min read - FSD-012Premium
Design a Tree View and File Explorer
Design an accessible, lazy, virtualized file explorer with predictable keyboard navigation, selection, rename, subtree moves, and conflict recovery.
Lazy children, focus and selection, rename transactions, subtree moves, virtualization, and conflict recovery
52 min read - FSD-013Premium
Design a Nested Checkbox Permissions Tree
Design an accessible permissions tree with honest tri-state derivation, partial loading, safe propagation, large-hierarchy rendering, and secure writes.
Tri-state derivation, partial loading, propagation semantics, large hierarchies, and authorization safety
54 min read - FSD-014Premium
Design a Carousel for Touch, Mouse, Keyboard, and TV
Design a carousel with one navigation model across gestures, buttons, keyboards, and TV remotes, plus safe looping, media loading, and motion control.
Input unification, settled-slide identity, focus, lazy media, looping, and reduced motion
52 min read - FSD-015Premium
Design an Infinite Scroller
Design a resilient infinite scroller with cursor pagination, stable viewport anchoring, restoration, bounded prefetch, and accessible recovery states.
Cursor ownership, ordered merges, anchoring, restoration, bounded prefetch, and terminal states
52 min read - FSD-016Premium
Design a Variable-Height Virtual List
Design a virtual list that measures dynamic rows, preserves scroll position, bounds overscan, retains focus, and remains accessible.
Measurement, prefix offsets, overscan, stable anchoring, dynamic rows, and focus retention
54 min read - FSD-017Premium
Design a Virtualized Grid
Design a two-axis virtual grid with frozen regions, resizing, focus, selection, clipboard support, and accessible logical coordinates.
Two-axis windowing, frozen regions, resize, focus, selection, and clipboard behavior
57 min read - FSD-018Premium
Design a Wizard and Multi-Step Form Engine
Design a production multi-step form with branching, validation, resumable drafts, browser navigation, accessible errors, analytics, and safe submission.
Step state, validation, branching, drafts, navigation, and analytics
55 min read - FSD-019Premium
Design a Schema-Driven Form Renderer
Design a production form renderer with versioned schemas, conditional fields, trusted widgets, validation, drafts, migrations, accessibility, and security.
Dynamic fields, dependencies, validation, versioning, and custom widgets
52 min read - FSD-020Premium
Design a File Upload Component Platform
Design a production file upload platform with multipart transfer, retries, checksums, trustworthy progress, accessible previews, processing, and security.
Chunking, pause and resume, retries, progress, previews, and security
54 min read - FSD-021Premium
Design an Enterprise Data Table
Design an enterprise data table with remote queries, stable identity, virtualization, editing, column state, accessibility, and conflict handling.
Server operations, column state, virtualization, editing, and accessibility
56 min read - FSD-022Premium
Design a Spreadsheet Grid
Design a browser spreadsheet with formulas, dependency-aware recalculation, ranges, clipboard transactions, virtualization, accessibility, and undo.
Formula dependencies, selection, clipboard, virtualization, and undo/redo
58 min read - FSD-023Premium
Design a Pivot-Table Builder
Design a pivot-table builder with field zones, validated aggregation, hierarchical results, server execution, virtualization, accessibility, and saved views.
Field configuration, aggregation, workers, and incremental recomputation
55 min read - FSD-024Premium
Design a Real-Time Analytics Dashboard
Design a real-time analytics dashboard with ordered updates, event-time windows, backpressure, synchronized panels, reconnection, and accessible rendering.
Streaming updates, aggregation, chart synchronization, and stale data
58 min read - FSD-025Premium
Design a Metrics Explorer Like Grafana
Design a metrics explorer with query drafts, time ranges, adaptive resolution, live tail, accessible charts, cost limits, and shareable state.
Query builder, time ranges, downsampling, live tail, and shareable state
60 min read - FSD-026Premium
Design a Log Viewer for Millions of Events
Design a massive log viewer with ordered history, live tail, bounded buffers, pause and resume, search, virtualization, redaction, and recovery.
Streaming, backpressure, virtualization, search, pause, and resume
62 min read - FSD-027Premium
Design a Distributed Trace Viewer
Design a trace viewer for partial span trees, large waterfalls, filtering, correlation, accessibility, and late telemetry.
Waterfalls, nested spans, large trees, filtering, and correlation
58 min read - FSD-028Premium
Design a Network Waterfall Panel
Design a trustworthy network waterfall with incremental events, timing phases, zoom, virtualization, retention, and safe export.
Timing model, incremental events, zooming, memory limits, and export
55 min read - FSD-029Premium
Design a Flame-Chart Profiler
Design a flame-chart profiler with sampled stacks, worker indexing, semantic zoom, fast rendering, accessible inspection, and safe trace sharing.
High-volume samples, canvas and WebGL rendering, zoom, selection, and workers
56 min read - FSD-030Premium
Design an SQL Query Console
Design a production SQL query console with safe execution modes, schema-aware editing, streamed rows, cancellation, virtualization, and auditable exports.
Editor integration, execution identity, streaming rows, cancellation, and database safety
54 min read - FSD-031Premium
Design a BI Dashboard Builder
Design a production BI dashboard builder with responsive layouts, semantic queries, coordinated refreshes, permissions, drafts, publishing, and safe exports.
Layout editing, semantic queries, coordinated refreshes, permission boundaries, drafts, and publishing
58 min read - FSD-032Premium
Design a Financial Trading Terminal
Design a trading terminal with ordered market data, bounded rendering, exact prices, safe orders, alerts, reconnect recovery, and accessible failure states.
High-frequency market updates, sequence recovery, precise values, private order state, safe actions, and bounded rendering
61 min read - FSD-033Premium
Design an Order Book and Live Price Chart
Design a live price-level order book and OHLCV chart with ordered deltas, exact ticks, gap recovery, bounded rendering, and accessible degraded states.
Ordered price-level reconstruction, exact values, chart aggregation, dropped-event recovery, and pixel-bounded canvas rendering
64 min read - FSD-034Premium
Design a Telemetry Heatmap
Design a large telemetry heatmap with explicit histogram semantics, progressive tiles, stable color domains, bounded rendering, and accessible cell inspection.
Large time-by-value matrices, progressive aggregation, stable color meaning, query ownership, and pixel-bounded interaction
62 min read - FSD-035Premium
Design an Editable Org Chart
Design a large editable org chart with stable graph identity, lazy expansion, deterministic layout, validated moves, secure export, and accessible navigation.
Large hierarchical graphs, lazy expansion, stable layout, permission-aware editing, and transactional reporting-line changes
58 min read - FSD-036Premium
Design a Node-Based Workflow Editor
Design a node-based workflow editor with typed ports, safe graph commands, validation, undo, collaboration, accessible controls, and durable publishing.
Large editable graphs, typed connections, reversible gestures, concurrent drafts, deterministic validation, and safe publication
60 min read - FSD-037Premium
Design a Dependency Graph Explorer
Design a dependency graph explorer with progressive neighborhoods, stable focus, cycle condensation, scalable rendering, filters, and accessible navigation.
Huge partial graphs, cycles, progressive layout, dense edges, versioned evidence, stable focus, and permission-aware exploration
60 min read - FSD-038Premium
Design a Geospatial Operations Dashboard
Design a live geospatial dashboard with scoped viewport queries, stable entity identity, clustering, degraded modes, and accessible workflows.
Live spatial entities, viewport queries, clustering, map projections, layer freshness, degraded operation, and permission-aware incident workflows
60 min read - FSD-039Premium
Design a Large Audit-Log Explorer
Design a permission-safe audit explorer with immutable evidence, cursor snapshots, redaction, verification, exports, and accessible virtualization.
Immutable evidence, huge result sets, permission-aware redaction, cursor-stable investigation, integrity receipts, exports, and accessible row navigation
62 min read - FSD-040Premium
Design a Configurable Admin Console
Design a metadata-driven admin console with versioned page contracts, server-enforced permissions, safe bulk actions, and recoverable schema rollouts.
Metadata-driven pages, field and action permissions, large data grids, safe bulk mutations, schema evolution, staged rollout, and accessible consistency
58 min read - FSD-041Premium
Design a Social News Feed
Design a ranked social feed with cursor snapshots, stable scroll, optimistic actions, live updates, accessible articles, and bounded media work.
Personalized ranking, cursor pagination, live arrivals, optimistic actions, scroll anchoring, media performance, accessibility, and session consistency
61 min read - FSD-042Premium
Design a Microblog Timeline
Design a following timeline with stable post identity, cursor snapshots, threads, reposts, optimistic publishing, moderation, and accessible infinite reading.
Stable records, following and ranked timelines, reply graphs, reposts, optimistic publishing, moderation labels, live arrivals, scroll restoration, and accessible feed semantics
63 min read - FSD-043Premium
Design a Photo-Sharing Feed
Design an image-first social feed with responsive media, resumable uploads, stable layout, bounded prefetch, moderation, and accessible continuous reading.
High-resolution media, responsive variants, layout stability, progressive loading, upload recovery, carousel state, prefetch budgets, moderation, and accessible feed semantics
65 min read - FSD-044Premium
Design a Short-Video Feed
Design a short-video feed with one playback owner, adaptive streaming, bounded preload, stable gestures, captions, moderation, and honest telemetry.
Playback ownership, adaptive quality, startup latency, segment buffering, decoder and memory limits, gesture arbitration, accessibility, moderation, and feed continuity
68 min read - FSD-045Premium
Design a Threaded Comments System
Design a threaded comments interface with independent branch pagination, optimistic replies, stable anchors, versioned edits, moderation, and live recovery.
Tree projection, per-parent pagination, optimistic identity, version conflicts, moderation visibility, live sequence recovery, deep links, scroll anchoring, and bounded rendering
64 min read - FSD-046Premium
Design a Personalized Home and Discovery Page
Design a fast, accessible personalized home page with heterogeneous modules, stable composition, safe caching, experiments, and isolated failures.
Heterogeneous module composition, viewer-scoped ranking, stable geometry, experiment assignment, cache separation, partial failure, accessibility, and useful-paint performance
66 min read - FSD-047Premium
Design a Web Search Results Experience
Design an accessible web search results page with canonical query state, trustworthy snippets, facets, pagination, stale-response guards, and private telemetry.
Canonical query ownership, stable result identity and rank, evidence-bearing snippets, facets, pagination, accessibility, caching, privacy, and useful-results performance
68 min read - FSD-048Premium
Design an E-commerce Product Search Experience
Design a fast, accessible product listing with canonical facets, stable ranking, responsive media, and separately fresh price and inventory facts.
Stable product ranking across canonical query state while variants, offers, prices, promotions, and inventory change on independent freshness clocks
70 min read - FSD-049Premium
Design a Code Search Interface
Design fast code search with a query language, streamed matches, safe highlighting, stable navigation, and bounded huge-file rendering.
Useful partial results without losing query ownership, permission scope, match identity, or source coordinates across streaming and huge-file navigation
65 min read - FSD-050Premium
Design an Enterprise Knowledge Search
Design permission-aware search across company wikis, files, tickets, and messages with honest freshness, provenance, and safe previews.
Useful cross-source evidence without allowing a stale index, connector cache, or normalized snippet to become a second authorization system
68 min read - FSD-051Premium
Design a Local-First Full-Text Search UI
Design offline browser search with worker-owned indexing, incremental revisions, bounded memory, and honest storage states.
Keep search useful offline without allowing partial index builds, stale worker replies, browser quota pressure, or unbounded postings to corrupt the visible result set
66 min read - FSD-052Premium
Design a Documentation Site
Design versioned, multilingual documentation with edition-safe search, tested code samples, durable links, and explicit offline packs.
Let readers move across versions, locales, search results, code samples, deploys, and offline states without losing the exact edition they intended to read
63 min read - FSD-053Premium
Design a News Publication Homepage
Design a fast, stable news homepage with edge rendering, controlled breaking-news patches, recirculation, ad contracts, and correction-aware publishing.
Publish a rapidly changing editorial front page without moving readers, mixing editions, collapsing ad space, or letting live updates outrun verification
64 min read - FSD-054Premium
Design a Personalized Content Reader
Design an offline-capable reader with a durable queue, semantic reading positions, cross-device sync, adaptable typography, and explainable recommendations.
Let readers save, download, read, reflow, and resume content across devices without losing position, duplicating intent, or hiding recommendation reasons
62 min read