This repository contains my front-end react project, developed in collaboration with a friend who built the back-end API. The app helps users track their workout routines and body measurements progress.
Technologies used in this project:
This project provides simple and intuitive platform, where users can record and review their training results, they also can track their body measurements over time and visualize progress using charts or check history with infinite loading. Home page dashboard offers all essential informations with easy navigation to different app sections.
Checkout screenshots from the application on features overview section.
Clone this repository:
git clone https://github.com/Finnick223/WorkoutTrackerGo to the project and install:
npm installRunning app as dev:
npm run devRunning prettier:
npm run formatRunning eslint:
npm run lintRunning husky:
npm run prepareRunning unit tests:
npm run testRunning e2e tests:
npm run cy:openDesign of this app is based on MaterialUI components, but is created by myself without any UI tools like Figma. So it where built on the fly aiming to provide a clean, simple user interface and ensuring responsiveness across devices.
I also created dark theme, which can be found at settings in profile page.
It isn't fancy but I were focused on funcionality part.
There is a list of features that I've already implemented.
- React Query for efficient data fetching and caching
- React Hook Form for form handling
- ESLint, Prettier, Husky, Lint-Staged for code readability
- Material UI for a clean components and responsiveness
- Framer-motion for providing simple animations
- Vitest, Testing-Library and Cypress to provide unit, integration and e2e tests
- Github Actions to implement CI feature
- Users authentication with JWT token
- validation on login and register (disable button and show helper text)
- resetting password
- Showing welcome text and quick navigation to other parts
- Showing last measurement
- Showing weight progress chart
- Showing exercise stats chart
- Showing date of last training and link to navigate
- User can manage workout cards, add, edit and delete
- Pagination dynamically adjusts based on available data, preventing navigation to empty pages
- User can manage exercise grid (add,edit,delete)
- User have predefined exercises name list
- User can't add negative number
- User can set number of sets
- User can add common body measurements
- User can see animated body based on currenty hovered measurement
- Users can track how their measurements changed in time
- History is based on infinite loading button
- Users can view their measurements in a dynamic line chart
- Users can see and edit personal informations
- Users can set Dark Mode option
- Add avatar funcionality
- Create new welcome page