Volex Case Study (DEV.to Winner) — Workout Tonnage Engine

Overview & Official Recognition

Volex (Volume by Exercise) is a fitness tracking web application built for calculating workout volume ($Volume = Weight \times Reps \times Sets$) across exercise categories. It won top honors in the official DEV.to April Fools Developer Challenge.

DEV.to Winner Announcement Live Demo App DEV.to Article & Video

💪 Problem & Motivation

Most gym tracking apps require complex account signups and suffer from cluttered ad-heavy interfaces. Volex was built to provide instant volume calculations with zero login overhead.

⚡ Performance & Privacy

Built using 100% vanilla JavaScript with zero framework dependencies. All data is persisted locally in the browser using IndexedDB, guaranteeing 100% data privacy and offline readiness during workouts.

🏗️ Data Flow & Architecture

┌─────────────────┐ ┌───────────────────────┐ ┌──────────────────────┐ │ Workout Set │ ────► │ Real-Time Math │ ────► │ IndexedDB Storage │ │ Input (Weight/R)│ │ (Volume Calculation) │ │ (Local Logs) │ └─────────────────┘ └───────────────────────┘ └──────────┬───────────┘ │ ┌─────────────────┐ │ │ Muscle Group │ ◄────────────────────────────────────────────────┘ │ Tonnage Display │ └─────────────────┘

Dynamic Tonnage Math: Computes volume totals per muscle group instantly.
IndexedDB Storage: Browser-native database for workout log persistence.
Mobile-First UI: Large touch-friendly input fields designed for gym phone usage.

⚖️ Trade-offs

Trade-off: Using vanilla HTML/CSS/JS without React or Vue reduces bundle size to nearly zero, but requires writing custom DOM manipulation state logic.

💡 Lessons Learned

1. Building zero-dependency web utilities creates instantly loading apps that work everywhere.
2. User experience shines when software focuses on doing one task exceptionally well.

📌 Planned Improvements

Planned Export workout data to CSV / JSON files.
Planned Progressive overload visual charts over time.