docs: add phase 3 design polish planning, update progress

2026-02-26 23:53:22 +01:00
parent 30d79927ff
commit d98db37fff
12 changed files with 2695 additions and 22 deletions
@@ -0,0 +1,78 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Gravl is a fitness/workout tracking app (PPL - Push/Pull/Legs) with progression tracking. The UI is in Swedish. It uses a React frontend, Express backend, and PostgreSQL database, deployed via Docker with nginx and Traefik.
+
+## Commands
+
+### Frontend (`frontend/`)
+```bash
+npm run dev       # Vite dev server on port 5173
+npm run build     # Production build -> dist/
+npm run preview   # Preview production build
+```
+
+### Backend (`backend/`)
+```bash
+npm start         # node src/index.js
+npm run dev       # nodemon with auto-reload
+```
+
+### Docker
+```bash
+docker compose up -d --build   # Build and run all services
+```
+
+### Database
+```bash
+psql -h localhost -U postgres -d gravl -f db/init.sql   # Initialize schema + seed data
+```
+
+There are no test or lint configurations.
+
+## Architecture
+
+### Frontend (React 18 + Vite, no TypeScript)
+- **Entry:** `main.jsx` sets up React Router v6 with `AuthProvider` context
+- **Top-level routing** (`main.jsx`): `/login`, `/register`, `/onboarding` use route guards (`AuthRoute`, `ProtectedRoute`)
+- **In-app navigation** (`App.jsx`): Uses `useState` view switching (not URL routes) between `'dashboard'`, `'profile'`, `'progress'`, `'select-workout'`, `'workout'`
+- **State:** `AuthContext` is the only shared state (token in localStorage, user profile). No Redux or other state libraries. Component-level state via `useState`
+- **API calls:** Direct `fetch()` in components with `API_URL = '/api'` constant. No shared API service layer
+- **Styling:** Plain CSS with custom properties for theming. Two files: `index.css` (globals) and `App.css` (~1900 lines, organized by component sections). Dark theme with orange accent (`#ff6b35`). Mobile-first, max-width 600px
+- **Icons:** Custom SVG icon library in `components/Icons.jsx` (no emoji usage per design decision)
+- **Pages directory:** `src/pages/` holds full-page components (`Dashboard.jsx`, `WorkoutPage.jsx`, `LoginPage.jsx`, `RegisterPage.jsx`, `OnboardingWizard.jsx`, `ProfilePage.jsx`, `ProgressPage.jsx`, `WorkoutSelectPage.jsx`)
+- **Input components:** `components/StepperInput.jsx` (pure controlled — no internal useState), `WeightInput.jsx` (2.5kg steps, kg suffix), `RepsInput.jsx` (1-rep steps). Used in workout set rows.
+
+### Backend (Express, single-file)
+- **All routes in `src/index.js`** — no separation into route files or controllers
+- **Auth:** JWT with 30-day expiry, `bcryptjs` for passwords, `authMiddleware` for protected routes
+- **Database:** `pg` with parameterized queries (`$1, $2` placeholders)
+- **Currently hardcodes program ID=1** in many queries
+- **Env vars (all have defaults):** `JWT_SECRET`, `DB_HOST`, `DB_PORT`, `DB_USER`, `DB_PASSWORD`, `DB_NAME`
+
+### Database (PostgreSQL)
+- Schema in `db/init.sql`: `users`, `programs`, `program_days`, `exercises`, `program_exercises`, `workout_logs`
+- Seeded with one PPL program (Push A/B, Pull A/B, Legs A/B) and 18 exercises
+
+### Deployment
+- Frontend: multi-stage Docker build (node -> nginx), nginx proxies `/api` to `gravl-backend:3001`
+- Backend: node:20-alpine container on port 3001
+- External PostgreSQL on `homelab` Docker network
+- Traefik reverse proxy at `gravl.homelab.local`
+
+## Conventions
+
+- Swedish language for all UI text, some variable names and comments
+- Functional components only, hooks throughout
+- Workout-type CSS color variables: `--workout-push`, `--workout-pull`, `--workout-legs`
+- Progression logic: increase weight by 2.5kg when all sets hit max reps
+- StepperInput is a pure controlled component — no internal useState, all state in parent
+- 44px minimum touch targets on all interactive elements (stepper buttons, inputs)
+- Input font-size ≥ 16px everywhere (prevents iOS auto-zoom on focus)
+
+## agents/ Directory
+
+Contains AI agent persona definitions (SOUL.md files) for different roles (architect, backend-dev, frontend-dev, coach, nutritionist, reviewer). The `coach/` directory also has exercise data, program definitions (beginner/hypertrophy/strength), and foods data as JSON.