The harness
One architecture, six boilerplates
Every template npx elegant copies is the same three-layer shell — UI, server, state —
over a different framework and store. Swap React for Angular, or Redux for Pinia, and the folder
layout, the naming and the tests stay the same. That is the point: the architecture is the thing you learn, not the framework.
UI
Atoms, molecules, organisms, skeletons and templates, each with a story, a style, a type and a test. Theming and responsive layout live here.
UI terminology →Server
Pages, containers and the app shell: routing, SSR and SSG, proxies and headers — everything between the browser and the UI.
Server terminology →State
Actions, reducers, selectors and operations in one folder per feature — Redux, Redux Toolkit, Saga, NgRx or Pinia behind the same shape.
State terminology →Why UI, server and state
UI and UX mean different things to a designer, a developer and an enterprise. The harness splits the code the way all three already think about it.
Designer's perspective
UX handles analytical functions like research and wireframes, while UI focuses on visual design and aesthetics.
Developer's perspective
UX uses HTML and JavaScript for functionality, while UI relies on CSS for visual presentation.
Enterprise perspective
Frontend architecture combines the UI layer, web server operations and state management into one application.
From prompt to reviewed code
The harness is built for an AI-assisted lifecycle: describe the component, generate it into the atomic layer it belongs to, run the tests and Storybook that came with it, then review. The CLI reference lists every generator.
The practice
Now practise the terminology
Every term the harness is built from — atom, container, selector, hydration, skeleton — is a page in the docs and a question in the bank. Read the term, then answer for it: quizzes, coding challenges graded in the browser, UI coding, system design and agent-harness exercises.
47 questions to practise on
- 13 coding
- 12 quiz
- 10 UI coding
- 6 system design
- 6 harness
Try a question right now
No account, no setup. Edit the starter and press Run — the same tests grade you here and in every question.
Workspace
Edit the module below and run the question's tests. Press Ctrl+Enter (or Cmd+Enter on a Mac) to run from the editor. Your draft is kept in this browser.
Where to go from here
Start with the terms, then pick the surface that matches how you like to study.
Question bank
Filter by format, layer and topic, and track what you have finished.
Study plans
Time-boxed schedules — one week, one month, three months — built from the bank.
Curated lists
Ordered "do these first" sets — no schedule, just the order worth doing them in.
Playbooks
Long reads on how to approach each kind of interview round.
Company guides
The loop each company runs, and the questions that map to each round.
Your account
Keep progress on this device, or sign in to carry it to another browser.