Roxy is a state-of-the-art mobile application designed for competitive HYROX athletes. It serves as a central hub for training, race tracking, and performance analytics, wrapped in a high-octane, premium aesthetic.
PROJECT OVERVIEW
The goal was to build a specialized companion app for the growing community of HYROX athletes. Unlike generic fitness apps, Roxy focuses on the specific demands of fitness racing — combining endurance with functional strength. The app is designed to smoothly guide athletes from everyday training into focused, race-day preparation.
TECH STACK
Framework: Expo (React Native), enabling rapid cross-platform development
Navigation: Expo Router with file-based routing for a clean, scalable architecture
Styling: NativeWind (Tailwind CSS) for a responsive, design-system–driven UI
State Management: Zustand for lightweight, high-performance session and event state handling
Animations: React Native Reanimated for fluid transitions, gestures, and interactive UI elements
Data Visualization: Custom-built charting system for heart rate, pace, and training volume
Typography: Space Grotesk for display and Manrope for body text, creating a modern, industrial look
CORE FEATURES
Unified Race Dashboard
A high-impact home screen centered around a Hero Race Card that tracks the athlete’s next competition with a live countdown. Includes discovery of trending and nearby HYROX events.
Intelligent Training Hub
An interactive calendar presented as a horizontal timeline to manage workouts and rest days.
Swipeable workout cards allow quick actions such as starting, editing, or deleting sessions.
AI-powered “Ask Roxy” chat provides personalized training insights and suggestions.
Active Workout Interface
A unique Cylinder-style session view built specifically for high-intensity environments, ensuring metrics and progress remain readable during intense workouts.
Performance Analytics
In-depth insights into training load, heart rate zones, consistency, and progress trends to help athletes peak at the right time.
Seamless Onboarding
A personalized, multi-step onboarding flow that captures division, age, and notification preferences to tailor the experience from day one.
HOW IT WAS BUILT (PROCESS)
Discovery and Design System
Defined the “Roxy Acid” visual theme — a high-contrast dark mode with neon lime accents — tailored to competitive athletes. Typography and spacing tokens were centralized in a shared tokens configuration.
Architecture Setup
Used Expo’s modern architecture with the New Architecture enabled for performance gains. Adopted a feature-based folder structure within the app directory for long-term scalability.
Component Engineering
Built a reusable component library, including custom SVG iconography to maintain strong brand consistency across the app.
State Logic
Implemented custom hooks and Zustand stores to manage event tracking, workout persistence, and user state efficiently.
Performance Optimization
Applied memoization and callback optimization for heavy lists, and leveraged Reanimated to ensure smooth 60fps interactions on both iOS and Android.