UI Framework
React
Component-based architecture for a clean, maintainable codebase with custom game state machine
Case Study
AI-powered boxing workout that turns your phone or laptop into an interactive boxing trainer
ReactMediaPipeTensorFlow.jsWeb AudioCanvas API
No download · Works on any device
Try BoxGym Live →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
BlazePose Model
MediaPipe Pose
Real-time pose detection using Google's ML model running entirely in the browser
ML Runtime
TensorFlow.js
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
1
Real-time pose detection in browser
Leveraged MediaPipe's BlazePose model with TensorFlow.js WebGL backend to achieve 30+ FPS tracking without native code
2
Mapping body movements to game mechanics
Developed a custom hit-detection algorithm that calculates punch trajectories and compares them against target zones
3
Cross-device compatibility
Built responsive canvas rendering that adapts to any screen size while maintaining accurate pose-to-screen coordinate mapping
4
Audio synchronization
Implemented Web Audio API with pre-loaded sound sprites for instant, lag-free audio feedback