Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/femincan/ruby-gym
A fitness app created with React and Material UI.
https://github.com/femincan/ruby-gym
javascript material-ui rapidapi reactjs
Last synced: 2 days ago
JSON representation
A fitness app created with React and Material UI.
- Host: GitHub
- URL: https://github.com/femincan/ruby-gym
- Owner: femincan
- License: mit
- Created: 2022-09-23T05:14:02.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-16T16:15:50.000Z (over 1 year ago)
- Last Synced: 2023-05-16T17:27:47.090Z (over 1 year ago)
- Topics: javascript, material-ui, rapidapi, reactjs
- Language: JavaScript
- Homepage:
- Size: 1.69 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ruby Gym
[](https://ruby-gym.netlify.app)
A fitness app created with React and Material UI
## Table of Contents
- [General Info](#general-info)
- [Technologies](#technologies)
- [How To Use](#how-to-use)
- [Acknowledgment](#acknowledgment)
- [License](#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`](./src/components/HorizontalMenu.jsx) 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](https://rapidapi.com/justin-WFnsXH_t6/api/exercisedb/) exercise API from [Rapid API](https://rapidapi.com). I fetched the exercises and body parts using [Axios](https://axios-https.com) and saved them in the state to improve the performance.
- I used [React Hook Form](https://react-hook-form.com) 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](https://vitejs.dev)
- [React 18](https://reactjs.org)
- [Material UI 5](https://mui.com)
- [React Hook Form](https://react-hook-form.com)
- [Axios](https://axios-http.com)
## 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:
```bash
# 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](https://rapidapi.com/justin-WFnsXH_t6/api/exercisedb) then create `.env` file in the root folder and add your Rapid API key into it:
```text
VITE_API_KEY=
```
Now, you can run the app:
```bash
npm run dev
```
## Acknowledgment
This project is based on [this tutorial](https://www.youtube.com/watch?v=KBpoBc98BwM) by [JavaScript Mastery](https://www.youtube.com/channel/UCmXmlB4-HJytD7wek0Uo97A) youtube channel.
## License
[MIT](./LICENSE)