System Settings

Language Selection

Navigation

HomeBack to PROJECTS

SYSTEM_SECURE // FPGD

System Settings
--:--:--
Navigation // ONLINE
Personal Fitness Website - Free Workouts & Calorie Tracker

// Personal Fitness Website

Personal Fitness Website

Fitness Web App / Next.js / Workout Planning / Calorie Tracking

One-liner summary: A free, no-account personal fitness platform built with Next.js -- personalized workout plans, calorie targets, progress tracking, and nutrition logging, all stored locally with zero sign-up required.

Live site: pfwfm.vercel.app

Features

  • Personalized workout plans tailored to user profile and goals
  • Calorie tracking with saved foods and daily logs
  • Nutrition logging with macronutrient breakdowns
  • Progress tracking with visual charts (Recharts)
  • Onboarding flow that builds a profile and recommends programs
  • Custom workout builder for personalized routines
  • Full profile export and sharing
  • No account required -- all data stored in localStorage
  • Free, no subscription, no ads

My Contributions (Role & Responsibilities)

Full-Stack Development:

  • Built the entire application using Next.js 15 App Router with TypeScript strict mode
  • Implemented workout planning system with pre-built programs and custom routines
  • Developed calorie and nutrition tracking with local storage persistence
  • Created onboarding flow with step-by-step profile setup
  • Built progress visualization dashboard with Recharts

UI/UX Design:

  • Designed responsive, mobile-first layout with shadcn/ui components
  • Implemented dark mode support with next-themes
  • Created animated landing page and smooth transitions with Framer Motion
  • Developed reusable component system for fitness tracking features

Architecture:

  • localStorage-based data layer (8 pfw_ keys) -- no backend required
  • Modular component structure with feature-specific directories
  • Type-safe state management with TypeScript strict mode
  • Spec-driven development with detailed feature specs

Challenges Faced

  • No-backend architecture: Managing complex relational data (workout plans, logs, nutrition) entirely in localStorage required careful key design and data migration strategies
  • Cross-feature consistency: Ensuring workout plans, calorie tracking, and progress charts all reference the same user profile data correctly
  • Type safety at scale: Keeping TypeScript strict mode happy across a growing codebase with localStorage serialization boundaries
  • Mobile-first responsive design: Fitness tracking forms and charts needed to work seamlessly on both phone and desktop

Project Architecture

  • Framework: Next.js 15 App Router with TypeScript 5.x (strict: true)
  • UI: shadcn/ui, Tailwind CSS v4, Framer Motion, Lucide icons
  • Charts: Recharts v3 (lazy-loaded for performance)
  • Data Layer: Browser localStorage (8 keys: profile, active program, workout logs, progress, nutrition, calorie logs, saved foods, custom workouts)
  • Hooks: usehooks-ts (useLocalStorage), custom hooks
  • Testing: Playwright (E2E), Vitest (unit)
  • Deployment: Vercel

Demo Preview

  • Live Site: pfwfm.vercel.app
  • Platform Views: Web (responsive, mobile-first)
  • Functionality Shown:
    • Landing page with hero section
    • Onboarding flow to set up profile and goals
    • Dashboard with workout, nutrition, and progress overview
    • Workout page with pre-built programs and custom routines
    • Calorie and nutrition tracking with saved foods
    • Progress charts and stats

Development Resources

  • Guides/Docs:
    • Next.js, shadcn/ui, Tailwind CSS v4, Framer Motion documentation
    • CLAUDE.md in repo for development guidelines

If you need further details or want to see the codebase, please contact the author directly.

SCROLL ↓