Sign inStart practicing
Start practicing Sign in

Frontend System Design Roadmap: Web and Mobile Interviews

A frontend system design roadmap for web and mobile: rendering strategies, state, caching, performance, offline sync, security and release engineering.

Intermediate 3 min read · Updated

This frontend system design roadmap is for web and mobile engineers preparing for client-side design rounds, where the system is the app on the user's device rather than the servers behind it. It covers how the web delivers pages, rendering strategies (CSR, SSR, SSG), Core Web Vitals and performance, state and data fetching, offline-first sync, browser security, and how releases reach millions of devices safely.

Frontend interviewers expect you to design the API contract you need from the backend, not just the components. Step 4 is where that comes together.

Tick topics off as you read them

  1. Step 1The frontend interview

    What a client-side design round expects.

  2. Step 2How the web delivers pages

    From a URL to pixels on screen.

  3. Step 3Performance

    Fast first load and smooth interaction.

    Practice:Image-heavy feed clientFrontend & mobile · Intermediate

  4. Step 4Data and state

    Fetching, caching and updating data on the client.

  5. Step 5Offline and sync

    Apps that keep working without a network.

    Practice:Offline-first mobile syncFrontend & mobile · Intermediate · FreeCollaborative whiteboard clientFrontend & mobile · Advanced

  6. Step 6Security

    Protecting users in the browser.

  7. Step 7Shipping to users

    Releasing safely to millions of devices.

    Practice:Mobile release and feature flagsFrontend & mobile · BeginnerMicro-frontend platformFrontend & mobile · Advanced

What frontend system design interviews ask

PromptWhat's really being testedGuides
Design a news feed or image-heavy feed clientPagination, virtualization, image loading, caching, perceived performanceVirtualization, images
Design an autocomplete componentDebouncing, request cancellation, caching results, accessibilityState management
Design offline-first mobile syncLocal storage, an outbox, conflict resolution, background syncOffline-first sync
Design a collaborative whiteboardReal-time channels, CRDTs, presence, rendering performanceCRDTs, WebSockets
Design mobile release and feature flagsPhased rollouts, kill switches, minimum versionsMobile releases

A four-week plan

  1. Week 1: steps 1 and 2. Practise the frontend interview framework on a news feed, and justify the rendering strategy you'd choose for its landing page.
  2. Week 2: step 3. Take a slow page and list the changes that would improve LCP, INP and CLS, in order of impact.
  3. Week 3: steps 4 and 5. Design the data layer for a chat app, including optimistic sends and what happens offline.
  4. Week 4: steps 6 and 7. Add a CSP and auth model to one design, and plan a staged rollout with a kill switch.

Frequently asked questions

Is frontend system design different from backend system design?

Yes. Backend rounds focus on servers, storage and scale across machines. Frontend rounds focus on the client: component architecture, state, network efficiency, rendering performance, offline behaviour and accessibility, plus the API you need. Both expect clear requirements and trade-offs.

Should mobile engineers follow this roadmap?

Yes. Steps 4 to 7 apply directly to iOS and Android: local databases, sync, push notifications and release engineering. Steps 2 and 3 are web-specific, but their principles (do less work up front, measure what users feel) carry over.

Which framework should I talk about?

Whichever you know best. Interviewers care about the ideas (server vs client rendering, normalised caches, virtualization), not whether you use React, Vue, Angular, Swift or Kotlin.

Further reading