4
Module 4
Frontend
React, the patterns that trip every beginner, Next.js, forms with real validation and accessibility.
Module roadmap
4 chapters · 65 lessons
React fundamentals
Ch 1016 lessons
Components, props, state, re-renders, lists, forms, lifting state. The mental model first, the library second.
- 10.0Orientation
- 10.1Why React exists
- 10.2Setting up: Vite + React + TS
- 10.3Components as functions that return JSX
- 10.4JSX: it's just syntactic sugar
- 10.5Props: passing data down
- 10.6State and useState
- 10.7Re-renders: when and why
- 10.8Event handlers in React vs raw DOM
- 10.9Conditional rendering
- 10.10Lists and keys
- 10.11Forms in React: controlled vs uncontrolled
- 10.12Lifting state up
- 10.13Composition over inheritance
- 10.14Component file structure and naming
- 10.assignSix-component dashboard
React patterns and pitfalls
Ch 1116 lessons
useEffect traps, custom hooks, memoisation honestly, context, suspense. Server state vs client state, and why TanStack Query is the right answer for fetched data.
- 11.0Orientation: the chapter where React code stops looking right and starts being right
- 11.1useEffect: when you really need it (and when you don't)
- 11.2Effect dependencies and the lint rule that saves you
- 11.3Cleanup functions: the return that's not optional
- 11.4Custom hooks: extracting logic, not state
- 11.5useRef: when it's correct
- 11.6useMemo and useCallback: honestly
- 11.7useReducer: when state grows up
- 11.8Context and the prop-drilling trade-off
- 11.9Error boundaries: the one part of React that has to be a class
- 11.10Suspense, briefly
- 11.11Server state vs client state: the distinction that matters
- 11.12TanStack Query: the right answer for fetched data
- 11.13Form state libraries: when to reach for them
- 11.14Render-phase rules: purity and side effects
- 11.assignRefactor the broken dashboard and prove the perf in the profiler
Next.js
Ch 1217 lessons
App Router, server components, server actions, route handlers, deploying to Vercel. The frontend that ships to production.
- 12.0Orientation: what we are building
- 12.1Why Next.js (what React alone leaves you with)
- 12.2create-next-app and the project structure
- 12.3The App Router: file-system to URL mapping
- 12.4Server components vs client components — the seam
- 12.5'use client' and when to add it
- 12.6Layouts and nested layouts
- 12.7loading.tsx and error.tsx
- 12.8Dynamic routes and route groups
- 12.9Data fetching in server components
- 12.10Caching: the four caches and what they do
- 12.11Server actions
- 12.12Route handlers (route.ts)
- 12.13Streaming and Suspense at the page level
- 12.14Metadata and SEO
- 12.15Deploying to Vercel
- 12.assignAssignment: Ship a multi-page Next.js app at a public URL
Forms, validation, accessibility
Ch 1316 lessons
Where your app meets reality. React Hook Form, Zod, ARIA without cargo-cult, keyboard navigation, screen-reader testing.
- 13.0Orientation: one form, fifteen passes, three tests
- 13.1Why forms are where your app meets reality
- 13.2React Hook Form: the mental model and minimal setup
- 13.3Schema-first validation with Zod
- 13.4Wiring Zod to React Hook Form
- 13.5Client-side vs server-side validation (you always need both)
- 13.6Server-side validation with server actions and route handlers
- 13.7Error states, written for humans
- 13.8Loading states (and the optimistic UI)
- 13.9Empty states (the screen most teams forget)
- 13.10Form state machine: idle to submitting to error to success
- 13.11ARIA without cargo-cult: the five attributes you'll actually use
- 13.12Keyboard navigation: focus order, tab traps, skip links
- 13.13Screen-reader testing: NVDA on Windows, VoiceOver on macOS
- 13.14Multi-step forms (and their special hazards)
- 13.assignAssignment: Multi-step form passing axe, NVDA, and keyboard-only