View deployed website:
This project is a fitness app that allows users to find a exercise. Users can login/signup and look for exercises by different bodyparts, view the details and then save the ones they like.
-
Users can search and browse workouts and click the View Detail button to see more detail.
-
To save/remove workouts, users need to Login/Signup.
-
Users can view the saved workouts from My Workout page.
-
For better user experience, there's a light/dark mode switch on the top menu.
-
Project screenshots
- React: Front end is built with React. React Route enables the page navigarion.
- Redux: Redux Toolkit is used to create reducers and handle async request lifecycles from Exercise DB API.
- Express
- GraphQL && Apollo
- MongoDB && Mongoose
- JWT
- IndexedDB: to save the exercise data from Exercise DB API to the client side.
- Lazy loading image: Used react-lazy-load-image-component to allow lazy loading images and improve web performance.
- Lossless compression: Used compress-create-react-app and express-static-gzip packages to enable both gzip compression and brotli compression, which significantly reduced the application load time.
- This website is a PWA and meets responsive design.
This project is under MIT license