How to Answer Frontend System Design

Core answer shape

A strong frontend system design answer is not a framework tour. It is a structured decision narrative.

Start with frontend-system-design-answer-playbook if you want the expanded structure, diagrams, and scoring guide. Use this chapter as the short checklist.

Use this order:

1. Clarify users, workflows, scale, and constraints.
2. Define route and rendering strategy.
3. Define data ownership, API/BFF boundaries, and cache behavior.
4. Define state ownership: server, URL, form, local, workflow, and global.
5. Define module/component boundaries.
6. Define performance, accessibility, security, reliability, and observability gates.
7. Name tradeoffs, failure modes, and rollout plan.

Scoring rubric

Area	Strong signal	Weak signal
Requirements	asks about users, critical journeys, scale, constraints	jumps into React components
Rendering	chooses per route/segment	chooses one rendering mode globally
Data	names ownership, freshness, caching, mutation consistency	says "use REST/GraphQL" only
State	separates URL/server/form/local/workflow state	puts everything in one store
Performance	budgets and profiles critical paths	says "lazy load" generally
Accessibility	names keyboard, focus, semantics, error states	says "use ARIA"
Security	maps browser trust boundaries	assumes backend handles all risk
Reliability	designs degraded states and rollback	only handles happy path
Communication	explains tradeoffs	lists technologies

Common weak answers

• "Use Next.js and React Query" without route/data reasoning.
• "Use microfrontends" without ownership and deployment constraints.
• "Use SSR for performance" without hydration and cache strategy.
• "Use a design system" without component contracts.
• "Use AI tools" without evals, permissions, and fallbacks.

Practice rule

For every answer, produce at least three artifacts:

• architecture diagram
• decision matrix
• launch/readiness checklist

For architect-level practice, add:

• route rendering matrix
• data/state ownership table
• failure matrix
• observability schema
• rollout and rollback plan