open atlas
↑ Back to track
Frontend Architecture FE · 08 · 07

Putting it together: multiple-choice review

Cross-track multiple-choice synthesis: read a frontend symptom, locate the layer that actually owns the bug, and pick the fix that does not just mask it.

FE Senior ◷ 14 min
Level
FoundationsJuniorMiddleSenior

Every question here crosses two or three units. The skill the capstone tests is not recall of one layer — it is reading a symptom and naming the lowest layer that owns it, because that is where the durable fix lives.

Work through each question before reading the answers — the diagnostic muscle only sharpens when you commit to a layer first.

Goal

Confirm you can trace a frontend symptom down the cascade — state shape, fetch graph, tokens, monorepo boundaries, splitting, pipeline — and reject fixes that optimise a layer above the real cause.

Quiz

A dashboard janks on every keystroke in its search box. A teammate files a ticket to code-split and lazy-load the charts. What is the senior read?

Quiz

A product page renders a skeleton, then JS hydrates, then it fetches the user, then the cart, then recommendations — each waiting on the previous. LCP is 4.8 s. Which layer owns this, and what is the fix?

Quiz

Marketing asks for a rebrand: a new brand color plus a dark mode. The codebase has the brand hex hardcoded across ~300 components. What does this reveal, and what is the structural fix?

Quiz

CI takes 15 minutes for a one-line change in one of 12 packages because everything imports one giant shared package. What attacks the root cause?

Quiz

You are handed a new frontend to review. In which order does a senior evaluate the layers, and why that order?

Quiz

A heavy charting library loads on first paint of every route even though most users never open the analytics tab, and a screen-reader user reports the date-picker inside it traps focus. Which two-layer fix is right?

Recap

The through-line across the track is one decision tree. Where state lives sets the re-render blast radius; the fetch graph owns LCP; tokens decide whether a rebrand is a value swap or a file hunt; monorepo boundaries are the build-time multiplier; splitting and the pipeline are the cheapest layers. Every question above is the same move — read the symptom, drop to the lowest layer that owns it, and reject any fix that optimises a layer above the cause. Now when you see jank, a slow LCP, or a 15-minute CI build, you know where to look first.

Something unclear?

Ask a question about this lesson. Questions are anonymous and go straight to the author to make the lesson better.

shortcuts expand
search
K
prev piece
k
next piece
j
cycle tier
t
this menu
?
sources3
expand
  1. 01
  2. 02
  3. 03

Trademarks belong to their respective owners. Editorial reference only.