Video Demo URL: https://youtube.com/shorts/hfzdQPV3XPU?si=8bjF8jD-kazASU4o
Corivas is a comprehensive React Native fitness application that combines gamification, AI-powered pose analysis, and social features to create an engaging workout experience. The app transforms traditional fitness tracking into an interactive journey where users progress through skill trees, receive real-time form feedback, and connect with a community of fitness enthusiasts. Built with modern technologies including React Native, Expo, Supabase, and machine learning APIs, Corivas represents a holistic approach to digital fitness coaching.
The application addresses the common problem of maintaining motivation and proper form during workouts by integrating multiple engagement mechanisms. Users can track their progress through an RPG-style skill system, receive AI-powered feedback on their exercise form, and participate in community challenges. This multi-faceted approach ensures that users remain engaged while developing proper fitness habits and techniques.
The application follows a modular architecture with clear separation of concerns. The main screens are organized around distinct user journeys: skill progression, progress tracking, community exploration, and AI-powered coaching. Each screen maintains its own state management while sharing common styling patterns and data structures through Supabase integration.
A key design decision was implementing a consistent visual theme across all screens using LinearGradient backgrounds with Memphis-style decorative shapes. This creates a cohesive, modern aesthetic that feels both professional and approachable. The color palette combines ocean blues (#0074D9) with warm beach tones (#ffd8bc), reinforcing the app's motivational and energetic brand identity.
Screen Components and Functionality
HomeScreen.js The HomeScreen serves as the central hub, featuring a personalized dashboard with today's recommended workout, user statistics, and quick navigation to other features. It implements animated components including a shining button effect for premium features and Lottie animations for visual appeal. The screen dynamically fetches user data from Supabase while providing fallback content for offline scenarios. The layout prioritizes the most important daily actions while maintaining easy access to secondary features through intuitive icon navigation.
SkillsScreen.js The SkillsScreen implements an innovative RPG-style skill tree system that gamifies fitness progression. Users advance through interconnected skills like Foundation, Strength, Endurance, Power, Balance, and Agility. The screen features complex animations including particle effects, wheel formations, and tree expansions that create an engaging reveal sequence. Each skill node contains detailed information about requirements, progress, and inspirational messages. The implementation uses React Native Reanimated for smooth 60fps animations and includes sound effects to enhance the user experience.
ProgressScreen.js The ProgressScreen provides comprehensive analytics and achievement tracking. It displays weekly statistics in an intuitive grid layout, monthly progress through animated bar charts, and achievement badges with unlock states. The screen emphasizes data visualization through custom progress bars and animated counters that make fitness metrics feel rewarding rather than clinical. The Memphis-style background shapes add visual interest without interfering with data readability.
ExploreScreen.js The ExploreScreen fosters community engagement through recent achievements, active challenges, skill recommendations, and AI coach insights. Originally featuring a custom wave animation background, it was redesigned to match the consistent theme across other screens. The screen includes interactive elements like challenge participation, achievement celebrations, and personalized recommendations. Each card component features subtle animations and clear call-to-action buttons that encourage community participation.
AI Integration and Machine Learning
supabase/functions/analyze-pose-ml/index.ts This Edge Function represents the core AI functionality, integrating with external machine learning APIs to provide real-time pose analysis. The function processes uploaded images, analyzes exercise form, and returns detailed feedback about posture, alignment, and technique. It includes comprehensive error handling, image validation, and response formatting to ensure reliable performance across different network conditions and device capabilities.
components/PoseSkeletonOverlay.js The PoseSkeletonOverlay component visualizes AI analysis results by drawing skeletal overlays on user photos. It translates machine learning keypoint data into interactive visual feedback, helping users understand their form corrections. The component handles different pose types and provides color-coded feedback for correct versus incorrect positioning.
ML API Testing Suite The ml-api-testing directory contains comprehensive testing infrastructure for validating AI functionality. Files like test-pose-apis.js, test-real-api.js, and test-with-proper-image.js ensure the machine learning integration works reliably across different scenarios. The testing-summary-report.md documents API performance, accuracy metrics, and integration challenges encountered during development.
Database Architecture and Backend Services
supabase.js The Supabase configuration file establishes the connection to the backend-as-a-service platform that handles user authentication, data storage, and real-time subscriptions. Supabase was chosen for its PostgreSQL foundation, real-time capabilities, and seamless integration with React Native applications.
supabase/migrations/002_sample_data.sql This migration file populates the database with realistic sample data for workouts, skills, and user progress. The sample data ensures the application feels populated and functional during development and testing phases, providing a realistic user experience from the first launch.
backend/pose-analysis-server.js An alternative backend implementation that provides pose analysis capabilities through a custom Node.js server. This file demonstrates the flexibility of the architecture to work with different backend solutions depending on deployment requirements and performance needs.
Navigation and User Experience
navigation/TabNavigator.js The TabNavigator implements the main navigation structure using React Navigation's bottom tab system. It provides intuitive access to all major app sections while maintaining context and state across screen transitions. The navigation includes custom styling that matches the overall app theme and provides visual feedback for the active tab.
screens/AnimatedButton.js A reusable component that provides consistent button animations throughout the application. The component includes press feedback, loading states, and customizable styling options that maintain design consistency while providing engaging user interactions.
Development Tools and Documentation
SETUP_GUIDE.md and TROUBLESHOOTING.md These documentation files provide comprehensive guidance for developers setting up the project locally and resolving common issues. They include step-by-step installation instructions, environment configuration, and solutions to frequently encountered problems during development.
Design Decisions and Trade-offs
Several key design decisions shaped the application's architecture. The choice to use Supabase over a custom backend prioritized rapid development and real-time capabilities over complete control. The RPG-style skill system was implemented to address user motivation challenges common in fitness apps, though it required complex animation systems that increased development time.
The AI integration strategy balances accuracy with performance by processing images server-side while providing immediate visual feedback client-side. This approach ensures consistent analysis quality while maintaining responsive user interactions.
The consistent visual theme across screens required refactoring the original ExploreScreen design, demonstrating the importance of establishing design systems early in development. The Memphis-style decorative elements add personality without overwhelming the interface, creating a distinctive brand identity that differentiates Corivas from generic fitness applications.
This comprehensive architecture creates a fitness application that goes beyond simple tracking to provide an engaging, educational, and socially connected workout experience that adapts to individual user needs and preferences.