// Site Web de Fitness Personnel

Site Web de Fitness Personnel

App Web de Fitness / Next.js / Planification d'Entraînement / Suivi des Calories

Résumé en une ligne : Une plateforme de fitness personnelle gratuite et sans compte construite avec Next.js -- plans d'entraînement personnalisés, objectifs caloriques, suivi des progrès et journal de nutrition, le tout stocké localement sans inscription requise.

Site en direct : pfwfm.vercel.app

Fonctionnalités

• Plans d'entraînement personnalisés adaptés au profil et aux objectifs de l'utilisateur
• Suivi des calories avec aliments enregistrés et journaux quotidiens
• Journal de nutrition avec répartition des macronutriments
• Suivi des progrès avec des graphiques visuels (Recharts)
• Flux d'intégration qui crée un profil et recommande des programmes
• Constructeur d'entraînement personnalisé pour des routines sur mesure
• Exportation et partage complet du profil
• Aucun compte requis -- toutes les données sont stockées dans le localStorage
• Gratuit, sans abonnement, sans publicité

Mes Contributions (Rôle et Responsabilités)

Développement Full-Stack :

• Construction de l'intégralité de l'application en utilisant Next.js 15 App Router avec le mode strict TypeScript
• Mise en œuvre du système de planification d'entraînement avec des programmes pré-construits et des routines personnalisées
• Développement du suivi des calories et de la nutrition avec persistance dans le stockage local
• Création du flux d'intégration avec configuration du profil étape par étape
• Construction du tableau de bord de visualisation des progrès avec Recharts

Design UI/UX :

• Conception d'une mise en page responsive et mobile-first avec les composants shadcn/ui
• Mise en œuvre du support du mode sombre avec next-themes
• Création d'une page d'accueil animée et de transitions fluides avec Framer Motion
• Développement d'un système de composants réutilisables pour les fonctionnalités de suivi de fitness

Architecture :

• Couche de données basée sur le localStorage (8 clés pfw_) -- aucun backend requis
• Structure de composants modulaire avec des répertoires spécifiques aux fonctionnalités
• Gestion d'état type-safe avec le mode strict TypeScript
• Développement piloté par les spécifications avec des specs de fonctionnalités détaillées

Défis Rencontrés

• Architecture sans backend : La gestion de données relationnelles complexes (plans d'entraînement, journaux, nutrition) entièrement dans le localStorage a nécessité une conception minutieuse des clés et des stratégies de migration de données
• Cohérence entre les fonctionnalités : S'assurer que les plans d'entraînement, le suivi des calories et les graphiques de progrès font tous référence correctement aux mêmes données de profil utilisateur
• Sécurité des types à grande échelle : Maintenir le mode strict TypeScript sur une base de code croissante avec les limites de sérialisation du localStorage
• Design responsive mobile-first : Les formulaires et graphiques de suivi de fitness devaient fonctionner de manière fluide sur téléphone et sur ordinateur

Architecture du Projet

• Framework : Next.js 15 App Router avec TypeScript 5.x (strict : true)
• UI : shadcn/ui, Tailwind CSS v4, Framer Motion, icônes Lucide
• Graphiques : Recharts v3 (chargement différé pour la performance)
• Couche de Données : localStorage du navigateur (8 clés : profil, programme actif, journaux d'entraînement, progrès, nutrition, journaux de calories, aliments enregistrés, entraînements personnalisés)
• Hooks : usehooks-ts (useLocalStorage), hooks personnalisés
• Tests : Playwright (E2E), Vitest (unité)
• Déploiement : Vercel

Aperçu de la Démo

• Site en direct : pfwfm.vercel.app
• Vues Plateforme : Web (responsive, mobile-first)
• Fonctionnalités Présentées :
  • Page d'accueil avec section héros
  • Flux d'intégration pour configurer le profil et les objectifs
  • Tableau de bord avec aperçu de l'entraînement, de la nutrition et des progrès
  • Page d'entraînement avec programmes pré-construits et routines personnalisées
  • Suivi des calories et de la nutrition avec aliments enregistrés
  • Graphiques de progrès et statistiques

Ressources de Développement

• Guides/Docs :
  • Documentation Next.js, shadcn/ui, Tailwind CSS v4, Framer Motion
  • CLAUDE.md dans le repo pour les directives de développement

Si vous avez besoin de plus de détails ou souhaitez voir la base de code, veuillez contacter directement l'auteur.