Site Web de Fitness Personnel

Un outil de suivi de fitness personnel gratuit et sans compte, conçu avec Next.js 15, Tailwind CSS, Framer Motion et Recharts.

LIEN DÉMO

Aperçu

• Rôle : Développeur Full-Stack & Designer UI/UX
• Stack : Next.js 15, TypeScript, Tailwind CSS v4, shadcn/ui, Framer Motion, Recharts, Vitest, Playwright
• Résultat clé : Architecture de données côté client 100 % serverless et privée, avec zéro coût de configuration de base de données
• Résumé : Une plateforme de fitness personnel gratuite et sans compte, comprenant des programmes d'entraînement personnalisés, des objectifs caloriques, un suivi de progression et un journal de nutrition. Créé pour un usage personnel afin d'éviter les services commerciaux surchargés, il stocke toutes les données strictement dans le stockage local (local storage) du navigateur de l'utilisateur, sans aucune création de compte requise.

Le Problème

• Défi : Les plateformes de fitness commerciales verrouillent les fonctionnalités de suivi essentielles (comme les objectifs quotidiens personnalisés, la répartition des macronutriments et le journal d'entraînement) derrière des abonnements payants et coûteux.
• Public : Conçu principalement pour un usage quotidien personnel afin de disposer d'une alternative propre, respectueuse de la vie privée et entièrement gratuite aux outils de suivi commerciaux.
• Contraintes : Sans base de données backend, le stockage de structures relationnelles comme les programmes d'entraînement, les journaux actifs et les aliments personnalisés nécessitait un schéma de sérialisation côté client fiable.

Approche & Décisions

• Architecture : Modèle React SPA "local-first" exploitant le Next.js App Router pour la génération côté serveur de la mise en page initiale et des hooks d'état dynamiques côté client.
• Décisions clés : Utilisation de 8 clés de stockage local isolées pour servir de tables de schéma relationnel individuelles, plutôt que d'intégrer une base de données externe.
• Compromis : Synchronisation native multi-appareils sacrifiée au profit d'une confidentialité totale et instantanée et de zéro coût de maintenance d'hébergement (avec l'export/import JSON manuel intégré comme solution de repli).
• Flux de données : Interaction de l'utilisateur -> État du hook React -> Synchronisation localStorage -> Mise à jour dynamique de l'interface utilisateur & Visualisation Recharts.

Résultats Clés & Impact

• Résultat : Un utilitaire quotidien entièrement personnalisé et adapté exactement à ma propre routine d'entraînement et de nutrition.
• Comparaison : Évite les abonnements payants, les barrières d'inscription et les coûts d'abonnement élevés des outils de suivi commerciaux grand public.
• Impact : A complètement remplacé les trackers commerciaux de calories et d'entraînement pour mon usage personnel quotidien, en conservant toutes les mesures de santé entièrement locales.

Zoom Technique

• Détails notables : Hooks React personnalisés analysant en toute sécurité les données sérialisées du localStorage pour éviter les erreurs d'hydratation/décisions SSR contradictoires dans Next.js.
• Vérification : Flux d'interface utilisateur et mises en page adaptatives vérifiés sur différentes tailles d'écran grâce à des tests E2E avec Playwright.
• Optimisations : Chargement différé (lazy loading) du module graphique lourd Recharts pour maintenir la légèreté du bundle initial et garantir des scores élevés sur Google PageSpeed.
• Qualité du code : Compilation TypeScript en mode strict, alias de modules basés sur le chemin (path-based aliases), et architectures de mise en page modulaires.

Réflexions

• Différemment : Dans une future itération, j'implémenterais une synchronisation de données en pair-à-peer (peer-to-peer) via WebRTC pour permettre la synchronisation multi-appareils sans stocker de données personnelles sur un serveur tiers.
• Succès : Création d'un magnifique tableau de bord sombre et adaptatif utilisant Tailwind v4 et shadcn/ui qui offre le ressenti d'une application native.
• Leçons : Compréhension approfondie de la gestion des états persistants du navigateur et des stratégies de migration des données côté client lorsque les schémas de mise en page évoluent.

Mes Contributions

• Développement Full-Stack : Création du questionnaire d'intégration, des calculs de programmes personnalisés, du suivi du journal des calories et des formulaires de saisie de nutrition personnalisés à l'aide de Next.js 15.
• Design UI/UX : Conception de l'interface utilisateur en mode sombre, des grilles adaptatives, des cartes de tableau de bord interactives et des animations fluides avec Framer Motion.
• Architecture & Performance : Conception de la stratégie des clés localStorage, des wrappers de validation de données et des pipelines optimisés pour le rendu des graphiques.

Architecture du Projet

Cette application suit une architecture modulaire moderne et centrée sur le client, construite sur Next.js 15.

• Structure en couches : Séparation de la logique brute de suivi (hooks personnalisés) des composants de présentation visuelle.
• Modules de fonctionnalités : Organisation logique par fonctionnalités telles que l'intégration, les entraînements, le suivi de la nutrition et les graphiques de progression.
• Gestion de l'état : Hooks d'état React synchronisés de manière réactive avec la couche de stockage du navigateur à l'aide de wrappers personnalisés.
• Refactoring & Améliorations : Implémentation d'importations dynamiques pour les bibliothèques de graphiques lourdes afin d'optimiser les performances et les Core Web Vitals.

Aperçu de la Démo

• Vue du Tableau de Bord : Aperçu de l'apport calorique quotidien, liste de contrôle du programme d'entraînement actif et graphiques visuels des progrès hebdomadaires.
• Planificateur d'Entraînement : Créateur de routines personnalisées et sélecteur de programmes.
• Suivi des Calories : Suivi des macronutriments avec liste d'aliments personnalisés ajoutés.

Note d'Hébergement :
L'application en direct est déployée sur Vercel et accessible instantanément sans inscription à l'adresse pfwfm.vercel.app.