✨ POSTRA – Real-Time Posture Feedback & Rep Counter in the Browser

💡 What Inspired Us

During the pandemic and beyond, we saw a growing interest in home workouts—but we also noticed a major problem: doing exercises incorrectly without guidance often leads to injuries or poor results. Personal trainers aren’t always accessible, and most fitness apps require wearables, accounts, or backends.

We asked ourselves:

“Can we build a website that watches your workout and gives feedback like a real coach—without installing anything, without servers, and using just a webcam?”

That vision inspired POSTRA—a simple but powerful fitness web app that runs entirely in the browser, detecting your movements in real time and guiding you with visual and voice feedback.

🔨 How We Built It

POSTRA is a 100% front-end project—no backend, no database, no login. Here's what we used:

HTML & CSS: Designed a clean and responsive interface with exercise selection, counters, and visual feedback.
JavaScript: Wrote all logic for pose detection, rep counting, state tracking, and real-time feedback.
TensorFlow.js + MoveNet (SINGLEPOSE_LIGHTNING): Used the webcam to estimate body keypoints (like knees, elbows, shoulders) in real time.
Canvas API: Drew a live skeleton overlay on the screen to visualize your body position.
Web Speech API: Added real-time voice feedback that says things like “Great Squat!” or “Go lower.”
No backend/server: Everything runs locally in your browser, instantly.

We also implemented logic to:

Track reps using motion patterns
Calculate joint angles using vector math
Detect bad posture and give corrective audio feedback

📚 What We Learned

As students, this project was a huge learning experience. We learned how to:

Use pose estimation models (MoveNet) for real-time human motion tracking

Calculate joint angles to detect movement accuracy

Control webcam streams and draw overlays using the Canvas API

Provide live feedback using the Web Speech API

Structure a complete front-end app using vanilla HTML, CSS, and JS

Handle performance optimizations to maintain real-time speed in the browser

We also discovered the power of building fully functional AI applications with no backend—something we didn’t even think was possible before this.

😓 Challenges We Faced

First Time with Web Dev + AI: None of us had used TensorFlow.js or built a real-time web app before. We started from scratch, learning through tutorials, trial and error, and lots of debugging.
Pose Model Integration: Integrating MoveNet was tricky—especially handling async detection, managing frame rates, and dealing with inconsistent keypoints when users moved too fast or went out of frame.
Rep Detection Logic: Creating custom logic for detecting reps (e.g., "down" and "up" in a push-up) was challenging. We had to understand how joints move and calculate angles correctly using trigonometry.
Voice Feedback Timing: Too many voice cues became annoying. We had to implement cooldowns and smarter feedback logic to keep it helpful without overwhelming the user.
No Backend = No Logs: Debugging errors in a fully front-end app meant everything had to be tested and visualized in-browser with no server to rely on.

🏁 Final Thoughts

POSTRA was born out of a simple question:

“Can we build a smart workout coach using just a browser?”

The answer turned out to be yes.

As students, building POSTRA helped us bridge the gap between theory and real-world application. We didn’t just build a fitness app—we built confidence in our ability to solve real problems with code.