commits tags

Träningsapp — Planeringsspecifikation

Version: 1.2
Status: Fas 1–5 klara — React Native-appen är live
Målplattform: React Native + Expo SDK 54 (migration genomförd)

1. Appöversikt

En fullständig personlig tränings- och hälsoapp med fokus på progressionsspårning, kostlogg och schemaläggning. Designad med en exporterbar datamodell för smidig migrering till React Native.

2. Navigationstruktur

Bottom navigation — 5 flikar:

[ 🏠 Hem ]  [ 📅 Schema ]  [ 📚 Bibliotek ]  [ 🍎 Kost ]  [ 👤 Profil ]

Övningsloggen nås via hemvyn och schemat (inte en egen flik).

3. Skärmar och funktioner

3.1 Startskärm / Splash

Animerad välkomstbild (logo + rörlig bakgrund, t.ex. pulsande ring eller partikeleffekt)
Varaktighet: 3 sekunder, sedan automatisk redirect
Om ny användare → Onboarding-flöde
Om återvändande användare → Dashboard

3.2 Onboarding-flöde

Triggas automatiskt efter splash om ingen profil finns. 5 steg, kan hoppas över (fas 2-data fylls i senare).

Steg 1 — Välkommen

Appens namn + kort tagline
"Kom igång"-knapp

Steg 2 — Profil

Namn
Kön (påverkar kaloriformel)
Ålder
Längd (cm)
Vikt (kg)

Steg 3 — Mål

Målvikt (kg)
Mål: Gå ner / Hålla vikt / Bygga muskler
Aktivitetsnivå: Stillasittande / Lätt aktiv / Måttligt aktiv / Mycket aktiv

Steg 4 — Kalori- och makromål

Auto-beräknat via Harris-Benedict / Mifflin-St Jeor
Visar: Kalorier / Protein / Kolhydrater / Fett
Kan justeras manuellt

Steg 5 — Klart

Sammanfattningskort
"Starta appen"-knapp → Dashboard

3.3 Dashboard (Hemvy)

Daglig översikt på ett ögonkast.

Hälsningsfras med namn och datum
Dagens ringindikator: Kalorier in / Kalorier ut (cirkulär progress)
Dagens pass: Nästa schemalagda pass med snabbstartknapp
Makrospårning: Protein / Kolhydrater / Fett (mini progress-bars)
Vattenintag: Snabblogg med + / - knappar (mål: 2–3 l)
Streak-banner: Antal dagar i rad, veckomål uppnått
Senaste mätning: Vikt + midjemått (om aktiverat)
Snabblänkar: Logga mat / Logga pass / Se progress

3.4 Övningsbibliotek

Sökning:

Fritextsökning på övningsnamn
Sortering: A–Ö / Popularitet / Muskelgrupp

Filter-UX — hybridmodell (best practice):

Nivå 1 — Horisontellt scrollbara utrustnings-chips (alltid synliga): Kroppsvikt / Hantel / Kettlebell / Skivstång / Kabelmaskin / Maskin / Motståndsband / TRX / Löpband / Medicinboll

Aktiv chip = fylld bakgrund. Direkt synliga eftersom utrustning är det vanligaste filtreringsbehovet — folk vet vad de har hemma och ska inte behöva öppna ett modal för det.

Nivå 2 — Filtermodal via ikon uppe till höger (⊞ eller sliders-ikon):

Muskelgrupp: Bröst / Rygg / Axlar / Armar / Ben / Core / Kondition / Helkropp / Stretching
Svårighet: Nybörjare / Medel / Avancerad
Övningstyp: Styrka / Kondition / Stretching / Rörlighet

Badge på filterikonen visar antal aktiva filter ("2") så man alltid ser om något är filtrerat.

Filter från båda nivåerna kombineras — t.ex. "Ben" + "Kettlebell" ger övningar som uppfyller båda.

Övningskort visar:

Namn
Primär muskelgrupp (badge)
Sekundära muskelgrupper
Utrustning som krävs
GIF / animationsbild (placeholder i JSX-version, riktig media i React Native)
Kort beskrivning av utförande
Instruktioner steg för steg
Knapp: "Lägg till i schema" / "Logga nu"

3.5 Träningsschema

Översiktsvy:

Veckovyn som standard (mån–sön) med swipe till nästa vecka
Varje dag visar: passets namn, antal övningar, uppskattad tid
Muskelgruppsindikator per dag (färgkodade badges: t.ex. ben = grön, överkropp = blå)
Vilodagar markeras automatiskt baserat på föregående dags träning

Schemalägga ett pass:

Välj dag(ar)
Lägg till övningar från biblioteket eller skapa fritt
Alternativ: Återkommande (varje måndag / var 3:e dag / etc.)
Passet får ett namn och uppskattad tid

Föreslagna pass:

Baserat på profil och mål genereras 3–5 startmallar
t.ex. "Helkropp 3×/vecka", "Push/Pull/Ben-split", "Konditionspass"

Starta ett pass (aktiv träningsvy):

Övningslista med set / reps / vikt per set
Inbyggd timer för tidsbaserade övningar (plank, löpband etc.)
Vilotimer mellan set (kan ställas in per övning)
Möjlighet att justera vikt/reps live under passet
"Nästa set" / "Hoppa över" / "Avsluta pass"
Sammanfattning vid avslutat pass

3.6 Kost- och kalorilogg

Daglig logg:

Indelad per måltid: Frukost / Lunch / Middag / Mellanmål
Kalorier + makros per måltid och totalt
Visuell dagstracker: Kalorier kvar av mål (cirkel + siffra)
Makrofördelning: Stapel- eller pajdiagram (Protein / Kolhydrater / Fett)

Lägga till mat:

Sök i databas (Open Food Facts API eller liknande)
Skanna streckkod / QR-kod på förpackning (kamerafunktion i React Native, simulerad i JSX)
Egna livsmedel kan sparas
Favoriter / senast använda snabbval

Mål och beräkning:

Automatberäkning vid onboarding (Harris-Benedict)
Kan justeras manuellt när som helst
TDEE-kalkylator med aktivitetsmultiplikator
Underskott/överskott visas tydligt

Makromål:

Gram och procent av totalt kaloriintag
Standard: 30% protein / 40% kolhydrater / 30% fett (justerbart)

Vattenintag:

Dagmål (standard 2,5 l)
Snabbknappar: +2,5 dl / +5 dl / +1 l
Visuell progress-bar

Invägning och mätningar (kan avaktiveras):

Vikt (kg) — valfri frekvens
Midjemått (cm)
Kan läggas till: BMI, fettprocent (manuell inmatning)
Påminnelse om invägningsdag (t.ex. varje måndag morgon)

Veckospårning:

Stapeldiagram: Kalorier per dag senaste 7 dagar
Genomsnitt vs mål
Makrofördelning per vecka

3.7 Övningslogg och Progression

Logg:

Alla genomförda pass med datum, tid, varaktighet
Klarmarkering i efterhand möjlig
Redigera loggat pass (justera reps/vikt)

Per övning — progressionsgraf:

Linjediagram: Max vikt över tid
Total volym (sets × reps × vikt) per session
Bästa insats (PR) markeras tydligt
Jämförelse: Denna vecka vs förra vecka

Statistik:

Totalt antal pass
Totalt antal träningstimmar
Streak (nuvarande och bästa)
Mest tränade muskelgrupp
Veckofördelning (vilket säsongsvis mönster)

3.8 Profil och inställningar

Profil:

Bild, namn, mål
Aktuell vikt + målvikt
Progressionskurva vikt över tid

Inställningar:

Enheter: kg/cm vs lbs/inch
Notifikationer: Påminnelser för pass, invägning, vattenintag
Invägning: Aktivera/avaktivera + frekvens
Tema: Ljust / Mörkt / System
Exportera data (JSON)
Rensa data

Streaks och achievements:

Nuvarande streak (dagar i rad med loggat pass)
Achievements: "Första passet", "7-dagarsstreak", "100 pass", "PR på bänkpress" etc.
Veckomål: x pass per vecka, inställningsbart

4. Onboarding-flöde (detaljerat)

App startar
    │
    ▼ (efter 3 sek splash)
    │
    ├── Finns profil? ──── JA ──► Dashboard
    │
    └── NEJ
         │
         ▼
    [Steg 1: Välkommen]
         │
         ▼
    [Steg 2: Profil — namn, kön, ålder, längd, vikt]
         │
         ▼
    [Steg 3: Mål — målvikt, syfte, aktivitetsnivå]
         │
         ▼
    [Steg 4: Kalori- och makromål — auto + manuell justering]
         │
         ▼
    [Steg 5: Klart — sammanfattning]
         │
         ▼
    Dashboard

5. Data-persistensmodell (export-redo)

Designad för att direkt kunna mappas mot AsyncStorage (React Native) eller SQLite (Expo SQLite).

5.1 Lagringsnycklar (flat JSON / key-value)

profile                  → ProfileObject
settings                 → SettingsObject
exercises_library        → ExerciseObject[]
workout_schedules        → ScheduleObject[]
workout_log              → WorkoutLogEntry[]
food_log                 → FoodLogEntry[]
measurements             → MeasurementEntry[]
water_log                → WaterLogEntry[]
custom_foods             → FoodItem[]
achievements             → AchievementObject[]

5.2 Datamodeller

// Profil
interface Profile {
  id: string
  name: string
  gender: 'male' | 'female' | 'other'
  age: number
  heightCm: number
  weightKg: number
  goalWeightKg: number
  goal: 'lose' | 'maintain' | 'gain'
  activityLevel: 'sedentary' | 'light' | 'moderate' | 'very_active'
  calorieMacroGoals: MacroGoals
  createdAt: string
  updatedAt: string
}

// Makromål
interface MacroGoals {
  calories: number
  proteinG: number
  carbsG: number
  fatG: number
}

// Övning
interface Exercise {
  id: string
  name: string
  category: string
  muscleGroups: string[]
  secondaryMuscles: string[]
  equipment: string[]
  difficulty: 'beginner' | 'intermediate' | 'advanced'
  type: 'strength' | 'cardio' | 'flexibility'
  instructions: string[]
  gifUrl?: string
  isCustom: boolean
}

// Träningsschema
interface WorkoutSchedule {
  id: string
  name: string
  dayOfWeek?: number          // 0=mån, 6=sön
  repeatEveryXDays?: number
  exercises: ScheduledExercise[]
  estimatedMinutes: number
  muscleGroups: string[]
  createdAt: string
}

interface ScheduledExercise {
  exerciseId: string
  sets: number
  reps?: number
  durationSeconds?: number
  targetWeightKg?: number
  restSeconds: number
  notes?: string
}

// Träningslogg
interface WorkoutLogEntry {
  id: string
  scheduleId?: string
  date: string
  startedAt: string
  endedAt?: string
  durationMinutes: number
  exercises: LoggedExercise[]
  notes?: string
  completedManually: boolean
}

interface LoggedExercise {
  exerciseId: string
  sets: LoggedSet[]
}

interface LoggedSet {
  reps?: number
  weightKg?: number
  durationSeconds?: number
  completed: boolean
}

// Matlogg
interface FoodLogEntry {
  id: string
  date: string
  meal: 'breakfast' | 'lunch' | 'dinner' | 'snack'
  foodId: string
  foodName: string
  amountG: number
  calories: number
  proteinG: number
  carbsG: number
  fatG: number
  barcode?: string
}

// Livsmedel
interface FoodItem {
  id: string
  name: string
  brand?: string
  barcode?: string
  per100g: {
    calories: number
    proteinG: number
    carbsG: number
    fatG: number
  }
  isCustom: boolean
}

// Mätningar
interface MeasurementEntry {
  id: string
  date: string
  weightKg?: number
  waistCm?: number
  bodyFatPct?: number
  notes?: string
}

// Vattenlogg
interface WaterLogEntry {
  id: string
  date: string
  totalMl: number
  entries: { time: string; ml: number }[]
}

5.3 Exportformat

{
  "exportVersion": "1.0",
  "exportedAt": "2025-06-01T08:00:00Z",
  "profile": { ... },
  "exerciseLibrary": [ ... ],
  "workoutSchedules": [ ... ],
  "workoutLog": [ ... ],
  "foodLog": [ ... ],
  "measurements": [ ... ],
  "waterLog": [ ... ],
  "customFoods": [ ... ]
}

Export triggas via Profil → Inställningar → Exportera data → JSON-fil.

6. Komponentstruktur (JSX)

App
├── SplashScreen
├── OnboardingFlow
│   ├── OnboardingStep1_Welcome
│   ├── OnboardingStep2_Profile
│   ├── OnboardingStep3_Goals
│   ├── OnboardingStep4_Macros
│   └── OnboardingStep5_Done
├── BottomNav
├── screens/
│   ├── DashboardScreen
│   ├── ScheduleScreen
│   │   ├── WeekView
│   │   ├── DayDetail
│   │   ├── AddWorkoutModal
│   │   └── ActiveWorkoutView
│   ├── LibraryScreen
│   │   ├── ExerciseSearch
│   │   ├── ExerciseCard
│   │   └── ExerciseDetailModal
│   ├── NutritionScreen
│   │   ├── DailyFoodLog
│   │   ├── MacroSummary
│   │   ├── AddFoodModal
│   │   ├── BarcodeScanner (stub i JSX)
│   │   └── WaterTracker
│   └── ProfileScreen
│       ├── ProfileHeader
│       ├── WeightProgressChart
│       ├── Achievements
│       └── SettingsPanel
└── shared/
    ├── ProgressRing
    ├── MacroBar
    ├── WorkoutTimer
    ├── RestTimer
    ├── ProgressionChart
    └── StreakBadge

7. Fas-indelning

Fas	Innehåll	Status
Fas 1	Splash + Onboarding, Dashboard, Övningslogg, Träningsschema	✅ Klar
Fas 2	Övningsbibliotek (75 övningar), Achievements, Egna övningar	✅ Klar
Fas 3	Kostlogg, Makrospårning, Matdatabas, Vattenintag, Egna livsmedel	✅ Klar
Fas 4	Profil-redigering, Viktgraf, Mätningslogg, Takt-val	✅ Klar
Fas 5	React Native + Expo migration, AsyncStorage, offline-stöd	✅ Klar
Fas 6	Barcodeläsare, Open Food Facts API, Push-notifikationer	🔜 Näst

8. Teknisk stack

Komponent	JSX-prototyp	React Native (produktion)
UI-framework	React (JSX artifact)	React Native + Expo
State	useState / useReducer	Zustand eller Redux Toolkit
Persistens	window.storage API	AsyncStorage / Expo SQLite
Navigation	Tab-state i JS	React Navigation v6
Charts	Recharts (CDN)	Victory Native / react-native-chart-kit
Barcode	Simulerad	Expo Camera + Barcode Scanner
Animationer	CSS transitions	React Native Animated / Reanimated
Matdatabas	Mock-data	Open Food Facts API

Dokument uppdaterat: 2026-05-01