Fizzzio

User Authentication
Buzzboard Page
Logzz page
Featured Programs
AI Posture Guide
Recovery Map Page

Inspiration

The CDC reports that up to 20% of the annual average of 8.6 million sports injuries is due to improper technique. Despite growing awareness around injury prevention, most fitness apps still treat form and posture as an afterthought.

Our team comes from diverse backgrounds, each with different relationships to fitness, injury, and access to coaching. What if a fitness app told you not just how many calories you burned, but whether your squat depth or core alignment was about to hurt you? And so, Fizzzio was born.

What it does

Fizzzio tracks your physical activity: logging every workout, sport, stretch, and casual movement against your personal streak and weekly goals.

At the heart of the experience is Fizzz Coach, a real-time AI posture guide powered by Google's MediaPipe Pose Landmarker, that watches your squat depth, hip alignment, and core stability live through your webcam and tells you exactly what to fix in the moment. Before you finish a rep, simply step into the frame and let the AI analyze your joint angles in real time, complete with live progress bars, alignment scores, and a running coaching feed: tracking knee flexion, torso tilt, and core neutrality so you can move smarter and safer.

A real-time Buzzboard tracks your active minutes, calories, and Fizzness Score ~ showing exactly how balanced your training is across cardio, flexibility, strength, and recreation. Every workout is logged in your Logzz history, and every consistent day builds your Streakzzz. Move well. Feel good.

How we built it

We developed Fizzzio as a full-stack web application using HTML, CSS, and JavaScript ES modules on the frontend, MediaPipe Tasks Vision for on-device pose detection, and Flask with SQLite on the backend (deployed end-to-end on Netlify and Render).

Our process began with the dashboard and activity logging system: a hand-built canvas chart engine drawing the line and radar charts directly with cubic Bézier curves, gradient fills, and device-pixel-ratio scaling, with no charting library involved. Built from scratch, each chart animates in real time as activities are logged, with calorie estimates auto-calculated from duration, intensity, and category.

We spent significant time on the Posture AI Guide, replacing an initial sine-wave skeleton simulation with real pose detection powered by Google's MediaPipe Pose Landmarker (BlazePose), grounding every joint position in 33 actual body landmarks detected live from the webcam feed. Even with the model returning accurate landmarks, raw coordinates alone don't tell you anything about form. So we built an angle-detection layer that runs after every frame: recomputing real joint angles using atan2 trigonometry, the same math used in clinical biomechanics analysis.

$$Knee Flexion Angle = angle(hip, knee, ankle)$$ $$Hip-Torso Tilt = angle(shoulder, hip, knee)$$ $$Core Neutral Angle = angle(shoulder, hip, ankle)$$

Central to our engineering was a full authentication and persistence layer built with Flask and SQLite. Every action in the app ~ registration, login, activity logging, streak calculation, notification state ~ is recorded and tracked in a real per-user database, with hashed passwords and signed session cookies. That same rigor extends into the deployment itself: a manually-written CORS layer and carefully configured SameSite=None; Secure cookies make the cross-origin handshake between our Netlify frontend and Render backend actually work in production.

The final touch was the Recovery Body Map, where every muscle group is logged with real stretch protocols, hold durations, and sport-specific injury-prevention guidance grounded in physical therapy research.

The result is Fizzzio: an activity tracker backed by a real AI posture coach for smarter, safer movement.

Challenges we ran into

Our biggest technical challenge was the custom chart engine. Getting Bézier curves to render smoothly across different screen sizes, implementing proper device pixel ratio scaling so charts don't look blurry on retina displays, and coordinating animation frames across two canvases simultaneously all took far longer than anticipated. We rewrote the rendering pipeline twice before the output felt right.

Cross-origin authentication was another significant hurdle. Running a Netlify frontend against a Render backend means the session cookie crosses origins, and browsers are increasingly strict about this. Getting SameSite=None; Secure cookies to transmit correctly, writing CORS preflight handling without a library, and testing the full auth flow across environments required careful reading of browser specifications and a lot of failed attempts before it clicked.

Finally, designing the Posture AI Guide required rebuilding the entire detection pipeline from scratch. We integrated Google's MediaPipe Pose Landmarker to run real on-device pose detection instead, which meant learning the 33-point landmark index system, figuring out the coordinate mirroring needed to match a flipped video element, and feeding live joint positions through the same angle-detection trigonometry a physical therapist would use to assess squat depth or core alignment. Facing this hackathon as beginners, we feel challenged to learn beyond our limits and to persist in providing a better user experience!

Accomplishments that we're proud of

One of our proudest achievements is building something with a real impact. Fizzzio reimagines fitness tracking not as a static logging tool, but as an active movement coach ~ giving users real-time feedback on their squat depth, hip alignment, or core stability the moment their form drifts, using nothing but the camera already built into their laptop. The idea that someone could open our app, step in front of their webcam, and have their actual joint angles analyzed and coached against is the kind of creative ambition we set out with from day one, and we're proud we actually built it.

Our dedication to making the Posture AI Guide honest rather than just convincing meant rebuilding the entire detection pipeline once we realized our first version was simulating intelligence instead of providing it. That decision cost us real time, but it ensured Fizzzio remains a tool people can actually trust to reflect what their body is doing, not a demo that only looks impressive in a pitch.

Lastly, we are proud of our commitment to making Fizzzio a real, working, deployed application rather than a local prototype. We gave users genuine multi-user accounts, persistent activity history, and a live posture-coaching feature backed by actual on-device computer vision: from the Flask backend handling authentication, to the MediaPipe model running real inference, to the full Render-and-Netlify deployment anyone can visit and use today. We confirmed this by testing the complete registration, login, and live tracking flow ourselves end-to-end.

What we learned

Building Fizzzio from the ground up provided a level of learning that extended far beyond the classroom. As high school students entering full-stack and applied machine learning development for the first time, every milestone was achieved through persistence, experimentation, and continuous iteration. Countless hours spent rewriting our canvas rendering pipeline, tuning device pixel ratio scaling, and learning how MediaPipe's landmark coordinate system actually behaved under a mirrored video feed gave us a deep, practical understanding of how visual and computer vision systems are really built.

Working across two separate hosting environments presented another valuable learning experience. From configuring environment variables and managing CORS allow-lists to getting Flask, SQLite, and a deployed Render backend to actually trust a Netlify frontend, we gained firsthand exposure to the challenges and best practices of modern web infrastructure.

Integrating MediaPipe's Pose Landmarker introduced us to a critical aspect of applied AI: the gap between something that looks intelligent and something that actually is. By replacing our original sine-wave skeleton simulation with real on-device pose detection, we learned that responsible AI-powered features extend beyond a convincing demo; they require the underlying system to genuinely do what it claims, even when faking it would have been easier and gone unnoticed.

Most importantly, building the Recovery Body Map's muscle and injury database for real users instilled a strong sense of responsibility. Knowing that someone might actually follow our stretch instructions or trust our posture feedback motivated us to ground every detail in real physiological research rather than convenient guesses. Facing this hackathon as beginners, we feel challenged to learn beyond our limits and to persist in building tools people can genuinely rely on to move and feel better.

What's next for Fizzzio

Fizzzio is just getting started. Our vision is a fitness platform that genuinely understands you ~ not just your reps, but your recovery, your patterns, and your trajectory. Here's where we're headed:

Enhanced Intelligence:

AI Movement Coach: A conversational agent that reads your activity history, spots imbalances in your radar chart, and proactively suggests what to work on next.
Personalized Recovery Routing: Rather than a static muscle database, the body map will learn which muscle groups you stress most and surface the most relevant stretches automatically after each workout.

Technical Improvements:

Google / Apple Sign-In: Removing the friction of email registration so your streak, history, and recovery data follow you instantly across devices.
Expanded Activity Types: Broader sport and movement categories, including swimming, martial arts, and mobility work, each with tailored recovery guidance.
Wearable Integration: Pulling heart rate and session data directly from Apple Health and Google Fit, so logging becomes automatic rather than manual.
Progress Reports: Exportable weekly summaries (charts, streaks, balance scores) that give users a tangible record of their consistency over time.

Expansion into New Use Cases: We see Fizzzio growing into a team and coaching platform: enabling trainers to monitor athlete load, balance, and recovery across an entire roster. Scaling from individual accountability to collective performance is the natural next step, and it's a direction we're genuinely excited to build toward.