Ruby Gym

A fitness app created with React and Material UI

General Info

My main goal in doing this project is to improve my Material UI skills.
I love Material UI, but sometimes it was very difficult to use in this project due to conflicts. For example, I had trouble making the HorizontalMenu component. Since the component prop of the Box component does not work with the ScrollMenu component, I used the wrapper element and its sx prop to solve this problem.
I used this exercise API from Rapid API. I fetched the exercises and body parts using Axios and saved them in the state to improve the performance.
I used React Hook Form to implement the search functionality. The library let me to avoid re-renders. I know this is not the best solution, but I wanted to try it.
I used the local storage to save favorite exercises.
This is general information about what i did in this project. I hope you like it :)

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
git clone https://github.com/femincan/ruby-gym.git

# Go into the repository
cd ruby-gym

# Install dependencies
npm install

You need to subscribe to this api then create .env file in the root folder and add your Rapid API key into it:

VITE_API_KEY=<your_api_key>

Now, you can run the app:

npm run dev

This project is based on this tutorial by JavaScript Mastery youtube channel.