Back to Projects

Wonderful Workouts

A weight-training education platform with a hand-built drag-and-drop routine builder.

FlaskJavaScriptHTML5WeasyPrint

The Problem

Beginners to weight training often lack accessible, structured guidance on proper technique and how to build a program that actually covers the major muscle groups.

The Approach

Built a Flask + vanilla JavaScript app centered on an interactive drag-and-drop routine builder — implemented with native HTML5 drag-and-drop rather than a library — that visually highlights muscle groups as exercises are added, enforces balanced program design before unlocking a knowledge quiz, and exports the finished routine as a PDF.

Wonderful Workouts homepage
The app's homepage.
  • ▹10 hardcoded exercises with real anatomical descriptions (e.g. bench press "targets the pectoralis major... also hits the triceps and front deltoids"), split into upper/lower body
  • ▹drag()/drop() handlers move exercises between a shared pool and two routine lists; a bodyParts map associates each exercise with the muscle group(s) it trains, driving a highlightBodyPart() function that overlays highlighting on front/back body silhouettes

Highlights

  • ▹Hand-built the drag-and-drop routine builder with native HTML5 drag-and-drop events, not a JS library
  • ▹Body-silhouette overlay highlights the specific muscle groups covered as exercises are added to a routine — real interactive UI logic, not a static image
  • ▹Client-side business rule: the quiz stays locked until both routines collectively cover all 4 muscle groups, enforcing balanced program design before letting the user proceed
  • ▹PDF export pipeline via WeasyPrint renders the finished routine to a downloadable PDF — a genuinely non-trivial feature the README doesn't even mention
View on GitHub