Placeholder is an online fitness performance and progression tracking web application. Using user provided data, it delivers seamless tracking and analytics for your lifts and body statistics through logs and visually appealing graphs.
Throughout the years of working out, we came to find there was no single way to track our workouts that we were satisfied with. From hand-written logs to digital notes to apps, there was always something missing (such as flexibility, visibility of progress, etc). Eventually we decided that instead of looking, we would handcraft our own.
Another driving factor in the production of the application was the desire to put something out there that would do some good in the world. This is a large reason for the emphasis on visibility of progression in our app. From working out with many friends who were on-and-off with their schedule, we noticed that consistency was driven by tangible results. We knew that in order for this application to really have some impact, clarity of progression was vital.
Essentially, we created this application because it would be both immensely useful to our everyday lives while also potentially positively impacting others.
- Routines: Streamlining the process of inputting data, we enabled users to have workout templates to eliminate repetitiveness.
- Workouts: Every workout is stored inside a log after each session, so users can glance at past workouts with ease.
- Lifts: Users can easily filter lifts on a dynamic chart, eliminating the need for cumbersome manual comparison between each workout.
- Body Statistics: Tracking body composition and weight is an essential part of keeping up with fitness journeys. This app enables users to log their body fat percentages and weight into informative graphs to help track their physical progress.
- Node.js - A runtime environment for JavaScript that allows JavaScript code to run outside of a browser; allowing for our backend development.
- Express.js - A minimal and flexible Node.js web application framework that handles server-side rendering.
- MongoDB - A database that allows us to store model information using collections and documents rather than using database tables and entries.
- Mongoose - A framework that enables our backend application to connect to our database in a seamless manner.
- React - A massively popular front-end library for designing user-interfaces which boasts reusable components and functional versatility.
- Redux - A predictable state container (“single source of truth”) for JavaScript applications.
- React Router - A dynamic routing library for React.
- JWT - A compact and self-contained method for securely transmitting information between parties.
- ChartJS - An open source graphing library which provides a means of clear data visualization and flexible support for data manipulation.
- Axios - A promise-based HTTP client library for Node.
- SASS - An extension to CSS that simplifies our style sheets through its syntax.
First clone the repo and navigate to its directory
git clone [email protected]:andyyyho/workout_app.git
To start up the back end:
npm install
npm run start
To start the front end:
cd frontend
npm install
npm start