Personal Fitness Website

Libre, walang-account na personal fitness tracker na ginawa gamit ang Next.js 15, Tailwind CSS, Framer Motion, at Recharts.

DEMO LINK

Buod

• Tungkulin: Full-Stack Developer at UI/UX Designer
• Teknolohiya: Next.js 15, TypeScript, Tailwind CSS v4, shadcn/ui, Framer Motion, Recharts, Vitest, Playwright
• Pangunahing Resulta: 100% serverless, pribadong client-side na data architecture na may zero na gastos sa pag-setup ng database
• Paglalarawan: Isang libre, walang-account na platform para sa personal fitness na nagtatampok ng mga customized na workout plan, target na calories, pagsubaybay sa progreso, at nutrition logging. Nilikha para sa personal na paggamit upang maiwasan ang mga mabibigat na commercial na app, itinatago nito ang lahat ng data nang mahigpit sa browser local storage ng user nang hindi kinakailangan ang paggawa ng account.

Ang Problema

• Hamon: Hinaharangan ng mga commercial fitness platform ang mga mahahalagang feature para sa tracking (tulad ng mga custom na pang-araw-araw na layunin, macronutrient breakdowns, at workout logging) sa likod ng mamahaling subscription paywalls.
• Audience: Pangunahing ginawa para sa personal na pang-araw-araw na paggamit upang magkaroon ng malinis, gumagalang sa privacy, at ganap na libreng alternatibo sa mga commercial trackers.
• Mga Limitasyon: Dahil walang backend database, kinakailangan ang isang maaasahang client-side serialization scheme para sa pag-iimbak ng mga relational structures tulad ng mga workout plan, active logs, at custom na pagkain.

Diskarte at mga Desisyon

• Arkitektura: Local-first na React SPA pattern na gumagamit ng Next.js App Router para sa server-side generation ng inisyal na layout at dynamic na client-side state hooks.
• Pangunahing Desisyon: Gumamit ng 8 magkahiwalay na browser local storage keys na nagsisilbing indibidwal na relational schema tables sa halip na mag-integrate ng external na database.
• Mga Trade-off: Isinakripisyo ang native cross-device synchronization pabor sa kumpleto, instant na privacy at kawalan ng gastos sa pagpapanatili ng hosting (na may manual JSON export/import bilang fallback).
• Daloy ng Data: Interaksyon ng user -> React hook state -> localStorage synchronization -> dynamic UI layout update at Recharts visualization.

Pangunahing Resulta at Epekto

• Kinalabasan: Isang ganap na customized na pang-araw-araw na utility na iniakma nang eksakto sa aking sariling workout at nutrition workflow.
• Paghahambing: Iniiwasan ang mga paywall, hadlang sa pag-sign up, at matataas na gastos sa subscription ng mga kilalang commercial trackers.
• Epekto: Ganap na napalitan ang mga commercial calorie at workout trackers para sa pang-araw-araw na personal na paggamit, habang pinapanatiling lokal ang lahat ng health metrics.

Malalimang Teknikal na Detalye

• Mahahalagang Detalye: Custom React hooks para sa ligtas na pag-parse ng localStorage serialized data upang maiwasan ang mga mismatch sa SSR at hydration errors sa Next.js.
• Pag-verify: Na-verify ang UI flow at responsive layouts sa iba't ibang laki ng screen gamit ang Playwright E2E testing.
• Mga Optimization: Lazy loading para sa mabigat na Recharts module upang panatilihing magaan ang initial page bundle at matiyak ang matataas na marka sa Google PageSpeed.
• Kalidad ng Code: Strict-mode TypeScript compilation, path-based module aliasing, at modular na layout architectures.

Mga Pagninilay

• Kakaibang Gagawin: Sa susunod na iterasyon, ipapatupad ko ang WebRTC peer-to-peer data syncing upang mapahintulutan ang cross-device sync na hindi nagse-save ng personal metrics sa isang third-party server.
• Mga Tagumpay: Matagumpay na naihatid ang isang maganda, responsive, dark-themed na dashboard gamit ang Tailwind v4 at shadcn/ui na parang isang native app.
• Mga Natutunan: Mas napalalim ang pag-unawa sa paghawak ng persistent browser state patterns at mga estratehiya sa data migration sa client-side kapag nagbago ang mga layout schema.

Mga Kontribusyon

• Full-Stack Development: Binuo ang onboarding questionnaire, mga kalkulasyon para sa personalized na plano, calorie log tracking, at custom nutrition input forms gamit ang Next.js 15.
• UI/UX Design: Dinisenyo ang dark-themed na user interface, responsive grids, interactive dashboard cards, at tuluy-tuloy na Framer Motion animations.
• Arkitektura at Pagganap: Idinisenyo ang estratehiya para sa localStorage key, data validation wrappers, at na-optimize na proseso sa pag-render ng chart.

Arkitektura ng Proyekto

Ang application na ito ay sumusunod sa isang moderno at client-focused modular architecture na ginawa gamit ang Next.js 15.

• Estrukturang May mga Layer: Pinaghiwalay ang raw tracking logic (custom hooks) mula sa visual presentation components.
• Feature Modules: Lohikal na nakaayos ayon sa mga tampok gaya ng onboarding, workouts, nutrition tracking, at progress charts.
• Pamamahala ng Estado (State Management): Ang React state hooks ay tumutugon sa pagsi-sync sa browser storage layer gamit ang mga custom wrappers.
• Refactoring at Pagpapabuti: Ipinatupad ang mga dynamic imports para sa mabibigat na charting libraries upang ma-optimize ang performance at core web vitals.

Preview ng Demo

• Dashboard View: Buod ng pang-araw-araw na pag-intake ng calorie, checklist para sa active workout plan, at visual na lingguhang progress charts.
• Workout Planner: Custom routine creator at program selector.
• Calorie Tracker: Macronutrient tracker na may listahan ng mga inilagay na custom na pagkain.

Hosting Note:
Naka-deploy sa Vercel at madaling ma-access kaagad ang application nang walang pag-sign up sa pfwfm.vercel.app.