Gravl — Workout UX Improvements

What This Is

En träningsapp (PPL-baserad) som behöver förbättrat workout-flöde. Appen finns redan med grundläggande funktionalitet — inloggning, onboarding, passloggning och progressionsförslag. Fokus nu är att göra workout-upplevelsen smidigare och mer flexibel.

Core Value

Att logga ett träningspass ska vara snabbt, tydligt och flexibelt — användaren ska aldrig behöva kämpa mot appen under ett pass.

Requirements

Validated

✓ Användare kan registrera konto och logga in — existing
✓ Onboarding-wizard samlar in grunddata — existing
✓ Dashboard visar veckokalender och dagens pass — existing
✓ Användare kan välja programpass och logga set — existing
✓ Progressionsförslag baserat på tidigare pass — existing
✓ Profilsida med mått och styrka — existing
✓ Framstegssida med grafer — existing
✓ Uppvärmningssektion i workout — existing

Active

Viktfält visar enhet (kg) tydligt
Reps-input förhindrar negativa värden
Inputfält för vikt/reps får mer utrymme och bättre layout
Användare kan lägga till extra set på alla övningar
Användare kan ta bort set på alla övningar
Användare kan bygga ett eget pass genom att välja övningar fritt
Användare kan modifiera ett programpass (byta ut/lägga till övningar)

Out of Scope

Byta ut hela programstrukturen (PPL) — behåller befintlig programmodell
Backend-refaktorering (enfilsarkitekturen) — fokus är frontend-UX
Nya övningsbibliotek eller träningsprogram — använder befintliga övningar i databasen
Sociala funktioner eller delning — inte relevant för detta milestone

Context

Brownfield: Appen är redan byggd med React 18 + Vite (frontend) och Express + PostgreSQL (backend)
All frontend-kod är JSX utan TypeScript, ren CSS med custom properties
Backend är en enda fil (backend/src/index.js) — alla routes inline
Navigation i appen sker via useState i App.jsx, inte URL-routes
Workout-loggning gör upsert (update if exists, insert if new) per set
Nuvarande set-antal är hårdkodat per övning i databasen (program_exercises.sets)
Det finns 18 övningar i databasen fördelade på 6 passdagar

Constraints

Tech stack: React + Vite frontend, Express + PostgreSQL backend — behåll befintlig stack
Språk: Svenskt UI genomgående
Styling: Ren CSS med CSS custom properties, mörkt tema med orange accent (#ff6b35)
Mobil-först: Max-width 600px, designat för telefonanvändning under pass

Key Decisions

Decision	Rationale	Outcome
Behåll befintlig programmodell	Egna pass byggs ovanpå, inte som ersättning	— Pending
Frontend-fokus detta milestone	Backend-ändringar minimeras till vad som krävs för nya features	— Pending

Last updated: 2026-02-15 after initialization

2.9 KiB Raw Blame History