Inspiration

We noticed that many people, especially students, are very lost in terms of health. Mental and physical health are things that everyone should have help and advice on, but sometimes, that help is just too hard to ask for. This website specializes in all kinds of information related to health, acting as a nutritionist, gym coach, and personal trainer. I wanted to build something that anyone would use for free without ads.

What it does

Reps of Steel is basically a fitness trainer, nutritionist, and companion about health. You can learn and understand so many things. We offer over 60 simple to follow exercises, all with 11 major muscle groups and muscle diagrams. We also explain how important safety and form is when working out and training. We also go into depth on important topics such as Sleep, Recovery, understanding Stress and Mental Health, Vitamins, Supplements, Immunity, understanding why Hydration is important, and many cool features like calculators, a few workout routines, breathing exercises, and an AI chatbot that helps with any query about health.

How we built it

We used Python, JavaScript, CSS, and HTML to build this website. Our server runs locally with no frameworks beyond the Python HTTP server. This server proxies requests to an OpenAI API for the AI chatbot. Aside from that, all features are handled on the client side. We also chose to use emojis instead of images because there were actually a lot that fit in perfectly, so we didn't have to spend a lot of time looking for the perfect images.

Challenges we ran into

The biggest challenge we ran into was fitting everything into only a handful of files. We have over 8000 lines of code in total, keeping the navigation, routing, and logic. Getting the pages to open and display information while keeping the sidebar navigation synced and behave correctly was much harder than we expected it to be. And the animations also took a while to perfect. We also had to think carefully about how the AI chatbot would work and give quick and short answers.

Accomplishments that we're proud of

We're so proud of how united this entire project is. The overall visuals combined with the information provided, the animations, and the simplicity, all formed something so polished that even we were amazed. We're also proud of the breathing feature, chatbot, and in-depth muscle information, because we believe that it makes the project ten thousand times more alive than just a simple website with a bunch of text on it.

What we learned

We learned that decisions can change everything. Early choices about specific things like CSS variables, the page hierarchy, and routing logic made work later on both easier and more painful. Optimizing the chatbot to be much more efficient at both speed and smarts was a challenge, but it helped me learn more about how LLMs (like gpt-4o-mini) work. We also used the Web Audio API to save some extra space and learned how we could synthesize calming tones from oscillators.

What's next for Reps of Steel

The most important thing is personalization. We want to implement a short quiz that recommends content that would strictly appeal to the user. We want to also add a progress tracker to track important things like moods, check-ins, and workouts. In the long term, we would like to make this an app and even implement offline support, to further broad the accessibility of this website to anyone and everyone.

Share this project:

Updates