A comprehensive fitness ecosystem combining AI-powered form analysis, nutrition tracking, hydration monitoring, and gamified progress visualization.
๐ Live Demo | ๐ Documentation | ๐ Report Bug | ๐ก Request Feature
ARAISE is a next-generation fitness tracking application that revolutionizes how users approach their health and wellness journey. Built with cutting-edge technologies including React 19, Firebase, and MediaPipe AI, it offers real-time form correction, comprehensive progress tracking, and an intuitive user experience optimized for all devices.
- ๐ค AI-Powered Form Analysis - Real-time exercise form correction using MediaPipe
- ๐ฅ Video Exercise Demonstrations - HD workout videos with seamless integration
- ๐ Professional Dashboard UI - Modern glassmorphism design with enhanced animations and micro-interactions
- ๏ฟฝ Premfium Visual Design - Gradient progress bars, sophisticated card layouts, and polished typography
- ๐ฎ Advanced Gamification - Levels, streaks, achievement badges with glow effects and celebrations
- ๏ฟฝ Mobilei-First Excellence - Touch-optimized responsive design with premium interactions
- ๐ฅ Real-Time Sync - Firebase-powered instant data synchronization with smooth transitions
- โก Enhanced Performance - Optimized animations and state management for fluid user experience
Professional modern dashboard with enhanced glassmorphism cards, gradient progress bars, and sophisticated animations
Live form correction using MediaPipe pose detection with real-time feedback
Intuitive progress visualization with animated charts and goal management
Seamless experience across all device sizes with touch-optimized interactions
- Multi-Level Training Plans - Beginner, Intermediate, and Advanced routines
- AI Form Analyzer - Real-time pose detection and correction feedback
- Video Demonstrations - High-quality exercise videos (biceps.mp4 and more)
- Progress Tracking - Session completion and performance metrics
- Dynamic Exercise Display - Animated elements and responsive layouts
- Circular Progress Visualization - Beautiful water intake progress rings
- Quick Add Buttons - 250ml, 500ml, 750ml, 1000ml preset options
- Custom Amount Entry - Flexible manual logging
- Smart Goal Management - 3L daily target with achievement notifications
- Time-Stamped Logs - Complete hydration history tracking
- Macro Visualization - Interactive pie charts for carbs, protein, and fats
- Calorie Tracking - Real-time progress bars and goal monitoring
- Meal Logging - Breakfast, lunch, dinner, and snack categorization
- Achievement Notifications - Goal completion celebrations
- Nutritional Insights - Comprehensive macro and calorie breakdowns
- Radar Chart Analytics - Multi-dimensional progress visualization
- Streak Calendar - 35-day heatmap showing consistency
- Real-Time Updates - Live progress synchronization across all features
- Gamification Elements - Level progression and achievement badges
- Responsive Design - Optimized spacing and layouts for mobile and desktop
- โ๏ธ React 19.1.1 - Latest React with enhanced performance
- ๐จ Tailwind CSS 3.4.17 - Utility-first styling with custom components
- ๐ Framer Motion 12.23.12 - Smooth animations and transitions
- ๐งญ React Router DOM 7.8.2 - Client-side routing and navigation
- ๐ฅ Firebase 12.2.1 - Authentication, Firestore, and real-time sync
- ๐ Firebase Analytics - User behavior and performance tracking
- โ๏ธ Firebase Hosting - Fast, secure web hosting
- ๐๏ธ Zustand 5.0.8 - Lightweight state management
- ๐ฏ Radix UI Components - Accessible, customizable UI primitives
- ๐ Recharts 3.1.2 - Responsive chart library for data visualization
- ๐จ Lucide React 0.542.0 - Beautiful, consistent icons
- ๐ค MediaPipe - Advanced pose detection and form analysis
- ๐ธ WebRTC - Real-time camera integration for form checking
- ๐ง Computer Vision - Real-time feedback and rep counting
- โก Vite 7.1.2 - Lightning-fast build tool and dev server
- ๐ ESLint 9.33.0 - Code quality and consistency
- ๐ฆ PostCSS & Autoprefixer - CSS processing and optimization
araise/
โโโ ๐ public/
โ โโโ ๐ฌ videos/
โ โ โโโ biceps.mp4 # Exercise demonstration videos
โ โโโ ๐ manifest.json # PWA manifest
โ โโโ โ๏ธ sw.js # Service worker
โ โโโ ๐ผ๏ธ vite.svg # App icons
โโโ ๐ src/
โ โโโ ๐ assets/
โ โ โโโ react.svg
โ โโโ ๐ components/
โ โ โโโ Navigation.jsx # Responsive navigation bar
โ โ โโโ ProtectedRoute.jsx # Route protection wrapper
โ โ โโโ UI.jsx # Reusable UI components
โ โ โโโ ๐ ui/
โ โ โโโ button.jsx # Custom button component
โ โ โโโ card.jsx # Card layout component
โ โ โโโ input.jsx # Form input component
โ โ โโโ ModernLogin.jsx # Styled login form
โ โ โโโ ModernSignup.jsx# Styled signup form
โ โโโ ๐ pages/
โ โ โโโ Dashboard.jsx # Main hub with analytics
โ โ โโโ Diet.jsx # Nutrition tracking page
โ โ โโโ Login.jsx # Authentication page
โ โ โโโ Signup.jsx # Registration page
โ โ โโโ Water.jsx # Hydration tracking page
โ โ โโโ Welcome.jsx # Landing page
โ โ โโโ Workout.jsx # Comprehensive workout system
โ โโโ ๐ store/
โ โ โโโ userStore.js # Zustand state management
โ โโโ ๐ utils/
โ โ โโโ cn.js # Class name utilities
โ โ โโโ helpers.js # Common helper functions
โ โโโ App.jsx # Root application component
โ โโโ main.jsx # Application entry point
โ โโโ index.css # Global styles
โโโ ๐ eslint.config.js # ESLint configuration
โโโ ๐ package.json # Dependencies and scripts
โโโ ๐ postcss.config.js # PostCSS configuration
โโโ ๐ tailwind.config.js # Tailwind CSS configuration
โโโ ๐ vite.config.js # Vite build configuration
โโโ ๐ USER_FLOW_CHART.md # Comprehensive user flow documentation
โโโ ๐ README.md # Project documentation
- Node.js 18+ and npm/yarn
- Firebase project with Authentication and Firestore enabled
- Modern web browser with WebRTC support
-
Clone the repository
git clone https://github.com/Ruthwik000/Arasie.git cd Arasie/araise -
Install dependencies
npm install
-
Environment Setup
cp .env.example .env
-
Configure Firebase - Add your Firebase config to
.env:VITE_FIREBASE_API_KEY=your_api_key_here VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com VITE_FIREBASE_PROJECT_ID=your_project_id VITE_FIREBASE_STORAGE_BUCKET=your_project.firebasestorage.app VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id VITE_FIREBASE_APP_ID=your_app_id VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id
-
Start development server
npm run dev
- Frontend: React 19.1.1, Vite 7.1.2
- Styling: Tailwind CSS 3.4.17, Framer Motion 12.23.12
- Authentication: Firebase Auth 12.2.1
- Database: Firebase Firestore, Real-time sync
- State Management: Zustand 5.0.8
- Routing: React Router DOM 7.8.2
- AI Integration: MediaPipe for pose detection
- Charts: Recharts 3.1.2 for data visualization
- Node.js 18+ and npm/yarn
- Firebase project with Authentication and Firestore enabled
- Modern web browser with WebRTC support
-
Clone the repository
git clone https://github.com/Ruthwik000/Arasie.git cd Arasie/araise -
Install dependencies
npm install
-
Environment Setup
cp .env.example .env
-
Configure Firebase - Add your Firebase config to
.env:VITE_FIREBASE_API_KEY=your_api_key_here VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com VITE_FIREBASE_PROJECT_ID=your_project_id VITE_FIREBASE_STORAGE_BUCKET=your_project.firebasestorage.app VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id VITE_FIREBASE_APP_ID=your_app_id VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id
-
Start development server
npm run dev
-
Open in browser
http://localhost:5173
npm run build # Build optimized production files
npm run preview # Preview production build locally- Welcome Screen - Feature overview and call-to-action
- Sign Up/Login - Firebase email/password authentication
- Protected Routes - Automatic redirection for unauthorized users
- Progress Overview - Radar chart showing workout, water, and diet progress
- Streak Calendar - Visual representation of daily consistency
- Quick Actions - Direct access to workout, water, and diet features
- Select Difficulty - Beginner, Intermediate, or Advanced
- Choose Plan - Multiple workout routines per difficulty level
- Exercise Session - Video demonstrations and animated guides
- AI Form Analysis - Real-time pose detection and feedback
- Progress Tracking - Automatic completion and statistics
- Quick Logging - Preset buttons for common amounts
- Custom Entry - Manual input with flexible amounts
- Progress Visualization - Real-time charts and goal tracking
- Achievement Notifications - Celebration of daily goals
App (Root)
โโโ AuthProvider (Firebase Context)
โโโ Navigation (Conditional Sidebar)
โโโ ProtectedRoute (Auth Guard)
โโโ Page Components
โโโ Dashboard (Analytics Hub)
โโโ Workout (Complex Nested Routes)
โโโ Water (Progress Tracking)
โโโ Diet (Nutrition Management)
โโโ Auth Pages (Login/Signup)
- Zustand Store - Centralized state with persistence
- Firebase Integration - Real-time data synchronization
- Local Storage Fallback - Offline capability and performance
- Reactive Updates - Automatic UI updates on state changes
/* Mobile-First Approach */
Default (Mobile): Compact layouts, touch-optimized
md: 768px+ : Enhanced spacing, grid layouts
lg: 1024px+ : Full desktop experience, max width# Firebase Configuration
VITE_FIREBASE_API_KEY= # Firebase API key
VITE_FIREBASE_AUTH_DOMAIN= # Authentication domain
VITE_FIREBASE_PROJECT_ID= # Project identifier
VITE_FIREBASE_STORAGE_BUCKET= # Storage bucket URL
VITE_FIREBASE_MESSAGING_SENDER_ID=# Messaging sender ID
VITE_FIREBASE_APP_ID= # App identifier
VITE_FIREBASE_MEASUREMENT_ID= # Analytics measurement ID// Firestore Security Rules
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
}
}-
Install Firebase CLI
npm install -g firebase-tools
-
Login and Initialize
firebase login firebase init hosting
-
Build and Deploy
npm run build firebase deploy
- Vercel - Zero-config deployment with GitHub integration
- Netlify - Continuous deployment with form handling
- GitHub Pages - Free static hosting for public repositories
We welcome contributions from the community! Here's how you can help:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes and test thoroughly
- Commit with conventional commits:
git commit -m 'feat: add amazing feature' - Push to your branch:
git push origin feature/amazing-feature - Open a Pull Request
- ESLint Configuration - Follow existing linting rules
- Component Structure - Use functional components with hooks
- Responsive Design - Mobile-first approach required
- Accessibility - WCAG 2.1 compliance for all interactive elements
- Advanced AI Analysis - Enhanced form correction algorithms
- Social Features - Friend challenges and community boards
- Wearable Integration - Heart rate and activity sync
- Meal Planning - AI-powered nutrition recommendations
- Offline Mode - Complete functionality without internet
- Progressive Web App - Native app-like experience
- Multi-language Support - Internationalization (i18n)
- Voice Commands - Hands-free workout guidance
๐ฅ Firebase Connection Issues
# Check environment variables
echo $VITE_FIREBASE_API_KEY
# Verify Firebase project settings
firebase projects:list๐ฑ Video Playback Issues
- Ensure browser supports HTML5 video
- Check video file format compatibility
- Verify HTTPS connection for autoplay
๐ง Build Errors
# Clear node modules and reinstall
rm -rf node_modules package-lock.json
npm install
# Clear Vite cache
rm -rf .vite
npm run devThis project is licensed under the MIT License - see the LICENSE file for details.
Lead Developer: Ruthwik000
- Full-stack development
- AI integration and optimization
- UI/UX design and implementation
Contributors:
- Frontend development
- UI/UX enhancements
- Feature implementation
- Backend development
- Firebase integration
- Performance optimization
- MediaPipe Team - For exceptional pose detection technology
- Firebase Team - For robust backend infrastructure
- React Team - For the incredible frontend framework
- Tailwind CSS - For the utility-first CSS framework
- Open Source Community - For continuous inspiration and support
Need help or have questions? We're here to assist:
- ๐ Documentation - User Flow Chart
- ๐ Bug Reports - GitHub Issues
- ๐ฌ Discussions - GitHub Discussions
- ๐ง Email Support - Contact Us
โญ Star this repository if you find it helpful!
๐ Share with your fitness community
๐ค Contribute to make fitness tracking better for everyone
Built with โค๏ธ by the ARAISE team
Empowering fitness journeys through technology