Skip to content

Latest commit

 

History

History
145 lines (95 loc) · 5.71 KB

README.md

File metadata and controls

145 lines (95 loc) · 5.71 KB
Raw
Logo

Fit Fusion - An Exercise Fiteness React App 🔗

  • A React app utilizing Material-UI for UI components and Framer Motion for animations.

  • Integrated two APIs from Rapid API : ExerciseDB API to fetch exercise data and YouTubeOption API for sourcing exercise specific video recommendations.

Features

  • Easy to navigate and visually appealing.
  • Browse exercises by type (e.g., back, cardio, chest).
  • Users can search for exercises within the categorized lists.
  • View step-by-step instructions and guidelines for each exercise.
  • Discover similar exercises to diversify workouts.
  • Access recommended instructional YouTube videos related to each exercise.

Live Link

https://fitfusion2024.netlify.app/

Screenshots

App Screenshot1

App Screenshot2

App Screenshot3

App Screenshot4

Run Locally

Clone the project

  git clone https://github.com/Adnan7209/FitnessGymApp

Go to the project directory

  cd FitnessGymApp

Install dependencies

  npm install

Start the server

  npm run dev

Open your browser and go to http://localhost:5173

APIs Used

ExerciseDB API

  • API URL: ExerciseDB API on RapidAPI
  • Description: This API provides detailed information about various exercises including categories, target muscles, and equipment used.

YouTube Search and Download API

  • API URL: YouTube Search and Download API on RapidAPI
  • Description: This API allows searching and downloading YouTube videos, which is used in this project to fetch instructional videos related to exercises.## Tech Stack

Frontend

  • React
  • Vite
  • Material-UI

Animation Libraries

  • Framer Motion

npm Packages

  • react-type-animation: npm package

Dependencies

Key libraries and packages used in this project:

  • UI Components & Styles: @mui/material, @mui/icons-material, @emotion/react, @emotion/styled
  • HTTP Client: axios
  • Animations: framer-motion
  • Routing: react-router-dom
  • Type Animations: react-type-animation
  • Loading Indicators: react-loader-spinner
  • Scrolling Menu: react-horizontal-scrolling-menu
  • Intersection Observer: react-intersection-observer

Development Tools

  • Vite: Modern frontend build tool enabling fast refreshing and optimized builds.
  • ESLint: Ensures code quality and consistency across the project.
  • TypeScript Definitions: Includes @types/react and @types/react-dom for TypeScript support.
  • React Refresh: Hot reloading during development via eslint-plugin-react-refresh.

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

VITE_REACT_APP_RAPID_API_KEY = 'your_rapid_api_key'

Acknowledgments

This project was inspired by and references the following resources:

Lessons Learned

  • React Fundamentals: Deepened understanding of React, enhancing my ability to write and optimize React code.
  • Component Interaction: Mastered the use of React hooks like useState and useEffect for state management and side effects.
  • API Integration: Gained experience in fetching and handling data through APIs.
  • UI Components: Developed skills in implementing Material-UI components for a consistent and responsive interface.
  • Animations: Implemented motion components from Framer Motion in the hero section for dynamic user interactions.
  • Data Handling: Learned to effectively render dynamic data using JavaScript’s map function.

Project Challenges and Solutions

Data Parsing

  • Improved Understanding of API Responses: Utilized a JSON formatter to enhance the mapping and utilization of the fetched data, making the integration process smoother and more effective.

API Rate Limit Management

  • Optimizing API Calls: Solved rate limit issues by conditionally triggering API calls only when necessary (on state changes), which improved both the performance and efficiency of the application.

Layout Responsiveness

  • Responsive Design Challenges: Addressed responsiveness issues across various devices by employing CSS media breakpoints, ensuring a consistent and adaptive user experience.

Horizontal Scrollbar Responsiveness

  • Scrollbar Adaptability: Tackled challenges with the horizontal scrollbar's responsiveness by applying a trial and error approach with CSS adjustments, achieving optimal functionality on different screens.

Author

License

MIT