Frontend

Why it matters for UCP. Frontend is the second specialization of the product engineer: for one person to get a product all the way to the user, they also need the part the user sees. The stack is React + TypeScript. Backend patterns (UseCase, aggregates, CQRS) don't stretch onto it — frontend has concerns of its own.

The section is split into 20 articles. You can read them in order (platform → foundation → data and state → navigation and view → quality) or pick topics as needed.

JavaScript and the browser

1. this: the call context — the four rules, arrow functions, losing this in callbacks.
2. The event loop: how it works and where it bites — macro- and microtasks, execution order, long tasks.
3. DOM events — bubbling and capturing, delegation, passive listeners.
4. The critical rendering path — from HTML bytes to pixels: what blocks and what's expensive.
5. Error handling in JS and the browser — try/catch, unhandledrejection, global handlers, monitoring.
6. Animations: CSS and optimizations — transform/opacity, will-change, 60fps.
7. Frontend bundling — Vite and webpack, code splitting, tree shaking.

Foundation

8. Project structure and the component model — layout, the component as a unit, typing.
9. Components: structure and composition — boundaries, composition, props vs state.
10. TypeScript in React — typing props, generics, discriminated unions, events and refs.
11. Hooks: custom hooks and useEffect traps — extracting logic, the rules of hooks, when useEffect isn't needed.

Data and state

12. State: local and server — useState/useReducer/context, when you need a store.
13. Data fetching: TanStack Query — cache, invalidation, mutations.
14. Error handling and Suspense — error boundaries, error states, graceful degradation.
15. Forms: react-hook-form and zod — validation, consistency with the backend contract.

Navigation and view

16. Routing: React Router — routes, nesting, protected routes.
17. Styling and design tokens — the approaches and their cost, tokens.

Quality and performance

18. Accessibility (a11y) — semantics, keyboard, ARIA.
19. Rendering performance — memoization where it counts, code-splitting, bundle size.
20. Testing: Vitest and Testing Library — behavior, not implementation.

Next: mobile development for the product engineer — the /mobile/ section: the same React + TypeScript packaged into native shells (web-first).

Related

• Mobile development — the same stack in native shells: PWA, Capacitor, iOS/Android.
• Product engineer — the specialization map and the path.
• Use Case Pattern (overview) — the methodology under the hood; an optional deep-dive for those who want the method.