// Personal Fitness Website

Personal Fitness Website

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

One-liner summary: Isang libre, walang-account na personal fitness platform na binuo gamit ang Next.js -- personalized workout plans, calorie targets, progress tracking, at nutrition logging, lahat ay naka-imbak nang lokal at walang kailangang sign-up.

Live site: pfwfm.vercel.app

Mga Tampok

• Personalized na workout plans na akma sa profile at mga layunin ng user
• Calorie tracking na may mga naka-save na pagkain at daily logs
• Nutrition logging na may macronutrient breakdowns
• Progress tracking na may mga visual chart (Recharts)
• Onboarding flow na bumubuo ng profile at nagrerekomenda ng mga programa
• Custom workout builder para sa mga personalized na routine
• Full profile export at sharing
• Walang account na kailangan -- lahat ng data ay naka-imbak sa localStorage
• Libre, walang subscription, walang ads

Ang Aking Mga Kontribusyon (Tungkulin at Responsibilidad)

Full-Stack Development:

• Binuo ang buong application gamit ang Next.js 15 App Router na may TypeScript strict mode
• Ipinatupad ang workout planning system na may mga pre-built na programa at custom routines
• Binuo ang calorie at nutrition tracking na may local storage persistence
• Gumawa ng onboarding flow na may step-by-step na profile setup
• Binuo ang progress visualization dashboard gamit ang Recharts

UI/UX Design:

• Dinisenyo ang responsive, mobile-first na layout gamit ang shadcn/ui components
• Ipinatupad ang dark mode support gamit ang next-themes
• Gumawa ng animated landing page at smooth transitions gamit ang Framer Motion
• Bumuo ng reusable component system para sa mga fitness tracking feature

Arkitektura:

• localStorage-based data layer (8 pfw_ keys) -- walang backend na kailangan
• Modular component structure na may feature-specific na mga directory
• Type-safe state management gamit ang TypeScript strict mode
• Spec-driven development na may detalyadong feature specs

Mga Hamon na Kinaharap

• No-backend architecture: Ang pamamahala ng mga kumplikadong relational data (workout plans, logs, nutrition) nang buo sa localStorage ay nangailangan ng maingat na key design at data migration strategies
• Cross-feature consistency: Pagsisiguro na ang mga workout plan, calorie tracking, at progress charts ay lahat tumutukoy sa parehong user profile data nang tama
• Type safety at scale: Pagpapanatili sa TypeScript strict mode sa lumalaking codebase na may localStorage serialization boundaries
• Mobile-first responsive design: Ang mga fitness tracking forms at charts ay kailangang gumana nang maayos sa parehong phone at desktop

Arkitektura ng Proyekto

• Framework: Next.js 15 App Router na may TypeScript 5.x (strict: true)
• UI: shadcn/ui, Tailwind CSS v4, Framer Motion, Lucide icons
• Charts: Recharts v3 (lazy-loaded para sa 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 na may hero section
  • Onboarding flow para i-set up ang profile at mga layunin
  • Dashboard na may workout, nutrition, at progress overview
  • Workout page na may pre-built na mga programa at custom routines
  • Calorie at nutrition tracking na may mga naka-save na pagkain
  • Progress charts at stats

Mga Resource sa Pag-develop

• Mga Guide/Docs:
  • Next.js, shadcn/ui, Tailwind CSS v4, Framer Motion documentation
  • CLAUDE.md sa repo para sa development guidelines

Kung kailangan mo ng karagdagang detalye o gustong makita ang codebase, mangyaring makipag-ugnayan nang direkta sa may-akda.