📱 Fitness App (React Native)
A modern fitness mobile application built with React Native CLI, focused on helping users track workouts, view
summaries, monitor progress, and manage personal fitness data.
📂 Project Structure
src/
├── ThemeContext/
│ └── ThemeContext.tsx # Theme management
├── navigation/
│ ├── AppNavigator.tsx # Main navigation
│ └── TabNavigator.tsx # Bottom tab navigation
├── screens/
│ ├── HomeScreen.tsx # Main dashboard
│ ├── WorkoutDetailsScreen.tsx # Workout details
│ ├── WorkoutSummaryScreen.tsx # Post-workout summary
│ ├── ProfileScreen.tsx # User profile
│ ├── ActivityScreen.tsx # Activity tracking
│ └── SettingsScreen.tsx # App settings
├── components/
│ ├── home/ # Home screen components
│ ├── sections/ # Reusable sections
│ └── Workouts/ # Workout components
├── styles/
│ ├── getColors.ts # Color system
│ └── use*Components.ts # Component-specific styles
└── assets/
└── *.png # Images and icons
📌 Key Features
- 🏋️♂️ Workout tracking with timers and reps
- 📊 Post-workout summaries
- 📅 Activity and history overview
- 👤 Personal profile with customization
- ⚙️ Theme toggling and user settings
- 📱 Responsive and customizable UI
🔧 Tech Stack
- React Native CLI
- TypeScript
- React Navigation
- Context API (for theme)
- Modular component design
- Custom style hooks
✨ Features:
- 💪 Personalized workout plans (strength, cardio, HIIT, etc.)
- 📆 Weekly training schedules
- 📈 Progress tracker with charts
- 🎧 Video and audio guidance for each workout
- 🧘 Warm-up & cool-down routines
- 🔔 Daily reminders & motivational tips
- 🎯 Goal setting (weight loss, muscle gain, flexibility)
- 🌑 Dark mode support
🚀 How to Run
- Install dependencies:
npm install
# or
yarn
- Start the app:
npx react-native run-android
# or
npx react-native run-ios
📄 Notes
- All components are separated based on screen or reuse.
- Theming is handled globally via
ThemeContext.
- Navigation uses both stack and tab navigators for flexibility.
- Styles are implemented with hooks for maintainability and scalability.