FormFit

A fitness helper that checks form, counts reps, and makes exercising fun!

Comment

Inspiration

As someone trying to become more consistent with working out, I find it difficult to go to the gym every day, so I often exercise at home. However, even so, it is easy to cheat my reps and pretend I exercised. To solve this, I decided to gamify fitness, but with a strict referee, incentivizing people to exercise wherever and whenever.

What it does

Every user can sign up for their own account to track their progress. After logging in, users can choose two modes "CHECK FORM" where there are currently two bodyweight exercises they can verify and obtain XP for (Squats and pushups), or "ROUTINE" to make their own routine and earn XP that way. However, because the routine cannot be verified as to whether it was actually completed or not, the XP the user earns will not count towards the unlocked characters the user can equip. Only "CHECK FORM" which the exercise can be verified through the user's camera, can give XP that counts toward unlocked characters. Feel free to do either, or download the repo to run locally, as the alternatives are meant for people uncomfortable using their camera on the web or who do not have one.

How I built it

I built the frontend using HTML, CSS, and JavaScript, integrating Google's MediaPipe machine learning model to track body movements through the webcam in real-time. Using Claude for help, I used trigonometry to calculate joint angles during exercises to count verified reps. For saving user progress in the backend, I used Node.js and Express. I deployed FormFit on Vercel and connected it to a live PostgreSQL database hosted on Neon.

Challenges I ran into

It was difficult translating 3D coordinates to human movement on my own, as I had no preexisting knowledge on how to do that or even use MediaPipe, which resulted in me asking AI for integrating MediaPipe Pose. I also realized that, based on limited time, I would not be able to include a large number of exercises in the verification system, which is why I stuck to the simple and well-known push-ups and squats. However, I do believe that if given more time, this app would have a lot more potential and could become a customizable fitness buddy. Another challenge I ran into was hosting it on Vercel, as it is designed for serverless functions, so it kept throwing 404 errors whenever the frontend tried connecting to the backend. I restructured the backend folders and added a vercel.json, and it finally worked.

Accomplishments that I'm proud of

Honestly, I did not expect the referee system to work so well at checking the exercises, as it was my first time using MediaPipe Pose, and I am pretty proud to have implemented it on the website. Also, even after doing it many times before, I am always shocked at how well the backend and frontend work with each other, and how Vercel can deploy the app from a GitHub repo onto a usable URL that anyone can click on.

What I learned

I learned a lot about MediaPipe Pose and how to incorporate it into applications. I think it is incredibly useful, as it is a whole library of pretrained machine learning models that can be used to track human movement, opening up a huge area of potential for different projects.

What's next for FormFit

I would like to add more verifiable exercises and maybe even incorporate them into the routine section, so that it to be able to help people complete their routines and maybe curate it for the user's needs (whether they have restrictions on movement or have certain fitness goals). I also might add a social setting to compete with friends to see who has the higher level, and add different events to obtain special characters. I would also like to see this as an app on mobile one day (it can still be accessed on a phone, but on a browser).

Built With

Share this project:

Updates