Code Generation Summary — Unit 1: Project Scaffold & Infrastructure

Generated: 2026-06-20 Application code location: frontend/ (workspace root) Type: Greenfield (Vite + React 19 + TypeScript)

Overview

This unit delivers the frontend scaffold and shared infrastructure for the CMS admin UI: build tooling, theme, the authentication session model (silent refresh + 401 retry), routing with guards, i18n, mocking, and an example login → dashboard flow with tests.

Tech Stack (as built)

Concern	Choice
Build / dev	Vite 8
UI	React 19 + TypeScript (strict)
Routing	TanStack Router (code-based) with `_authenticated` guard layer
Styling	Tailwind v4 (`@tailwindcss/vite`), primary `#ac0000`, shadcn/ui-style primitives
i18n	react-i18next + browser language detector, lazy locale chunks (NL/EN)
Forms/validation	react-hook-form + zod
Toasts	sonner
Mocking	MSW (browser + node)
Testing	Vitest + Testing Library + MSW (jsdom)

Created Files (application code under `frontend/`)

Config & tooling

vite.config.ts — React + Tailwind plugins, @ alias, Vitest config (jsdom, coverage)
tsconfig.app.json — strict, @/* paths, test/jest-dom types
package.json — scripts: dev/build/preview/test/test:watch/test:coverage/lint/format
.prettierrc — 4-space indentation (BR-U1-12)
eslint.config.js — flat config + unused-vars ^_ + targeted react-refresh overrides
pnpm-workspace.yaml — allowBuilds for msw/esbuild/oxide
.env.example, .env.local — VITE_API_BASE_URL (BR-U1-09)
index.html, src/index.css — title + Tailwind theme tokens (light/dark, #ac0000)
src/vite-env.d.ts — typed ImportMetaEnv (Q6-A)

Core libraries

src/api/types.ts — User, AuthResponse, ProblemDetails, SetupStatus, etc. (name, not naam; BR-U1-10)
src/lib/utils.ts — cn()
src/lib/config.ts — getAppConfig() with dev-only Zod validation (Q6-A)
src/lib/api-client.ts — ApiClient, ProblemDetailsError, NetworkError; credentials, 401 refresh+retry (BR-U1-03/04/08)
src/contexts/auth-context.ts — context + useAuth()
src/contexts/AuthProvider.tsx — in-memory session, silent refresh on mount (BR-U1-01/02/14)

i18n

src/i18n/config.ts — init + lazy changeLanguage (Q4-B)
src/i18n/LanguageSwitcher.tsx
src/i18n/locales/en/translation.json, src/i18n/locales/nl/translation.json

Routing & layout

src/router.tsx — route tree, guards (BR-U1-05/06), lazy feature routes (Q1-A)
src/main.tsx — providers + bootstrap splash + optional MSW
src/components/layout/{AppLayout,Sidebar,Topbar,UserMenu}.tsx

UI primitives

src/components/ui/{button,input,label,card,dropdown-menu,sonner}.tsx

Mocks (Q3-B)

src/mocks/auth/{handlers,fixtures}.ts, src/mocks/users/handlers.ts, src/mocks/setup/handlers.ts
src/mocks/{index,browser,server}.ts, public/mockServiceWorker.js

Tests

src/test/setup.ts, src/test/utils.tsx
src/contexts/AuthContext.test.tsx, src/pages/LoginPage.test.tsx, src/test/RouteGuard.test.tsx

Documentation

Root README.md — "Frontend Development (CMS Admin UI)" section + project-structure note

Verification Results

Build (pnpm build): ✅ tsc + vite succeed (non-fatal vendor chunk-size warning + cosmetic en-glob warning)
Tests (pnpm test): ✅ 3 files, 10/10 passing
Coverage (auth-related, NFR-U1-04 >70%): AuthProvider 92.7%, api-client 84.8%, auth-context 80%, LoginPage 84.2%
Lint (pnpm lint): ✅ clean
Format (pnpm format:check): ✅ clean
Dev smoke: ✅ boots ~267ms, HTTP 200, title SlpModularCms

Story Coverage

Story	Status in Unit 1
US-01 Login	✅ Login page + auth flow
US-02 Silent Refresh	✅ AuthProvider on-mount refresh
US-03 Protected Routes	✅ `_authenticated` guard
US-04 Dashboard Shell	✅ Layout + dashboard placeholder
US-05 User Menu + Language Switcher	✅ Topbar UserMenu + LanguageSwitcher
US-06 401 Intercept	✅ ApiClient refresh+retry
US-07 Error Handling	✅ ProblemDetailsError + inline/toast surfaces
US-18/US-20 CMS Mgmt	⏭️ Out of scope for Unit 1 (placeholder page only)

See ../../plans/unit-1-code-generation-plan.md for full step checklist and deviations.

4.4 KiB Raw Blame History