# Code Summary — react-frontend-app ## Application Code (Workspace Root) ### Project Configuration - `package.json`, `vite.config.ts`, `tsconfig.json`, `tsconfig.node.json`, `index.html`, `.gitignore` - `tailwind.config.ts`, `postcss.config.js` — Tailwind theme mapped to CSS custom properties - `eslint.config.js` (ESLint 9 flat config), `.prettierrc` - `README.md` — setup/run/build/test instructions ### Domain Data & Theme - `src/data/content.ts` — typed static content (NavLink, HeroContent, PackageCardData, ProcessStepData, AboutContent, ContactInfo), copied 1-to-1 from the reference designs - `src/theme/tokens.ts` — theme value model (`red`/`purple`), storage key, validation/fallback (BR-1/BR-3) - `src/theme/ThemeProvider.tsx` — theme context, localStorage persistence (BR-2), applies `theme-red`/`theme-purple` class to `` - `src/index.css` — theme token CSS variables (`.theme-red`, `.theme-purple`), global styles, caret animation, reduced-motion handling - `src/fonts.ts` — self-hosted font imports (`@fontsource/sora`, `@fontsource/instrument-sans`, `@fontsource/jetbrains-mono`) ### Application Shell - `src/queryClient.ts` — shared `QueryClient` (`staleTime: Infinity`) - `src/hooks/usePackagesQuery.ts` — placeholder query hook wrapping static package data - `src/components/ErrorBoundary.tsx` — top-level on-brand error boundary - `src/routes/__root.tsx` — root route composing ErrorBoundary → ThemeProvider → QueryClientProvider → RootLayout - `src/routes/index.tsx` — index route assembling the page sections - `src/router.tsx` — router instance with hash-based history - `src/main.tsx` — application entry point ### Components - `src/components/RootLayout.tsx`, `Nav.tsx`, `ThemeToggle.tsx`, `Hero.tsx`, `PackagesSection.tsx`, `PackageCard.tsx`, `ProcessSection.tsx`, `ProcessStep.tsx`, `AboutSection.tsx`, `ContactSection.tsx`, `Footer.tsx` ### Tests - `src/theme/__tests__/ThemeProvider.test.tsx` — 4 tests covering BR-1, BR-2, BR-3 - `src/components/__tests__/Nav.test.tsx` — 3 tests (nav links, accessible toggle label, toggle interaction) - `src/components/__tests__/PackagesSection.test.tsx` — 2 tests (package rendering, featured badge) - `src/test/setup.ts` — Testing Library / jest-dom setup for Vitest ## Verification (Step 13.5) - **Build**: ✅ Success (`npm run build` — `tsc -b && vite build`) - **Unit Tests**: ✅ 9 passed, 0 failed (`npm run test` — Vitest) - **Lint**: ✅ 0 errors (2 non-blocking `react-refresh/only-export-components` warnings on files that intentionally export a hook alongside a component) ### Post-Review Fix: Deprecated Package Warnings After initial review, the user requested that the `npm install` deprecation warnings (`eslint@8.57.1`, `@humanwhocodes/config-array`, `@humanwhocodes/object-schema`, and related transitive packages) be resolved. Resolved by migrating from ESLint 8 (`.eslintrc.cjs`) to **ESLint 9 flat config** (`eslint.config.js`), using `typescript-eslint`, `@eslint/js`, `globals`, and `eslint-plugin-react-hooks` v5. Re-verified: build, tests (9/9), and lint (0 errors) all still pass after the migration, and `npm install` no longer reports deprecation warnings for these packages. ## Traceability - Requirements: FR-1 (content parity), FR-2 (componentization), FR-3 (theme switching), FR-4 (preserved micro-interactions), FR-5 (TanStack Router/Query scaffolding), NFR-1 through NFR-5 - Functional Design business rules BR-1 through BR-6 implemented as described above - NFR Design patterns (error boundary, query caching, self-hosted fonts, hash routing) implemented as described above