// 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.