One week

345 minutes across 23 steps. Seven focused sessions across UI, State and Server — enough to hold your own in a frontend interview loop, assuming you already write JavaScript for a living.

One week 0 of 0 done (0%)

1. Mark ui/atom done ui/atom reading

   Start where every component starts.

2. Mark atom-boundaries done Where does an atom stop? quiz · easy · 8 min

   Four minutes that decide where half your components belong.

3. Mark ui/props done ui/props reading
4. Mark ui-props-basics done Validating Prop Usage quiz · easy · 7 min
5. Mark props-defaults done Setting Default Values for Props quiz · easy · 7 min
6. Mark presentational-vs-container done Presentational vs container components quiz · easy · 5 min

   The oldest split in the vocabulary, still the most useful.

7. Mark ui/events done ui/events reading
8. Mark ui-events-basics done Handling DOM Events quiz · easy · 8 min
9. Mark loading-button-atom done Build a loading Button atom ui-coding · easy · 30 min

   Your first component from scratch, in two frameworks.

10. Mark ui/skeleton done ui/skeleton reading
11. Mark skeleton-list done Replace a spinner with a skeleton ui-coding · easy · 25 min

    The layout-shift bug every list has until someone fixes it.

12. Mark state/store done state/store reading
13. Mark state/actions done state/actions reading
14. Mark action-creators done Implement Redux-style action creators coding · easy · 15 min
15. Mark state/reducer done state/reducer reading
16. Mark counter-reducer done Implement a Redux-style reducer with immutability coding · medium · 20 min

    Immutability, with the tests that prove it.

17. Mark state/selectors done state/selectors reading
18. Mark selector-memoization done Selector Memoization Basics quiz · medium · 10 min
19. Mark memoized-selector done Memoize a derived selector coding · medium · 25 min

    Build the memoizer, then watch the recomputation count.

20. Mark server/ssr done server/ssr reading
21. Mark render-strategy-choice done Pick a rendering strategy quiz · medium · 10 min

    Four briefs, four rendering decisions.

22. Mark server/protocol done server/protocol reading
23. Mark cache-headers-basics done Design the caching layer for a static app system-design · easy · 20 min

    The design round in twenty minutes.

This plan assumes you already write JavaScript for a living and have shipped a component or two. What it adds is vocabulary and placement: where a value belongs, where a boundary goes, and which decision the other decisions hang on.

Seven sessions of roughly an hour. Read the concept page first, then do the question that follows it — the order is deliberate, because each question is only worth doing once you have the words for what it is asking.

The one thing not to skip is the workspace. Reading about memoisation and watching a recomputation counter go from six to one are different experiences, and only the second one survives an interview.