FitLog — Train With Intent. Log Every Set.

FitLog is a modern fitness web application crafted to streamline workout discovery, training session organization, and routine tracking. Designed specifically for active lifters and gym-goers who value speed, simplicity, and visual clarity, FitLog eliminates the unnecessary friction commonly found in mainstream fitness software.

Rather than burdening users with multi-step onboarding surveys, paywalls, or cluttered social feeds, FitLog presents an immediate, responsive gym companion: users can browse an organized exercise library across all major muscle groups, inspect target execution metrics, lock exercises into their personal daily training plan ("My Plan"), and monitor their session's progress in real time.

Most commercial fitness and gym-logging mobile applications suffer from three common practical flaws:

• Over-engineered sign-up flows: Users are forced through intrusive personal data questionnaires and subscription paywalls before they can even review an exercise.
• Heavy, slow client interfaces: Bloated frameworks and third-party trackers slow down screen transitions during active rest intervals between sets.
• Poor gym-floor usability: Bright white interfaces cause excessive glare in dim workout studios and drain mobile battery rapidly during extended training sessions.

FitLog addresses these practical issues directly by prioritizing instant client-side responsiveness, dark-mode ergonomics, and zero-distraction routine builders.

As the sole engineer and UI designer on the project, I was responsible for the end-to-end realization of FitLog:

• Information Architecture & UI Design: Developed the visual identity, dark color system, typographic hierarchy, and responsive layout guidelines.
• Next.js 16 App Router Setup: Structured client and server components, layout wrappers, and dynamic routing patterns.
• State & Planning Engine: Engineered reactive workout state for adding exercises to the daily plan, tracking total sets, and managing bookmark states.
• Styling & Performance Tuning: Implemented Tailwind CSS 4 utility classes, optimized high-resolution WebP workout imagery, and verified layout shift stability.
• Production Deployment: Configured edge build pipeline and deployed on Vercel with clean URL routing.

The aesthetic direction of FitLog reflects modern athletic performance: clean, bold, purposeful, and intense. High contrast ensures readability when a device rests on a gym bench or workout machine.

Typography leverages clean, geometric sans-serif type with heavy uppercase headings ("TRAIN WITH INTENT. LOG EVERY SET.") that emulate athletic equipment branding, balanced by generous letter-spacing on sub-labels.

Inspection of the codebase confirms the following technology choices and architectural standards:

• Next.js 16 (App Router): Leverages modern server-rendered shells with client components mounted where user interaction is mandatory (sorting, planner toggles).
• React 19: Utilizes React 19 hooks and optimistic updates for instantaneous plan counter updates when locking in lifts.
• TypeScript 5: Strict interface contracts defined for workout items (id, name, muscleGroup, duration, sets, image, difficulty).
• Tailwind CSS 4: Latest generation Tailwind engine for high-speed style computation, custom neon utility classes, and zero CSS runtime overhead.
• Lucide React Icons: Vector iconography tailored for fitness metrics (dumbbell, timer, calendar, heart rate).
• Vercel Edge Network: Hosted with global asset caching, achieving lightning-fast initial content loads.

FitLog adapts dynamically across screen viewports:

• Mobile Viewport (< 640px): Single-column card layout with large 48px touch targets, sticky bottom action bar, and full-width exercise previews.
• Tablet Viewport (640px – 1024px): Two-column grid with side-by-side metric badges and collapsible filter toggles.
• Desktop Viewport (> 1024px): Expanded multi-column library, persistent header metrics pill, and rich hover overlays.

Challenge: Maintaining Instant Client Interactivity Without Heavy External Libraries.
Many routine trackers bundle heavy state management libraries like Redux or complex backend databases, introducing significant bundle overhead.

Solution: FitLog uses React 19's native state primitives with modular custom hooks, keeping the client bundle ultra-lean (< 75KB compressed) while providing instant feedback when toggling plan items.

Challenge: Image Loading Performance on Cellular Gym Networks.
High-resolution exercise renders can cause noticeable layout shift on patchy gym Wi-Fi or cellular connections.

Solution: Configured Next.js image optimization with explicit aspect ratio bounding boxes and priority loading for above-the-fold exercise cards.

FitLog demonstrated the power of deliberate restraint in digital product design: by stripping away intrusive telemetry, ads, and convoluted sign-up barriers, the user experience becomes fluid, delightful, and immediate.

Building with Next.js 16 and Tailwind CSS 4 reinforced modern web standards: lightning-quick builds, clean declarative component boundaries, and high-performance dark mode interfaces that stand out in any professional web developer portfolio.