Functional Design Plan — Unit 1: Project Scaffold & Infrastructure

Unit Context

Unit: Unit 1 — Project Scaffold & Infrastructure
Type: Frontend (Vite + React + TypeScript)
Depends on: Unit 0 (CORS + cookie-based auth ready)
Goals:
- Initialize frontend workspace with TanStack Router, shadcn/ui, Tailwind v4
- Set primary color to #ac0000
- Provide ApiClient and AuthContext foundations aligned with cookie-based auth (httpOnly refresh cookie, access token in memory)

Plan Checklist

Confirm scaffold strategy and tools via questions below
Generate folder structure (src/api, src/auth, src/components, src/routes)
Install and configure dependencies (TanStack Router, @tanstack/react-query, Tailwind v4, shadcn/ui)
Configure Tailwind theme with primary color #ac0000
Initialize TanStack Router with root route and placeholders
Create AuthContext (in-memory access token + user) and useAuth hook
Create ApiClient (fetch wrapper) with credentials: 'include' and 401 handling
Add .env.example with VITE_API_BASE_URL
README: local dev instructions

Please answer the following questions by filling in the letter after each [Answer]: tag.

Question 1: Package manager

A) pnpm (recommended) B) npm C) yarn X) Other (please describe after the Answer: tag below)

Question 2: Router choice

A) TanStack Router (required by NFR-01) B) React Router X) Other (please describe after the Answer: tag below)

Question 3: UI foundation

A) Tailwind v4 + shadcn/ui (recommended) B) Tailwind v4 only (no shadcn/ui) X) Other (please describe after the Answer: tag below)

Question 4: Primary color integration (`#ac0000`)

A) Tailwind theme config (extend colors + use via utility classes) B) CSS variables (root-level var, consumed by components) X) Other (please describe after the Answer: tag below)

Question 5: HTTP client layer

A) Fetch wrapper (ApiClient) with credentials: 'include' + JSON helpers (recommended) B) Axios instance with withCredentials: true X) Other (please describe after the Answer: tag below)

Question 6: API base URL source

A) import.meta.env.VITE_API_BASE_URL (from .env) B) Derive from window.location.origin + /api X) Other (please describe after the Answer: tag below)

Question 7: Session bootstrap behavior

A) On app mount, attempt silent refresh (uses httpOnly cookie) to hydrate AuthContext (recommended) B) Do not auto-refresh on mount; rely on login flow and 401 handling X) Other (please describe after the Answer: tag below)

Question 8: Linting/formatting baseline

A) ESLint (recommended) + Prettier with sensible defaults B) ESLint only C) None for now X) Other (please describe after the Answer: tag below)

Answer: A, but indentation with 4 spaces

2.9 KiB Raw Blame History