System design
How I draw
a frontend
The reference shape I start from on a large product. Select any block to read what it owns, the decision I make there, and the trade-off.
Request path →
Browser
Inside the Next.js app
Select any block
Asked before drawing any boxes
Review checklist- Q1Who changes this, and how often?
Frequent business changes push logic toward configuration. Rare ones stay in code, where they're easier to read.
- Q2Where does the truth live?
Server state, URL state and local UI state each get one owner. Most bugs I've fixed came from two owners.
- Q3What breaks first at 10×?
Rendering cost, bundle size, or the team itself. The answer decides whether to virtualize, split or modularize.