SWEXP Module 05 — Frontend Engineering with React & Next.js

Theme: Modernize Project Forge into a production frontend platform.

You are a Frontend Engineer on the Product Team. Project Forge has been diagnosed (Module 03) and made type-safe (Module 04); now you rebuild it as a production React/Next.js application a team can ship and operate. Across 14 ticket-driven lessons you componentize a legacy UI, make it interactive with sound state architecture, stand up the Next.js App Router with the right server/client boundary, connect validated data, build a design system and production forms, and make the product responsive, accessible, and fast — culminating in shipping the whole frontend.

The ethos, in every lesson: UI = f(state); the compiler is a test harness (components type-checked against real React types, pure logic Node-tested); make illegal states unrepresentable; semantic HTML first, ARIA to fill gaps; and measure first, optimize second.

How You Work Here

Step	What it means
Pick up a ticket	Each lesson is an engineering ticket (STATE-2010, NEXT-3010, …) with acceptance criteria
Build declaratively	Describe UI as a function of state; update state, never the DOM
Type-check	tsc --noEmit against real React types — wrong props, illegal variants, bad params are compile errors
Test the logic	Reducers, validators, hooks' helpers, focus-trap math, selectors run in Node
Measure the UX	Accessibility audits and performance numbers, before/after
Verify AI	Draft → verify (type-check + test + measure) → log

Learning Outcomes

By the end you will be able to:

• Decompose a UI into typed, single-responsibility React components.
• Manage state correctly with useState/useReducer, immutably and derived.
• Use effects with proper dependencies and cleanup; extract custom hooks.
• Share global state with typed Context without over-globalizing.
• Build a Next.js App Router shell with layouts and dynamic routes.
• Draw the server/client rendering boundary deliberately.
• Architect a typed data layer that validates responses at the boundary.
• Build a design system of typed primitives, and production forms with modeled states.
• Make a product responsive, accessible (keyboard + screen reader), and performance-measured.
• Ship a coherent, strict-typed frontend with evidence for each quality bar.

Lesson Index

#	Lesson	Competency	Ticket
0	Welcome to the Frontend Product Team	Frontend Orientation	FE-1000
1	Componentize the Legacy UI	React Components	UI-1010
2	Make the Interface Interactive	State Management	STATE-2001
3	Coordinate Browser Behavior	Hooks & Effects	STATE-2010
4	Stop Prop Drilling	Global State	STATE-2020
5	Build the Application Shell	App Router	NEXT-3001
6	Choose the Rendering Boundary	Server vs Client Components	NEXT-3010
7	Connect to Real Data	Data Architecture	NEXT-3020
8	Build the Design System	Design System	DS-4001
9	Build Production Forms	Forms	FORM-4010
10	Support Every User Context	Responsive Engineering	A11Y-5001
11	Build an Accessible Product	Accessibility	A11Y-5010
12	Prepare for Production	Performance	PERF-6001
13	Ship the Project Forge Frontend	Frontend Release	FORGE-9300

Phases: Foundations (0) → Components & State (1–4) → Next.js Architecture (5–7) → Product Surface (8–9) → Quality & Production (10–12) → Capstone (13).

Repository Layout

.
├── README.md                      # this file
├── MODULE_SYLLABUS.md             # pacing, structure, deliverables
├── LEARNER_GUIDE.md               # how to operate as a frontend engineer here
├── INSTRUCTOR_GUIDE.md            # facilitation and assessment
├── COMPETENCY_MATRIX.md           # lesson → competency → skills
├── ASSESSMENT_RUBRIC.md           # grading weights and performance levels
├── dashboard.html                 # interactive progress dashboard (open in a browser)
├── Lesson_00.md … Lesson_13.md    # the 14 lessons
├── labs/                          # hands-on labs (real .tsx type-checked; logic Node-tested)
├── solutions/                     # worked solutions / answer keys
├── resources/                     # setup, components, state, hooks, App Router, data, design system, forms, responsive, a11y, performance + more
├── assignments/                   # submission templates + capstone brief
└── instructor-notes/              # per-lesson facilitation notes

Getting Started

1. Read resources/react-setup-guide.md; scaffold the Next.js + TypeScript app and set up the React-types sandbox (Lesson 0 / labs/lab-00-setup.md).
2. Start your engineering notebook from resources/engineering-notebook-template.md.
3. Open dashboard.html in your browser to track progress through the lessons and phases.
4. Open Lesson_00.md and pick up your first ticket. Keep the relevant resources/ references open as you build.

Verification. Type-check components with tsc --noEmit against real React types; run extracted pure logic with node file.mjs; measure UX with accessibility audits and performance numbers. Note tsc file.ts ignores tsconfig.json — use --noEmit or -p.