Personal Fitness Website

Kostenloser, kontofreier persönlicher Fitness-Tracker, entwickelt mit Next.js 15, Tailwind CSS, Framer Motion und Recharts.

DEMO-LINK

Überblick

• Rolle: Full-Stack Developer & UI/UX Designer
• Stack: Next.js 15, TypeScript, Tailwind CSS v4, shadcn/ui, Framer Motion, Recharts, Vitest, Playwright
• Hauptergebnis: 100 % serverlose, private clientseitige Datenarchitektur ohne Setup-Kosten für eine Datenbank
• Zusammenfassung: Eine kostenlose, kontofreie persönliche Fitness-Plattform mit personalisierten Trainingsplänen, Kalorienzielen, Fortschrittsverfolgung und Ernährungsprotokollierung. Erstellt für den persönlichen Gebrauch, um überladene kommerzielle Dienstprogramme zu umgehen; alle Daten werden ausschließlich im lokalen Speicher des Client-Browsers gespeichert, ohne dass eine Kontoerstellung erforderlich ist.

Das Problem

• Herausforderung: Kommerzielle Fitness-Plattformen verbergen wichtige Tracking-Funktionen (wie benutzerdefinierte Tagesziele, Makronährstoffaufschlüsselungen und Trainingsprotokollierung) hinter teuren Abonnement-Paywalls.
• Zielgruppe: Hauptsächlich für den täglichen persönlichen Gebrauch entwickelt, um eine saubere, die Privatsphäre respektierende und völlig kostenlose Alternative zu kommerziellen Trackern zu haben.
• Einschränkungen: Ohne eine Backend-Datenbank erforderte die Speicherung relationaler Strukturen wie Trainingspläne, aktive Protokolle und benutzerdefinierte Lebensmittel ein zuverlässiges clientseitiges Serialisierungsschema.

Vorgehensweise & Entscheidungen

• Architektur: Local-First-React-SPA-Muster unter Verwendung des Next.js App Routers für die serverseitige Generierung des anfänglichen Layouts und dynamische clientseitige State-Hooks.
• Wichtige Entscheidungen: Verwendung von 8 isolierten Browser-Local-Storage-Schlüsseln, die als einzelne relationale Schema-Tabellen dienen, anstatt eine externe Datenbank zu integrieren.
• Kompromisse: Verzicht auf native geräteübergreifende Synchronisierung zugunsten vollständiger, sofortiger Privatsphäre und null Hosting-Wartungskosten (mit manuellem JSON-Export/-Import als Fallback).
• Datenfluss: Benutzerinteraktion -> React-Hook-State -> localStorage-Synchronisierung -> dynamische UI-Layout-Aktualisierung & Recharts-Visualisierung.

Wichtigste Ergebnisse & Auswirkungen

• Ergebnis: Ein vollständig maßgeschneidertes tägliches Dienstprogramm, das exakt auf meinen eigenen Trainings- und Ernährungsablauf zugeschnitten ist.
• Vergleich: Vermeidet die Paywalls, Anmeldehürden und hohen Abonnementkosten herkömmlicher kommerzieller Tracker.
• Auswirkung: Kommerzielle Kalorien- und Trainings-Tracker für den täglichen persönlichen Gebrauch vollständig ersetzt, wobei alle Gesundheitsmetriken komplett lokal bleiben.

Technischer Deep Dive

• Bemerkenswerte Details: Benutzerdefinierte React-Hooks, die in localStorage serialisierte Daten sicher parsen, um SSR-Diskrepanzen/Hydratisierungsfehler in Next.js zu vermeiden.
• Verifizierung: UI-Ablauf und responsive Layouts über verschiedene Viewport-Größen hinweg mithilfe von Playwright-E2E-Tests verifiziert.
• Optimierungen: Lazy Loading des schweren Recharts-Diagrammmoduls, um das anfängliche Seiten-Bundle leicht zu halten und hohe Google-PageSpeed-Werte sicherzustellen.
• Code-Qualität: Strict-Mode-TypeScript-Kompilierung, pfadbasierte Modul-Aliase und modulare Layout-Architekturen.

Reflexionen

• Anders machen: In einer zukünftigen Iteration würde ich WebRTC-Peer-to-Peer-Datensynchronisierung implementieren, um eine geräteübergreifende Synchronisation zu ermöglichen, ohne persönliche Metriken auf einem Drittanbieter-Server zu speichern.
• Erfolge: Ein ansprechendes, responsives Dashboard mit dunklem Theme unter Verwendung von Tailwind v4 und shadcn/ui bereitgestellt, das sich wie eine native App anfühlt.
• Lektionen: Vertieftes Verständnis für den Umgang mit persistenten Browser-State-Mustern und clientseitigen Datenmigrationsstrategien bei Änderungen von Layout-Schemata.

Meine Beiträge

• Full-Stack Development: Den Onboarding-Fragebogen, personalisierte Planberechnungen, Kalorienprotokollierung und Eingabeformulare für benutzerdefinierte Ernährung mit Next.js 15 entwickelt.
• UI/UX Design: Die Benutzeroberfläche mit dunklem Theme, responsive Grids, interaktive Dashboard-Karten und flüssige Framer-Motion-Animationen gestaltet.
• Architektur & Leistung: Die localStorage-Schlüsselstrategie, Datenvalidierungs-Wrapper und optimierte Diagramm-Rendering-Pipelines entworfen.

Projektarchitektur

Diese Anwendung folgt einer modernen, clientfokussierten modularen Architektur, die auf Next.js 15 aufbaut.

• Geschichtete Struktur: Trennung der reinen Tracking-Logik (benutzerdefinierte Hooks) von visuellen Präsentationskomponenten.
• Funktionsmodule: Logisch nach Funktionen wie Onboarding, Workouts, Ernährungsverfolgung und Fortschrittsdiagrammen organisiert.
• State-Management: React-State-Hooks, die mithilfe benutzerdefinierter Wrapper reaktiv mit der Browser-Speicherschicht synchronisiert werden.
• Refactoring & Verbesserungen: Dynamische Importe für schwere Diagrammbibliotheken implementiert, um die Leistung und die Core Web Vitals zu optimieren.

Demo-Vorschau

• Dashboard-Ansicht: Überblick über die tägliche Kalorienaufnahme, die aktive Trainingsplan-Checkliste und visuelle wöchentliche Fortschrittsdiagramme.
• Trainingsplaner: Ersteller benutzerdefinierter Routinen und Programmauswahl.
• Kalorien-Tracker: Makronährstoff-Tracker mit einer Liste benutzerdefiniert hinzugefügter Lebensmittel.

Hinweis zum Hosting:
Die Live-Anwendung wird auf Vercel bereitgestellt und ist ohne Anmeldung sofort unter pfwfm.vercel.app zugänglich.