clawd 23cc848f28 docs(01-input-ux): research mobile input UX patterns
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>
2026-02-16 06:34:21 +01:00
2026-02-01 00:23:49 +01:00

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äningsprogram
  • program_days - Dagar i programmet (Push A, Pull A, etc.)
  • exercises - Övningar (Bench Press, Squat, etc.)
  • program_exercises - Kopplar övningar till dagar med sets/reps
  • workout_logs - Loggade träningsset

Progression

Appen rekommenderar att öka vikten med 2.5kg när du når max reps på alla sets.

S
Description
Träningsapp - Gravl klon
Readme 19 MiB
Languages
JavaScript 62%
CSS 28.7%
Shell 8.8%
TypeScript 0.2%
HTML 0.2%
Other 0.1%