Personal fitness tracking system centered on an interactive body visualization — track measurements, workouts, strength benchmarks, and flexibility linked to body parts

View full project →
Testing
V1 Body Tracking
54%
COMPLETE
ConceptPrototypeTestingProductionMature
Interactive SVG body silhouette
Custom SVG human silhouette with 13 clickable body part regions
Click-to-select body parts
Clicking a `.body-part` SVG element triggers `onPartClick(part)` callback, op...
Hover visual feedback
Mouseenter on body parts brightens fill via CSS `filter: brightness(1.3)` and...
Color-coded measurement status
Unmeasured body parts render in dark gray (SVG default)
Measurement value tooltips
Hover shows a positioned tooltip (#tooltip element) with body part label and ...
Measurement recording
Enter circumference in cm via numeric input (step=0.1, min=0)
Measurement input panel
Side panel (320px wide, dark theme) opens on body part click
Measurement history display
Loads up to 50 historical measurements per body part via GET `/api/measuremen...
Current measurement display
Panel shows the most recent measurement prominently (1.5rem, bold, blue #7c8a...
REST API endpoints
Three endpoints: `GET /api/measurements` (all latest per body part), `GET /ap...
Exercise modelsWorkout loggingExercise-to-body-part mappingWorkout logging UIBody part workout statsMeasurement trend chartsWorkout volume trackingTraining frequency heatmapUndertrained areas overview
Strength metric models · Per-body-part strength tracking · Personal records display · Strength progression charts · Flexibility measurement models