f5f25c4854
Phase 16: Frontend Scaffold - 5 plans in 3 waves - 4 parallel-capable, 1 sequential with checkpoint - Ready for execution
2.9 KiB
2.9 KiB
phase, plan, type, wave, depends_on, files_modified, autonomous
| phase | plan | type | wave | depends_on | files_modified | autonomous | ||
|---|---|---|---|---|---|---|---|---|
| 16-frontend-scaffold | 05 | execute | 3 |
|
|
false |
Purpose: Confirm that the Vite dev server, tRPC client, TanStack Router, Tailwind, and shadcn/ui all work together before proceeding to build actual UI screens. Output: Verified working scaffold ready for Phase 17 (Initiative Dashboard).
<execution_context>
@/.claude/get-shit-done/workflows/execute-plan.md
@/.claude/get-shit-done/templates/summary.md
@~/.claude/get-shit-done/references/checkpoints.md
</execution_context>
All scaffold pieces
@packages/web/src/main.tsx @packages/web/src/App.tsx @packages/web/src/router.tsx @packages/web/src/routes/__root.tsx @packages/web/src/layouts/AppLayout.tsx @packages/web/vite.config.ts
Task 1: Verify build and type-check packages/web/src/App.tsx 1. Run full build from root: `npm run build` (should build the backend). Then `cd packages/web && npx vite build` (should build frontend). 2. Run TypeScript type-check on shared package: `cd packages/shared && npx tsc --noEmit` 3. Verify no TypeScript errors across the entire project. 4. If any errors, fix them. All three commands succeed with zero errors. Full project builds cleanly. No type errors. Complete frontend scaffold with Vite + React + tRPC + Tailwind + shadcn/ui + TanStack Router 1. Start backend: `cw --server` (or however the server starts) 2. Start frontend: `npm run dev:web` 3. Visit: http://localhost:5173 (Vite default port) 4. Verify: Navigation header shows "Codewalk District" with nav tabs 5. Click "Initiatives" tab → should show dashboard stub 6. Click "Inbox" tab → should show inbox stub 7. Verify: Tailwind styling renders (text should be styled, not raw HTML) 8. Check browser console: No errors 9. If backend is running: DashboardPage should show "Server: ok" from tRPC health check Type "approved" or describe issues to fix Before declaring plan complete: - [ ] Full build succeeds (backend + frontend) - [ ] No TypeScript errors - [ ] Visual verification passed<success_criteria>
- Complete scaffold builds and runs
- tRPC connection works (health check shows server status)
- Navigation works between all routes
- Tailwind styling renders correctly
- Human verified visual correctness </success_criteria>