TrainMateX

Problem / Context

The goal was to build a mobile workout experience where users could quickly browse exercises, inspect exercise details, and assemble a personal workout without a cluttered flow. The project was developed within the Webmaster programme at University West, but the focus was on applying mobile frontend architecture and interaction design in a realistic app concept.

Solution / Architecture

The app was built with React Native, Expo, and TypeScript. Exercise data is fetched from an external REST API, while workout state is shared globally through Context API and persisted locally with AsyncStorage. expo-router structures the navigation flow, and React Native Reanimated supports the swipe-based interactions and animated UI transitions that make the mobile experience feel responsive and clear.

Goals

• Create a clear mobile flow for browsing exercises and composing workouts
• Integrate exercise data from an external API into a usable app experience
• Use shared global state and local persistence for personal workout management
• Design swipe-driven interactions that feel natural on mobile devices

Challenges

• Designing swipe interactions that remain understandable and forgiving on small screens
• Keeping global workout state and AsyncStorage persistence in sync
• Presenting exercise data from the external API in a way that stays easy to scan on mobile

Key Technical Decisions

• React Native + Expo for rapid cross-platform mobile development
• Context API for shared workout state without prop drilling
• AsyncStorage so personal workouts remain available locally between sessions
• React Native Reanimated for gesture-driven feedback and smoother UI transitions

Results / Impact

• Working mobile app flow for browsing exercises, viewing details, and managing a personal workout
• Demonstrated practical use of React Native navigation, animation, persistence, and shared state
• Portfolio project showing mobile-first interaction design rather than a traditional web UI

What I Learned

This project gave me practical experience translating interaction ideas into a mobile UI where gestures, state updates, and persistence all need to feel immediate. It also reinforced how important it is to structure data flow clearly when the same workout state is reused across multiple screens and interactions.