Frontend Roadmap

Frontend System Design

The architecture behind real frontends, then the interview problems that apply it. Foundations first, practice problems second.

0%0 of 27

27topics

2stages

0completed

10/12

Frontend Foundations

How a page becomes interactive, where state lives, what makes it fast, and the concerns that are expensive to retrofit. Read these in order.

Rendering Architecture

How CSR, SSR, SSG, ISR, and streaming SSR actually differ at request time, what hydration really costs, and how to match a rendering strategy to the content you are shipping.

Beginner

State Management Architecture

Why local, global, and server state are three different problems, how stale-while-revalidate caching works, and when the URL is the right place to keep state.

Beginner

Application Architecture at Scale

Micro-frontends, monorepo versus polyrepo, design system distribution, and the Backend-for-Frontend pattern - and when each one is worth its complexity.

Intermediate

Networking and Data Fetching

REST, GraphQL, and tRPC from the consumer side, how request waterfalls happen, and the three fetching patterns that decide what your loading states look like.

Intermediate

Performance Engineering

The critical rendering path, code splitting and bundle budgets, what LCP, INP, and CLS actually measure, and how the browser, CDN, and service worker caches stack.

Intermediate

Offline and PWA Architecture

The service worker lifecycle, choosing a caching strategy per resource type, queuing and replaying offline mutations, and the app shell model.

Advanced

Security Architecture

XSS and CSRF as architectural concerns, designing a Content Security Policy, the httpOnly cookie versus localStorage decision, and sandboxing third-party scripts.

Advanced

Accessibility Architecture

Building accessible primitives into a design system, focus management for single-page apps, and where automated a11y testing stops being enough.

Intermediate

Observability

Real User Monitoring architecture, error tracking with source maps, and correlating a frontend error with the backend trace that caused it.

Advanced

Testing Strategy

The test pyramid applied to frontend, why the shape matters more than the count, and which test types belong at which CI gate.

Intermediate

Internationalization Architecture

Structuring translation content, locale-aware routing and its SEO implications, shipping only the active language pack, and treating RTL as architecture.

Intermediate

Build Tooling and Developer Experience

Webpack, Vite, and Turbopack compared at the architecture-decision level, how incremental builds cache, and CI caching that keeps pipelines fast as a team grows.

Intermediate

20/15

Frontend Practice Problems

The classic "design X" interview prompts, each one applying the foundations to a concrete widget or flow.

Autocomplete / Typeahead

Design a search suggestion box that stays responsive under fast typing, never renders a stale response, and is fully operable from the keyboard.

PracticeIntermediate

Infinite Scroll

Design a feed that loads more content as the user scrolls, using a cursor-paginated API, without leaking DOM nodes, duplicating items, or losing scroll position on back-navigation.

PracticeBeginner

Real-Time Feed

Design a feed that receives live updates over a persistent connection, merges them into a paginated list without disturbing the reader, and recovers cleanly from disconnection.

PracticeAdvanced

Drag and Drop

Design a reorderable list with pointer-based dragging, a correct new-index calculation, clear drop feedback, and a keyboard path that does the same job without a mouse.

PracticeIntermediate

Virtualized List (100k+ items)

Render a list of 100,000 rows at a constant DOM cost by mapping scroll offset to a visible index range, with the measurement machinery variable heights demand.

PracticeAdvanced

Rich Text Editor

Design a formatting editor on contentEditable, with a structured document model as the source of truth, commands as transactions, undo via a transaction log, and paste sanitisation.

PracticeAdvanced

File Upload System

Design a large-file uploader with chunking, resumable sessions, per-chunk progress, and direct-to-storage presigned uploads that never route bytes through your API.

PracticeIntermediate

Notification System

Design in-app, cross-tab and push notification delivery with one unread count that stays correct everywhere, plus grouping, deduplication and a permission flow users accept.

PracticeAdvanced

Date Picker

Design a calendar picker with correct month grid generation, a timezone model that separates the date value from its display, range selection, and full ARIA grid keyboard support.

PracticeIntermediate

Multi-Step Form

Design a wizard with one centralised state store, per-step validation with cross-step dependencies, conditional branching, draft persistence, and correct focus on every transition.

PracticeBeginner

Shopping Cart

Design a cart that works logged out and logged in, updates optimistically with rollback, merges on login, stays consistent across tabs, and never trusts a client-computed price.

PracticeIntermediate

Video Player

Design a streaming player with adaptive bitrate selection, a tuned buffer, custom controls on the HTMLVideoElement API, captions, and analytics that never compete with playback.

PracticeAdvanced

Collaborative Document

Design real-time collaborative editing, comparing Operational Transformation and CRDTs on concrete conflicting edits, with presence, local-first application, and offline merge.

PracticeAdvanced

Image Gallery with Lazy Loading

Design an image grid that defers offscreen loading, serves the right resolution per device, reserves layout space to prevent shift, and preloads lightbox neighbours.

PracticeBeginner

Dashboard with Widgets

Design a configurable widget dashboard with a registry, a shared data layer, per-user persisted layout, error isolation, lazy mounting, and updates that never re-render siblings.

PracticeAdvanced

30/12

Backend Fundamentals

The original backend system design track. Still useful context for full-stack interviews, but no longer the focus of this roadmap. No new updates are planned for this module for some time.

What is System Design

Understand how system design helps you build scalable, reliable, and maintainable applications in real-world production environments.

Beginner

Functional vs Non-Functional Requirements

Learn the difference between functional and non-functional requirements and how they shape real-world system design decisions.

Beginner

Latency vs Throughput

Understand the difference between latency and throughput and how they impact performance and scalability in real-world systems.

Beginner

Availability vs Consistency

Learn the trade-off between availability and consistency and how it impacts real-world distributed systems.

Beginner

Scalability Basics (Vertical vs Horizontal)

Learn how vertical and horizontal scaling work, when to use each, and how they impact real-world system performance.

Beginner

Load Balancing

Learn how load balancing distributes traffic across servers to improve scalability, reliability, and performance in real systems.

Beginner

Caching

Reduce latency and offload repeated work by storing expensive results closer to the consumer.

Intermediate

Databases

Learn different types of databases, when to use them, and how they impact scalability, performance, and system design decisions.

Beginner

Database Indexing

Speed up lookups by creating the right indexes, then balance read performance against write amplification and storage cost.

Intermediate

Database Replication

Learn how database replication improves availability, scalability, and reliability with practical patterns and real-world examples.

Beginner

Database Sharding

Learn how database sharding distributes data across multiple databases to handle large scale traffic and improve performance.

Beginner

Message Queues

Decouple producers and consumers so the system can smooth spikes, retry work safely, and move slow tasks out of the request path.

Intermediate

"I've been writing CSS for the better part of 7 years, and I cannot answer a substantial number of these questions. Here comes the imposter syndrome."

Carson StrickerFrontend Developer · via daily.dev

Also loved by Soumava Das, Dikshant Singh, Olawale Bashiru and other developers putting the roadmap to the test.