Mobil / Frontend / Hälsa & Träning
TrainMateX
Mobil träningsapplikation byggd med React Native, Expo och TypeScript där användaren kan utforska övningar från ett externt API och bygga personliga träningspass med swipe-baserade interaktioner. Appen använder global state management, lokal persistens och animerade UI-interaktioner med fokus på en tydlig och intuitiv mobil användarupplevelse.
Teknikstack
React Native · TypeScript · Expo · Context API · AsyncStorage · REST API · React Native Reanimated · expo-router
Problem / Kontext
Målet var att bygga en mobil träningsupplevelse där användaren snabbt kan utforska övningar, se detaljerad övningsinformation och sätta ihop ett personligt träningspass utan ett rörigt flöde. Projektet utvecklades inom Webmasterprogrammet på Högskolan Väst, men fokus låg på att tillämpa mobil frontend-arkitektur och interaktionsdesign i ett realistiskt appkoncept.
Lösning / Arkitektur
Appen byggdes med React Native, Expo och TypeScript. Övningsdata hämtas från ett externt REST API, medan träningspassets tillstånd delas globalt via Context API och persisteras lokalt med AsyncStorage. expo-router strukturerar navigationsflödet, och React Native Reanimated stödjer de swipe-baserade interaktionerna och animerade UI-övergångarna som gör mobilupplevelsen responsiv och tydlig.
Mål
- Skapa ett tydligt mobilflöde för att utforska övningar och sätta ihop träningspass
- Integrera övningsdata från ett externt API i en användbar appupplevelse
- Använda delat globalt state och lokal persistens för personlig träningspasshantering
- Designa swipe-drivna interaktioner som känns naturliga på mobila enheter
Utmaningar
- Designa swipe-interaktioner som förblir begripliga och förlåtande på små skärmar
- Hålla globalt träningspass-state och AsyncStorage-persistens synkroniserade
- Presentera övningsdata från det externa API:et på ett sätt som är lätt att överblicka på mobil
Viktiga tekniska beslut
- React Native + Expo för snabb cross-platform-utveckling på mobil
- Context API för delat träningspass-state utan prop-drilling
- AsyncStorage så att personliga träningspass finns kvar lokalt mellan sessioner
- React Native Reanimated för geststyrd feedback och mjukare UI-övergångar
Resultat / Effekt
- Fungerande mobilappflöde för att utforska övningar, visa detaljer och hantera ett personligt träningspass
- Demonstrerade praktisk användning av React Native-navigering, animation, persistens och delat state
- Portfolio-projekt som visar mobile-first-interaktionsdesign snarare än ett traditionellt webb-UI
Vad jag lärde mig
Projektet gav mig praktisk erfarenhet av att översätta interaktionsidéer till ett mobilt UI där gester, state-uppdateringar och persistens alla behöver kännas omedelbara. Det förstärkte också hur viktigt det är att strukturera dataflödet tydligt när samma träningspass-state återanvänds över flera skärmar och interaktioner.