KaliFit est une Progressive Web App (PWA) combinant nutrition et fitness, réalisée dans le cadre du projet NSI Terminale. Le nom est issu de Kalos (beauté et perfection en grec) et Fit (fitness et performance).
🔗 Application en ligne : kali-fit.vercel.app
📦 Dépôt : github.com/gtdevrandom/KaliFit
📄 Licence : MIT
- Présentation du projet
- Architecture et fichiers
- Fonctionnalités
- APIs et services utilisés
- Sécurité
- Installation et déploiement
- PWA — Progressive Web App
- Personnalisation et thèmes
- Exportation et importation des données
- Maquette et design
- Référencement et SEO
- Performance — Rapport Lighthouse
- Objectifs du projet (NSI)
- Licence
KaliFit est une application web progressive visant à centraliser la gestion de la santé et de la performance physique. Elle permet à l'utilisateur de :
- Suivre son alimentation quotidienne (macronutriments, calories, qualité nutritionnelle)
- Enregistrer et analyser ses séances sportives
- Obtenir des recommandations personnalisées via un coach IA
- Visualiser l'évolution de son poids, de son sommeil et de ses performances dans le temps
Le projet a été réalisé en HTML / CSS / JavaScript vanilla, sans framework front-end, et déployé sur Vercel.
KaliFit/
┌── index.html # Structure principale de l'application (SPA)
├── script.js # Logique front-end (interactions, données, UI)
├── manifest.json # Manifeste PWA
├── sw.js # Service Worker (cache hors-ligne)
├── LICENSE # Licence MIT
├── robots.txt
├── sitemap.xml
├── README.md # Résumé du projet
├── api/ # Fonctions serverless Vercel (proxy API sécurisé)
│ └── ai.js
├── src/
│ └── script.js
├── config/
│ ├── ai-config.js # Configuration du module IA (Hugging Face)
│ └── openfoodfacts.js # Configuration du module Openfoodfacts
├── public/
│ ├── style.css # Feuille de styles globale
│ └── images/ # Icônes PWA et assets visuels
│ ├── lighthouse.webp
│ ├── logo.drawio
│ ├── logo-192.webp
│ ├── logo-512.webp
│ ├──nav-bar/
│ ├── home.webp
│ ├── sport.webp
│ ├── stats.webp
│ ├── profil.webp
│ ├── params.webp
│ └── food.webp
│ └──nav-bar-white/
│ ├── home-white.webp
│ ├── sport-white.webp
│ ├── stats-white.webp
│ ├── profil-white.webp
│ ├── params-white.webp
│ └── food-white.webp
├── maquette_figma/ # Captures de la maquette Figma
│ ├── app.webp
│ ├── kalifit.fig
└── └── pop_up.webp
| Fichier | Description |
|---|---|
index.html |
Application monopage (SPA) avec toutes les vues intégrées |
script.js |
Gestion des données utilisateur, navigation entre sections, appels API |
ai-config.js |
Paramétrage des requêtes envoyées au modèle IA via le proxy Vercel |
sw.js |
Service Worker permettant le fonctionnement hors-ligne et la mise en cache |
manifest.json |
Déclaration PWA (icônes, thème, mode d'affichage standalone) |
api/ |
Routes serverless Vercel servant de proxy sécurisé vers Hugging Face |
- Profil biométrique : affichage du poids actuel et de l'IMC avec indicateur visuel (maigreur → obésité sévère)
- Nutrition du jour : résumé des protéines, glucides, lipides et calories consommées
- Score de récupération : indice 0-100 basé sur le sommeil et la charge d'entraînement
- Suggestions IA : recommandations contextuelles affichées directement sur le dashboard
- Recherche d'aliments via l'API OpenFoodFacts (par nom ou code-barres)
- Ajout de portions avec quantité personnalisable (en grammes)
- Calcul automatique des macronutriments et des calories
- Score de qualité alimentaire calculé à partir de la composition des aliments du jour
- Suggestions IA adaptées à l'objectif de l'utilisateur (ex. : "Augmente tes protéines de 15g")
- Ajout de séances sportives avec : date, type de sport, durée, intensité (faible / modérée / élevée), calories brûlées et notes libres
- Types disponibles : cardio, musculation, yoga/stretching, football/basket, tennis/badminton, CrossFit/HIIT, autre
- Score de qualité de la séance calculé selon l'intensité et la durée
- Historique des séances consulatable
- Suggestions IA sur le type d'entraînement selon l'objectif (masse, perte de graisse…)
- Graphique du poids : suivi temporel avec possibilité d'ajouter des entrées
- Graphique du sommeil : suivi de la durée de sommeil par nuit
- Ratio performance/calories : indicateur de l'efficacité de l'entraînement
- Heatmap des séances : visualisation sur les 5 dernières semaines (repos / faible / modéré / élevé)
- Masse grasse et masse musculaire estimées
- Encouragements IA pour progresser
- Saisie des informations personnelles : prénom, nom, taille, année de naissance
- Gestion des objectifs : poids cible, masse grasse, masse musculaire
- Suivi de la progression vers les objectifs
- Ajout du poids courant et du temps de sommeil
- Thème : clair ou sombre
- Couleur secondaire personnalisable
- Format des dates : JJ/MM/YYYY, MM/DD/YYYY ou YYYY-MM-DD
- Vider le cache : réinitialisation complète des données locales
| Propriété | Valeur |
|---|---|
| Usage | Recherche d'aliments et récupération des données nutritionnelles |
| Authentification | Aucune (base de données publique et ouverte) |
| Endpoint | https://world.openfoodfacts.org/cgi/search.pl |
| Format | JSON |
OpenFoodFacts est une base de données mondiale collaborative listant des millions de produits alimentaires avec leurs compositions complètes (macronutriments, micronutriments, additifs, Nutri-Score…).
| Propriété | Valeur |
|---|---|
| Usage | Génération de conseils personnalisés et analyse prédictive |
| Authentification | Clé API stockée dans les variables d'environnement Vercel |
| Accès côté client | ❌ Jamais exposée (proxy serverless) |
Le modèle de langage est interrogé via une Vercel Serverless Function qui fait office de proxy sécurisé. Le client ne communique jamais directement avec Hugging Face.
L'architecture retenue garantit qu'aucune clé API sensible n'est exposée côté client.
Navigateur (client)
│
│ Requête HTTPS (sans clé)
▼
Vercel Edge Function (api/)
│
│ Requête authentifiée (clé Hugging Face en variable d'environnement)
▼
API Hugging Face
│
│ Réponse IA
▼
Vercel Edge Function
│
│ Réponse traitée
▼
Navigateur (client)
Les données utilisateur (poids, séances, aliments) sont stockées localement dans le navigateur via localStorage et ne sont jamais envoyées à un serveur tiers.
- Un compte Vercel (pour le déploiement)
- Une clé API Hugging Face
- Git / Github
# 1. Cloner le dépôt
git clone https://github.com/gtdevrandom/KaliFit.git
cd KaliFit
# 2. Déployer sur Vercel
vercel deploy| Variable | Description |
|---|---|
HUGGINGFACE_API_KEY |
Clé d'accès à l'API Hugging Face |
⚠️ Ne jamais mettre la clé API dans le code source.
L'application peut être ouverte directement dans un navigateur via index.html. Les fonctionnalités IA seront inactives sans le proxy Vercel.
KaliFit est installable sur mobile et desktop comme une application native.
manifest.json: déclare le nom, les icônes, la couleur de thème et le modestandalonesw.js: Service Worker gérant la mise en cache des ressources pour un fonctionnement hors-ligne
Sur mobile (Chrome / Safari) : appuyer sur "Ajouter à l'écran d'accueil"
Sur desktop (Chrome / Edge) : cliquer sur l'icône d'installation dans la barre d'adresse
KaliFit propose deux thèmes visuels (clair / sombre) et une couleur d'accentuation personnalisable, configurables depuis la section Paramètres. Les préférences sont sauvegardées localement.
KaliFit permet à l'utilisateur d'exporter toutes ses données personnelles dans un fichier JSON et de les réimporter ultérieurement. Cette fonctionnalité garantit une sauvegarde complète et portable de toutes les informations.
L'export génère un fichier JSON contenant :
- ✅ Paramètres personnels : prénom, nom, taille, année de naissance, allergies
- ✅ Préférences : thème, couleur secondaire, format de date
- ✅ Objectifs : poids cible, masse grasse, masse musculaire et valeurs initiales
- ✅ Poids : historique complet des pesées avec dates et valeurs
- ✅ Sommeil : durée de sommeil enregistrée pour chaque nuit
- ✅ Séances sportives : type, durée, intensité, calories brûlées et notes
- ✅ Nutrition : aliments consommés avec macronutriments et calories
Procédure :
- Accéder à la section Paramètres (onglet ⚙️)
- Cliquer sur le bouton 💾 Exporter mes données
- Un fichier
KaliFit_export_YYYY-MM-DD.jsonest téléchargé automatiquement
💡 Le nom du fichier inclut la date d'export pour faciliter l'organisation et la traçabilité.
L'import remplace ou restaure l'ensemble des données utilisateur à partir d'un fichier JSON préalablement exporté.
Procédure :
- Accéder à la section Paramètres (onglet ⚙️)
- Cliquer sur le bouton 📥 Importer mes données
- Sélectionner un fichier JSON valide exporté depuis KaliFit
- Confirmer l'opération (
⚠️ cela remplacera les données actuelles) - La page se recharge automatiquement avec les nouvelles données
⚠️ Important : L'importation est définitive et remplace toutes les données existantes. Il est recommandé de faire une sauvegarde (export) avant d'importer des données.
Le fichier JSON exporté a la structure suivante :
{
"version": "1.0",
"exportDate": "2026-03-20T14:30:45.123Z",
"data": {
"settings": {
"firstname": "Jean",
"lastname": "Dupont",
"height": "180",
"birthYear": "1990",
"theme": "dark",
"dateFormat": "fr",
"secondaryColor": "#d400ff",
"allergies": "Cacahuètes, Lactose"
},
"goals": {
"weight": 75,
"fat": 15,
"muscle": 35,
"weightStart": 85,
"fatStart": 25,
"muscleStart": 25,
"weightGoal": "lose"
},
"weightData": [
{ "date": "2026-03-15", "value": 82.5 },
{ "date": "2026-03-20", "value": 81.8 }
],
"sleepData": [
{ "date": "2026-03-19", "value": 7.5 },
{ "date": "2026-03-20", "value": 8 }
],
"sessionsData": [
{ "date": "2026-03-20", "type": "cardio", "duration": 45, "intensity": "moderate", "calories": 520, "notes": "Course rapide" }
],
"nutritionData": { "2026-03-20": [...] }
}
}- ✅ Stockage local uniquement : les données ne quittent jamais votre navigateur sauf lors d'une export volontaire
- ✅ Pas de serveur : aucune donnée n'est envoyée à un serveur distant
- ✅ Format JSON lisible : les fichiers exportés sont en JSON standard (lisible et scriptable)
La maquette de l'application a été réalisée sur Figma avant le développement. Les exports sont disponibles dans le dossier maquette_figma/.
Le logo a été créé avec draw.io et est fourni en deux résolutions : 192×192 px et 512×512 px (formats requis par le manifeste PWA).
Deux fichiers standards sont inclus à la racine du projet pour améliorer l'indexation et le référencement de l'application.
Le fichier robots.txt est une convention universelle du web permettant d'indiquer aux robots des moteurs de recherche (Googlebot, Bingbot, etc.) quelles parties du site ils sont autorisés à explorer.
Dans KaliFit, il est configuré ainsi :
- Tout le site est accessible aux robots (
Allow: /) - Le dossier
/api/est bloqué (Disallow: /api/) — les routes serverless Vercel ne doivent pas être indexées car elles ne contiennent pas de contenu destiné aux utilisateurs - Googlebot et Bingbot sont explicitement autorisés
- Le chemin vers le sitemap est déclaré à la fin pour que les moteurs de recherche le trouvent automatiquement
User-agent: *
Allow: /
Disallow: /api/
Sitemap: https://kali-fit.vercel.app/sitemap.xml
Le fichier sitemap.xml liste toutes les pages importantes du site afin d'aider les moteurs de recherche à les découvrir et à les indexer efficacement.
KaliFit étant une application monopage (SPA), le sitemap contient une seule entrée correspondant à la page principale :
| Champ | Valeur | Signification |
|---|---|---|
<loc> |
https://kali-fit.vercel.app/ |
URL de la page |
<lastmod> |
2026-03-19 |
Date de dernière modification |
<changefreq> |
weekly |
Fréquence de mise à jour estimée |
<priority> |
1.0 |
Priorité maximale pour l'indexation |
💡 Ces deux fichiers n'ont pas d'effet visible pour l'utilisateur, mais ils sont essentiels pour garantir une bonne visibilité sur les moteurs de recherche et indiquer aux robots ce qu'ils doivent (ou ne doivent pas) explorer.
Lighthouse est un outil d'audit automatisé intégré à Google Chrome (DevTools) qui évalue la qualité d'une application web selon quatre critères principaux.
| Catégorie | Score | Description |
|---|---|---|
| ⚡ Performance | Temps de chargement, rendu, optimisation des ressources | |
| ♿ Accessibilité | Lisibilité, contrastes, balises ARIA, navigation clavier | |
| ✅ Bonnes pratiques | HTTPS, erreurs console, sécurité, standards modernes | |
| 🔍 SEO | Balises meta, structure, robots.txt, lisibilité pour les moteurs |
Les scores Lighthouse valident que KaliFit respecte les standards actuels du web en matière de rapidité, d'accessibilité et d'optimisation pour les moteurs de recherche.
Ce projet a été réalisé dans le cadre du cours Numérique et Sciences Informatiques (NSI) — Terminale, avec pour objectif d'explorer l'utilisation d'APIs externes dans une application web.
- Connecter plusieurs APIs différentes (OpenFoodFacts + Hugging Face)
- Différents thèmes (clair / sombre)
- Application téléchargeable (PWA installable)
- Optimisation de l'intégration OpenFoodFacts
- Ajout d'une licence sur le site
- Création d'un logo
| Statut | API / Idée |
|---|---|
| ✅ Retenu | OpenFoodFacts - données nutritionnelles |
| ✅ Retenu | Hugging Face - IA conversationnelle |
| Spotify / Deezer / YouTube - musique d'entraînement | |
| ❌ Refusé | API météo / qualité de l'air |
| ❌ Refusé | API de trading |
| ❌ Refusé | API de reconnaissance de plaques d'immatriculation |
| ❌ Refusé | APIs d'images |
| ❌ Refusé | APIs de cybersécurité |
Ce projet (photos et code) est distribué sous licence MIT.
MIT License — Copyright (c) 2026 gtdevrandom
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software.
Voir le fichier LICENSE pour le texte complet.