Loading Portfolio
Preparing experience...
Workout Library & Routine PlannerProject 02 of 03
FitLog
Dark, High-Performance Workout Companion & Routine Builder
Project Overview
FitLog is a dark-themed, gym-focused web application built to eliminate friction in workout planning. With a clean, athletic aesthetic and high-contrast typography, FitLog features 12+ foundational compound and isolation lifts spanning all major muscle groups, providing detailed timing, estimated calorie burn, and an interactive 'My Plan' builder.
Problem It Solves
Gym-goers frequently experience lack of direction during training sessions, forgetting exercise variations, targeted muscle groups, or estimated set durations. Most workout apps are cluttered with aggressive paywalls, complicated social feeds, and excessive setup. FitLog solves this with an instant, distraction-free companion that lets users pick lifts, plan their session, and get to work.
Verified Technology Stack
All technologies implemented directly within the application and client repository:
Next.jsTypeScriptTailwind CSSWorkout REST APILucide React
Key Implemented Features
Targeted Exercise Library: Curated collection of 12+ foundational exercises spanning Chest, Back, Legs, Shoulders, Arms, and Core.
Comprehensive Workout Metrics: Clear visibility into estimated duration (minutes), expected calorie burn (kcal), and rating scores.
Interactive Plan Builder: Add exercises directly to your custom 'My Plan' with dynamic counter indicators in the navigation bar.
Equipment & Muscle Badges: Immediate tags for required equipment (Barbell, Dumbbells, Pull-up Bar, Bodyweight) and primary/secondary muscle targets.
High-Contrast Athletic Theme: Optimized dark theme with vivid neon lime highlights for easy viewing in harsh gym lighting.
Development Challenges & Solutions
Real hurdles encountered during architecture, state modeling, and implementation:
1Client State Synchronization Across Multiple Views
The Challenge: Keeping the active workout plan count and saved state synchronized between individual workout cards, the header counter, and the dedicated 'My Plan' drawer.
Approach & Solution: Implemented React Context and state persistence patterns to centralize plan items and notify subscribed components whenever items are added or removed.
What I Learned: Mastered global state architecture in React and the nuances of avoiding unnecessary parent re-renders.
2Responsive Media & Layout Stability
The Challenge: Displaying rich photography across varying card sizes without causing Cumulative Layout Shift (CLS) or visual distortion.
Approach & Solution: Applied Next.js Image optimization with defined aspect ratios and object-fit covers, backed by graceful loading skeleton placeholders.
What I Learned: Deepened practical understanding of Core Web Vitals, image preloading, and skeleton loading patterns.
Future Roadmap & Improvements
Planned technical enhancements and product refinements:
1
Live set and repetition counter with built-in rest interval stopwatch and auditory cues.
2
Weekly volume calculator analyzing sets per muscle group to prevent training imbalances.
3
Custom exercise creation with personal notes, form tips, and personal record (PR) tracking.
4
One-click routine export and sharing via URL parameters or PDF summary.