1de3e08b8d886d584f7d2c0e241de57366107d21
Comprehensive research on implementing Phase 1: Input UX for fitness app. Documents standard stack (React 18 + CSS custom properties), architecture patterns (stepper components with 44px touch targets, validation), common pitfalls (iOS auto-zoom, negative values), and verified code examples. Key findings: - Mobile touch target minimum 44px (iOS HIG, Material Design, WCAG 2.1) - iOS auto-zoom prevented with font-size >= 16px on inputs - Negative value validation in onChange handlers (not just HTML min attr) - Custom stepper buttons recommended over native browser spinners - Plain React state sufficient for Phase 1 (no form libraries needed) - Weight input: 2.5kg steps; Reps input: 1 rep steps - Includes reusable StepperInput component, WeightInput, RepsInput All patterns verified against official docs (MDN, Apple HIG, Material Design, WCAG 2.1) and industry best practices (NN/G, Chakra UI, Material Design). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Gravl - Träningsapp
En enkel träningsapp för att följa PPL-program (Push/Pull/Legs) med progressionsspårning.
Features
- 📋 PPL Program - 6-dagars Push/Pull/Legs split
- 📊 Träningslogg - Logga vikt/reps för varje set
- 📈 Progression - Automatiska viktrekommendationer
- 📱 Mobilanpassad - Fungerar perfekt på telefon
- 🌙 Mörkt tema - Bekvämt för gymmet
Tech Stack
- Frontend: React (Vite) + CSS
- Backend: Node.js/Express
- Database: PostgreSQL
- Container: Docker med nginx
Quick Start
# Initiera databasen
psql -h localhost -U postgres -d gravl -f db/init.sql
# Starta med Docker Compose
cd /workspace/gravl
docker compose up -d --build
Åtkomst
API Endpoints
| Endpoint | Method | Beskrivning |
|---|---|---|
/api/health |
GET | Hälsokontroll |
/api/programs |
GET | Lista alla program |
/api/programs/:id |
GET | Hämta program med dagar |
/api/days/:id/exercises |
GET | Hämta övningar för en dag |
/api/logs |
GET | Hämta träningsloggar |
/api/logs |
POST | Logga ett set |
/api/progression/:id |
GET | Få viktrekommendation |
Databasschema
programs- Träningsprogramprogram_days- Dagar i programmet (Push A, Pull A, etc.)exercises- Övningar (Bench Press, Squat, etc.)program_exercises- Kopplar övningar till dagar med sets/repsworkout_logs- Loggade träningsset
Progression
Appen rekommenderar att öka vikten med 2.5kg när du når max reps på alla sets.
Description
Languages
JavaScript
62%
CSS
28.7%
Shell
8.8%
TypeScript
0.2%
HTML
0.2%
Other
0.1%