AI-powered boxing workout that turns your phone or laptop into an interactive boxing trainer
Project Type
Web Application
Role
Full-Stack Developer
Timeline
2026
The Vision
BoxGym is a clever fusion of computer vision and gamification that turns your phone or laptop into an interactive boxing trainer. The goal was to have an app that is immediately accessible for all mobile devices in the browser—no app store downloads, no installations, just open and punch.
The implementation leverages modern web APIs (MediaPipe, Web Audio, Canvas) wrapped in a clean React architecture with a custom game state machine to coordinate the workout experience.
What It Does
BoxGym is an AI-powered boxing workout web application that uses your device's camera and machine learning to detect your body movements in real-time.
Live Video Feed
See your live video feed with skeleton pose overlay showing your tracked body positions
Punch Combinations
Follow punch combinations shown as colored circles—red for left punch, blue for right punch
Dodge Mechanics
Dodge incoming gloves by moving your head left or right in real-time
Audio Feedback
Immersive sound design with punch sounds, bells between rounds, and beeps for countdowns
Structured Workouts
Complete structured workouts with multiple rounds and rest periods
Technical Deep Dive
Built with modern web technologies for maximum accessibility and performance
React
UI Framework
Component-based architecture for a clean, maintainable codebase with custom game state machine
MediaPipe Pose
BlazePose Model
Real-time pose detection using Google's ML model running entirely in the browser
TensorFlow.js
ML Runtime
WebGL-accelerated machine learning inference for smooth 30+ FPS pose tracking
In Action
Experience the unique sketched art style combined with modern gameplay mechanics
Menu Screen
Preparation Phase
Active Workout
Key Challenges Solved
Real-time pose detection in browser
Leveraged MediaPipe's BlazePose model with TensorFlow.js WebGL backend to achieve 30+ FPS tracking without native code
Mapping body movements to game mechanics
Developed a custom hit-detection algorithm that calculates punch trajectories and compares them against target zones
Cross-device compatibility
Built responsive canvas rendering that adapts to any screen size while maintaining accurate pose-to-screen coordinate mapping
Audio synchronization
Implemented Web Audio API with pre-loaded sound sprites for instant, lag-free audio feedback
Ready to Try It?
BoxGym is live and ready to turn your device into a boxing trainer. No downloads, no installations—just open and start punching.