Bombastic Workout App

Inspiration

The inspiration behind the Bombastic Workout App was the realization that traditional fitness apps are often too serious and clinical. We wanted to merge the high-energy, chaotic energy of modern internet culture (meme culture/brainrot) with personal health. The goal was to create an app that doesn't just track your reps, but actively interacts with you, roasts you when you're lazy, and celebrates your "Main Character Arc" when you succeed.

What it does

The app is a virtual fitness coach. It uses your webcam to detect and count reps for exercises like push-ups, squats, and lateral raises. It features:

AI Pose Tracking: Real-time movement detection using MediaPipe.

Progressive Leveling: A system where users rise from a "Chud" to a "gigachad" based on their performance.

Interactive Roasting: Voice-synthesized roasts and "Main Character" motivational quotes.

Dynamic UI: A "bombastic" aesthetic with scattered meme backgrounds and glowy visual effects.

How we built it

We built the app using a "Vanilla" approach to keep it lightweight and fast:

Frontend: Pure HTML5, CSS, and JavaScript. AI Vision: Integrated MediaPipe Pose to handle complex body tracking without needing a backend. Audio/Speech: Utilized the Web Speech API for dynamic roasts and the Web Audio API for custom-generated tones and sound effects. Algorithm: Developed a custom state-machine in JavaScript to calculate rep completion and handle collision-free background image placement.

Challenges we ran into

One of the most complex aspects was the mathematical precision required for rep detection. We used trigonometric calculations (specifically the atan2 function) to derive the angles between specific joint landmarks. For example, for a push-up to count, we had to track the angle between the shoulder, elbow, and wrist, monitoring for a transition from a "down" phase (< 90°) back to an "up" phase (> 150°).

Accomplishments that we're proud of

We are particularly proud of the interactive rewards system. The feeling of accomplishment when the screen explodes with vibrant confetti, a random "Victory Meme," and a comprehensive data recap after a hard workout is incredibly satisfying. We also love the Leveling System (chud to gigachad) and how the visual feedback makes every rep feel like a genuine step toward peak performance.

What we learned

Throughout the development, we learned a significant amount about Computer Vision in the browser. We discovered how powerful MediaPipe is for real-time tracking and how to handle asynchronous camera streams effectively. We also gained experience in creating "intentional chaos" in design—using CSS filters, glow effects, and random positioning to create a premium, high-energy feel.

What's next for Bombastic Workout App

The next steps for the app involve:

Global Leaderboards: Comparing your "gigachad" status with friends. More Exercises: Adding detection for lunges, crunches, and jumping jacks. Sharing your Progress: Adding the option to share your progress and improvements to your friends to keep each other accountable. Custom Soundboards: Allowing users to upload their own audio files to use as rep-counting sound effects.