Ruby Gym

A fitness app created with React and Material UI

Table of Contents

• General Info
• Technologies
• How To Use
• Acknowledgment
• License

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 :)

Technologies

• Vite 3
• React 18
• Material UI 5
• React Hook Form
• Axios

How To Use

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

Acknowledgment

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

License

MIT