BoxingWiki
Interactive technique library and learning portal for fight training. Deployed on Vercel. Built with React, featuring an interactive SVG muscle map, automated workout generator, and gamified retention mechanics.
Overview
Conceived, built, and deployed BoxingWiki to fill the void of specialized interactive fighting resources. Built using React, TypeScript, and Vite, and deployed to Vercel. Key features and gamification loops implemented: • Gamified Engagement (Octalysis Framework): Designed the core user loop based on Yu-kai Chou's gamification model. Leveraged Core Drive 2 (Development & Accomplishment) via custom daily streaks, and Core Drive 4 (Ownership & Possession) through customized, persistent favorites lists to drive consistent daily training behavior. • Clickable Muscle Map: Created a responsive SVG interactive human map matching specific muscle regions to the 60+ techniques that utilize them. • Heavy Bag Generator: Built a customizable boxing round timer and combination generator with text-to-speech voice cues. • Stance Mirroring: Implemented a Southpaw mode that dynamically swaps image orientations and instructions for left-handed fighters. • SEO Optimization: Built index-ready static layouts with rich structured JSON-LD schemas for all 60+ technique pages.
Gallery