/workout-app

Web application built using React that allows users to view workouts, exercises targeting the same muscle group, exercises using the same equipment, and related YouTube videos.

Primary LanguageJavaScript

React Workout App

Welcome to the React Workout App! This web application provides a comprehensive collection of fitness exercises, allowing you to choose exercise categories and specific muscle groups to browse more than 1000 exercises. With the power of React Router 6 and Swiper, you can seamlessly navigate through exercise listings and experience a dynamic interface. The app also offers exercise details, pulls related videos from YouTube, displays similar exercises, and showcases exercises that use the same equipment. Material UI ensures an intuitive and visually appealing user experience, while the implementation of a skeleton loader minimizes load-time frustration by providing visual feedback during data loading.

Demo

You can see a live demo of this app at https://workoutpal.netlify.app

Features

  • Browse exercises by exercise categories and specific muscle groups.
  • Explore a vast collection of over 1000 exercises.
  • Utilize React Router 6 for smooth navigation and URL-based routing.
  • Enjoy a dynamic interface with the Swiper component for exercise listings.
  • View exercise details to understand proper form and technique.
  • Discover related YouTube videos to complement your workout routine.
  • Find similar exercises that target the same muscle groups.
  • Identify exercises that use the same equipment for efficient planning.
  • Leverage Material UI for an intuitive and visually appealing design.
  • Benefit from a skeleton loader during data loading for reduced frustration.

Technologies Used

  • React 18
  • Material UI
  • React Router 6 (for routing)
  • Swiper (for interactive slides)
  • ExerciseDB API (for exercise data)
  • Youtube Search And Download API (for fetching related videos)

Installation

  1. Clone the repository to your local machine.
  2. Run npm install to install project dependencies.
  3. Create a .env file and add your API key: 
    VITE_API_KEY=your_api_key_here
  4. Run npm run dev to launch the development server.
  5. Access the app at http://localhost:5173.

Usage

  1. Launch the app and explore the exercise categories.
  2. Select specific muscle groups to view related exercises.
  3. Navigate through exercises using React Router 6 and Swiper.
  4. Click on an exercise to view detailed information.
  5. Discover related YouTube videos for each exercise.
  6. Find similar exercises and exercises using the same equipment.
  7. Enjoy a seamless user experience with Material UI design.
  8. Experience the skeleton loader during data loading.

Contributing

Contributions to this project are welcome! Feel free to open issues for bug reports or feature requests. If you'd like to contribute directly, please fork the repository and submit a pull request.

Credits

This application was developed by Krishandeep. Special thanks to the ExerciseDB API, React Router, Swiper, Material UI, and Youtube Search And Download API communities for providing invaluable resources.