Personal Fitness Website

Free, no-account personal fitness tracker built with Next.js 15, Tailwind CSS, Framer Motion, and Recharts.

DEMO LINK

Overview

• Role: Full-Stack Developer & UI/UX Designer
• Stack: Next.js 15, TypeScript, Tailwind CSS v4, shadcn/ui, Framer Motion, Recharts, Vitest, Playwright
• Key Result: 100% serverless, private client-side data architecture with zero database setup costs
• Summary: A free, no-account personal fitness platform featuring personalized workout plans, calorie targets, progress tracking, and nutrition logging. Created for personal use to bypass bloated commercial utilities, it stores all data strictly in the client's browser local storage with zero account creation required.

The Problem

• Challenge: Commercial fitness platforms lock essential tracking features (like custom daily goals, macronutrient breakdowns, and workout logging) behind expensive subscription paywalls.
• Audience: Built primarily for personal daily use to have a clean, privacy-respecting, and completely free alternative to commercial trackers.
• Constraints: Without a backend database, storing relational structures like workout plans, active logs, and custom foods required a reliable client-side serialization scheme.

Approach & Decisions

• Architecture: Local-first React SPA pattern leveraging Next.js App Router for server-side generation of initial layout and dynamic client-side state hooks.
• Key Decisions: Employing 8 isolated browser local storage keys to serve as individual relational schema tables instead of integrating an external database.
• Trade-offs: Sacrificed native cross-device synchronization in favor of complete, instant-on privacy and zero hosting upkeep costs (with manual JSON export/import built as a fallback).
• Data Flow: User interaction -> React hook state -> localStorage synchronization -> dynamic UI layout update & Recharts visualization.

Key Results & Impact

• Outcome: A fully customized daily utility tailored exactly to my own workout and nutrition workflow.
• Comparison: Avoids the paywalls, sign-up barriers, and high subscription costs of mainstream commercial trackers.
• Impact: Completely replaced commercial calorie and workout trackers for daily personal use, keeping all health metrics entirely local.

Technical Deep Dive

• Notable Details: Custom React hooks parsing localStorage serialized data safely to avoid SSR mismatches/hydration errors in Next.js.
• Verification: UI flow and responsive layouts verified across viewport sizes using Playwright E2E testing.
• Optimizations: Lazy loading the heavy Recharts charting module to keep the initial page bundle lightweight and ensure high Google PageSpeed scores.
• Code Quality: Strict-mode TypeScript compilation, path-based module aliasing, and modular layout architectures.

Reflections

• Differently: In a future iteration, I would implement WebRTC peer-to-peer data syncing to allow cross-device sync without storing personal metrics on a third-party server.
• Successes: Delivered a beautiful, responsive dark-themed dashboard using Tailwind v4 and shadcn/ui that feels like a native app.
• Lessons: Deepened understanding of handling persistent browser state patterns and client-side data migration strategies when layout schemas change.

My Contributions

• Full-Stack Development: Built the onboarding questionnaire, personalized plan calculations, calorie log tracking, and custom nutrition input forms using Next.js 15.
• UI/UX Design: Crafted the dark-themed user interface, responsive grids, interactive dashboard cards, and fluid Framer Motion animations.
• Architecture & Performance: Designed the localStorage key strategy, data validation wrappers, and optimized chart rendering pipelines.

Project Architecture

This application follows a modern, client-focused modular architecture built on Next.js 15.

• Layered Structure: Separation of raw tracking logic (custom hooks) from visual presentation components.
• Feature Modules: Organized logically by features such as onboarding, workouts, nutrition tracking, and progress charts.
• State Management: React state hooks synchronized Reactively to the browser storage layer using custom wrappers.
• Refactoring & Improvements: Implemented dynamic imports for heavy charting libraries to optimize performance and core web vitals.

Demo Preview

• Dashboard View: Overview of daily calorie intake, active workout plan checklist, and visual weekly progress charts.
• Workout Planner: Custom routine creator and program selector.
• Calorie Tracker: Macronutrient tracker with custom-added foods list.

Hosting Note:
The live application is deployed on Vercel and available to access instantly without signups at pfwfm.vercel.app.