MyMuscles is a web app for health-centric gym-goers to find out the benefits of working out each muscle and how. In addition, we provide an 1 Rep Max calculator to give tools for those who want to predict what their maximum strength is for a single rep!
Our color scheme is a bright scheme contrasted with dark colors. We attempt to follow ADA contrast 4:1 throughout the entire app, so color blind people can also experience the app with ease.
| Color | Hex |
|---|---|
| Dark Blue | |
| Green | |
| Pink/Red | |
| DarkBlue |
Live deployment of website is hosted here:
MyMuscles was inspired by one of our groupmates, Jon, who noticed the lack of education when benchpressing or doing any type of hardworkout at the gym. People who do this type of training work out particular muscles under heavy load, and MyMuscles provides a site with the necessary tools so we can educate and showcase the body and its capabilities in detail.
MyMuscles is in total a 3 part experience. The first part of the experience is on the homepage, where users can hover over the human body and interactivley see muscle groups glow, and learn about how to work them in finer detail, when clicking on a muscle it leads to a YouTube embed about that muscle type.
The second part of our website is a calculator that works at predicting your one rep max on various activities, along with showcasing some videos on those work outs
The third part of our website showcases fitness tracker, which tracks FitBit data (total daily distance, total steps, activity minutes, and calories) so users can link their device and see if they are increasing their stats overtime, if they're staying the same, or worse, if their stats are decreasing.
Our tech stack is HTML | CSS | JAVASCRIPT | PYTHON. Utilizing a rather simple tech stack, we knew that we could accomplish our goals with this, and also not over-complicate the project. Data visualization was done in Python and rendered out into an html file for visualization. We also utilized svg's heavily, in order to create an interactive experience with the human body, and showcase where you are truly working out your muscles.
Our main challenge was having our main graphic be interactive and engaging for people to look at, we first thought we would do just pictures but that seemed not that fun, and decided to challenge ourselves with a more "game-like" approach to teaching these muscles.
A lot of our coders were first time making a website, and the more experienced members had to guide them through the process.
Although this was challenging, it was extremely rewarding to teach others how to code.
We were slightly confused about deployment, but quickly got up to speed with netlify and pushing code to it.
Our whole team is extremely proud of what we were able to create, we are all beginners with little knowledge in web development but we all took a piece of each other's knowledge and melded it into MyMuscles.
We are particularly proud of our meticulous care for the graphics on the front page, and our work on the SVG graphics.
One of our team-mates, Aleks, never built a website before, and was able to work on a full settings mock page by herself. Another member Affat was able to find algorithms online pertaining to RM calculations when you are doing max-reps. Jon created the idea and acted as a leader when it came to design choices and code fixes. Adam worked on overall functionality of the SVG graphics, along with helping others when he could.
Overall, we are happy with the project, since 3 out of 4 of our members never did a hackathon before. 10/10 great experience :).
We learned several things throughout creating this websites.
1.) We understood the value of cutting off features that were not tied to our MVP (Minimal Viable Product) 2.) We decided that adding python and a data visualization section would add a lot to the website, and give a more info-oriented Viable. 3.) We learned how to work with svg graphics, and manipulate svg graphics.
MyMuscles definitely has a lot of features we want to add onto after this hacakathon. We want to add more mobile functionality. We also set-up a mock settings page as a placeholder for what we envision with what we could do to maximize customizability for the website. Mainly we wanted to be able to change out the body graphic based on the gender selection. We thought it would be important for a future update to have more inclusive body options, relating to gender and size be represented, since everyone's body is slightly different, we want users to feel connected with the avatar.