# Code Generation Plan — react-frontend-app

## Unit Context
- **Unit**: `react-frontend-app` (single unit, greenfield)
- **Workspace root**: `K:\Development\SlpSoftware\Projects\SlpSoftware` (from aidlc-state.md)
- **Project structure pattern**: Greenfield single unit → `src/`, `tests/`, config files at workspace root
- **Requirements source**: `aidlc-docs/features/react-frontend/inception/requirements/requirements.md`
- **Design sources**: Functional Design, NFR Requirements, NFR Design artifacts under `aidlc-docs/features/react-frontend/construction/react-frontend-app/`
- **Stories**: N/A (User Stories stage was skipped for this feature)
- **Dependencies**: None (first and only unit)

## Steps

### Project Structure Setup
- [x] Step 1: Scaffold Vite + React + TypeScript project files at workspace root (`package.json`, `vite.config.ts`, `tsconfig.json`, `tsconfig.node.json`, `index.html`, `.gitignore`)
- [x] Step 2: Configure Tailwind CSS with red/purple theme variants (`tailwind.config.ts`, `postcss.config.js`, `src/index.css`) per NFR Requirements/Design decisions
- [x] Step 3: Configure ESLint + Prettier (`.eslintrc.cjs` or `eslint.config.js`, `.prettierrc`)
- [x] Step 4: Configure Vitest + React Testing Library (`vitest.config.ts` or Vite test config, `src/test/setup.ts`)

### Domain Data & Theme Foundation
- [x] Step 5: Create typed content data module `src/data/content.ts` (NavLink, HeroContent, PackageCard, ProcessStep, AboutContent, ContactInfo) with the reference designs' Dutch copy ported 1-to-1 (FR-1, domain-entities.md)
- [x] Step 6: Create theme tokens module `src/theme/tokens.ts` (red default + purple alternate, per domain-entities.md `ThemeTokens`)
- [x] Step 7: Self-host fonts (Sora, Instrument Sans, JetBrains Mono) via `@fontsource` packages, imported in the app entry point (NFR Design font-loading decision)

### Application Shell (Router, Query, Theme, Error Handling)
- [x] Step 8: Create `ThemeProvider` (`src/theme/ThemeProvider.tsx`) implementing BR-1/BR-2/BR-3 (default red, persistence, fallback on invalid stored value)
- [x] Step 9: Create `ErrorBoundary` (`src/components/ErrorBoundary.tsx`) with on-brand fallback message (NFR Design resilience pattern)
- [x] Step 10: Set up TanStack Router with hash history (`src/router.tsx`, `src/routes/__root.tsx`, `src/routes/index.tsx`) composing ErrorBoundary → ThemeProvider → QueryClientProvider → RootLayout → routed content
- [x] Step 11: Set up TanStack Query (`src/queryClient.ts`) and the placeholder `usePackagesQuery` hook (`src/hooks/usePackagesQuery.ts`) with `staleTime: Infinity`
- [x] Step 12: Wire the application entry point (`src/main.tsx`) to mount the router

### Frontend Components Generation
- [x] Step 13: Create `RootLayout` (`src/components/RootLayout.tsx`)
- [x] Step 14: Create `Nav` + `ThemeToggle` (`src/components/Nav.tsx`, `src/components/ThemeToggle.tsx`) with Dutch `aria-label`/`aria-pressed`
- [x] Step 15: Create `Hero` (`src/components/Hero.tsx`) including the animated code line respecting `prefers-reduced-motion`
- [x] Step 16: Create `PackagesSection` + `PackageCard` (`src/components/PackagesSection.tsx`, `src/components/PackageCard.tsx`) consuming `usePackagesQuery`
- [x] Step 17: Create `ProcessSection` + `ProcessStep` (`src/components/ProcessSection.tsx`, `src/components/ProcessStep.tsx`)
- [x] Step 18: Create `AboutSection` (`src/components/AboutSection.tsx`)
- [x] Step 19: Create `ContactSection` (`src/components/ContactSection.tsx`)
- [x] Step 20: Create `Footer` (`src/components/Footer.tsx`)
- [x] Step 21: Assemble `src/routes/index.tsx` to render Hero, PackagesSection, ProcessSection, AboutSection, ContactSection in order

### Frontend Components Unit Testing
- [x] Step 22: Write unit tests for theme logic (`src/theme/__tests__/ThemeProvider.test.tsx`) covering BR-1, BR-2, BR-3
- [x] Step 23: Write component tests for `Nav`/`ThemeToggle` (`src/components/__tests__/Nav.test.tsx`)
- [x] Step 24: Write component tests for `PackagesSection`/`PackageCard` (`src/components/__tests__/PackagesSection.test.tsx`)

### Documentation Generation
- [x] Step 25: Create `README.md` at workspace root with setup/run/build/test instructions
- [x] Step 26: Create code summary documentation at `aidlc-docs/features/react-frontend/construction/react-frontend-app/code/code-summary.md`

### Deployment Artifacts
- [x] Step 27: Add `npm audit`-friendly `package-lock.json` (generated automatically on install) and confirm `.gitignore` excludes `node_modules`/`dist` — verified: `package-lock.json` present, `npm audit --omit=dev` reports 0 vulnerabilities
- [x] Step 28: Verify `vite.config.ts` base path is compatible with hash-based routing on a static/FTP host (no special `base` needed since hash routing carries the route state client-side) — confirmed via successful `npm run build`

## Story Traceability
No user stories exist for this feature (stage skipped). Traceability is instead to `requirements.md` (FR-1 through FR-5, NFR-1 through NFR-5) and to the approved Functional Design / NFR Requirements / NFR Design artifacts, referenced inline per step above.