SlpSoftware/aidlc-docs/features/react-frontend/construction/plans/react-frontend-app-code-generation-plan.md

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

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

Domain Data & Theme Foundation

• 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)
• Step 6: Create theme tokens module src/theme/tokens.ts (red default + purple alternate, per domain-entities.md ThemeTokens)
• 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)

• Step 8: Create ThemeProvider (src/theme/ThemeProvider.tsx) implementing BR-1/BR-2/BR-3 (default red, persistence, fallback on invalid stored value)
• Step 9: Create ErrorBoundary (src/components/ErrorBoundary.tsx) with on-brand fallback message (NFR Design resilience pattern)
• 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
• Step 11: Set up TanStack Query (src/queryClient.ts) and the placeholder usePackagesQuery hook (src/hooks/usePackagesQuery.ts) with staleTime: Infinity
• Step 12: Wire the application entry point (src/main.tsx) to mount the router

Frontend Components Generation

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

Frontend Components Unit Testing

• Step 22: Write unit tests for theme logic (src/theme/__tests__/ThemeProvider.test.tsx) covering BR-1, BR-2, BR-3
• Step 23: Write component tests for Nav/ThemeToggle (src/components/__tests__/Nav.test.tsx)
• Step 24: Write component tests for PackagesSection/PackageCard (src/components/__tests__/PackagesSection.test.tsx)

Documentation Generation

• Step 25: Create README.md at workspace root with setup/run/build/test instructions
• Step 26: Create code summary documentation at aidlc-docs/features/react-frontend/construction/react-frontend-app/code/code-summary.md

Deployment Artifacts

• 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
• 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.