Votre compagnon digital pour une cuisine organisée et zéro gaspillage.
Scannez, cuisinez, gérez et surveillez les dates de péremption de vos aliments favoris avec l'application Glouton.
✨ Fonctionnalités clés :
- Scan et enregistrement de produits par code-barres
- Suivi des dates d'expiration automatique
- Gestion de son garde manger
- Génération de listes de courses
- Proposition de recettes avec les ingrédients disponibles
- Accès aux informations nutritionnelles détaillées
- Interface mobile-first responsive multi-appareils
| Catégorie | Technologies |
|---|---|
| Core Framework | Vue.js 3.5.13 (composition API) + TypeScript 5.7.3 Vite 5.4.14 (build tool) Vue Router 4.5.0 (routing + navigation guards) Pinia 2.3.1 (state management) |
| PWA & Performance | vite-plugin-pwa 0.17.5 (service workers + manifest) Workbox 7.0 (cache strategies + offline) @vitejs/plugin-vue 5.0.4 (SFC compilation) |
| Scan & Métier | html5-qrcode 2.3.8 (scan principal) @zxing/library 0.21.3 + @zxing/browser 0.1.5 (décodage avancé) axios 1.7.9 (HTTP client + interceptors) moment.js 2.29.4 (dates françaises) Chart.js 4.4.7 (graphiques) |
| UI & Styling | Tailwind CSS 3.3.2 (utility-first + responsive) @fortawesome/vue-fontawesome 3.0.3 (icônes) |
Création du projet Vue.js x Vite
Configuration PWA complète (service workers, manifest)
Création des premières interfaces responsive avec le framework CSS Tailwind
Intégration de FontAwesome et des icons nécessaires
Gestion des aliments pour utilisateurs
Utilisation de token JWT et protection des routes
Intégration du scan de code-barres
Recherche de donneés sur l'api OpenFoodFact
Création d'un composant datepicker polyvalent
Enregistrement d'un produit lié à l'utiliasteur connecté (POST)
Affichage de la liste des produits liés à l'utilisateur connecté (GET collection)
Modification des informations liées à un produit sélectionné (GET & PATCH)
Affichage des données nutritionnelles
Création d'un modale de confirmation polyvalente
Suppression d'un produit après validation (DELETE)
Création de la liste de course
Affichage des produits liés à l'utilisateur et ajoutés à la liste de course (GET collection)
Ajout d'un bouton sur les produits afin de les ajouter / retirer à la liste de course (PATCH)
Affichage du nombre de produit sur la liste depuis le Footer (GET collection)
Design & UI/UX
Customisation de la Homepage (affichage des produits bientôt périmés et des futures recettes)
Création d'une interface polyvalentes affichant tous les produits enregistrés (GET collection)
Création de plusieurs modes d'affichage
Gestion des recettes
Création de recette depuis une interface permettant d'ajouter les produits concernés et les informations nécessaires (POST)
Affichage sur la Homepage des recettes en fonction des aliments requis (GET collection)
Affichage de la liste (GET collection)
Suppression après confirmation d'une recette (DELETE)
Améliorations futures
Proposition de recette par une IA en fonction des produits présents
Connexion aux APIs de supermarché pour faciliter la commande d'aliments
Notifications Push en cas de risque de gaspillage
Gamification de l'application
Analyse des dépenses personnelles
Partage de recettes entre utilisateurs
Alternatives santé pour éviter les produits trop transformé et non écologique
Glouton.scan.mp4
Architecture technique : Utilisation de @zxing/browser pour décoder les codes-barres en temps réel depuis le flux vidéo de la caméra. Le BrowserMultiFormatReader analyse les frames vidéo continuellement jusqu'à détection d'un motif valide.
Pipeline de données : Une fois le code-barres détecté, appel automatique à l'API OpenFoodFacts pour récupérer les informations produit (nom, scores nutritionnels, images). Les données sont normalisées et validées avant affichage.
Gestion d'états : Trois modes via Vue 3 reactivity - scanning (caméra active), found (produit trouvé), manual (saisie manuelle). Transitions automatiques selon le résultat de détection.
Optimisations UX : Vérification préalable en base locale avant appel externe, mode fallback pour produits non référencés, personnalisation des textes d'interface via manipulation DOM.
Permissions navigateur : Gestion des autorisations caméra avec interface dédiée et messages d'erreur explicites en cas de refus ou indisponibilité.
Enregistrement.de.l.ecran.2025-09-02.144436.mp4
Affichage ordonné : Liste des produits triable par catégories ou vue globale. Les 7 catégories (Fruits & Légumes, Produits Laitiers, etc.) sont extraites d'OpenFoodFacts et assignées automatiquement via algorithme de matching sur les tags produits.
Filtres transversaux : Filtrage par dates d'expiration, statut liste de course, et catégories. Ces filtres s'appliquent uniformément quel que soit le mode d'affichage sélectionné.
Liste.de.course.mp4
Ajout/retrait contextuel : Bouton toggle avec états visuels différenciés intégré aux fiches produits. Modification du statut via requête API sur le timestamp d'ajout.
Interface dédiée : Page shopping list affichant uniquement les produits ajoutés. Tri chronologique par date d'ajout via endpoint dédié. Le but est de permettre à l'utilisateur de facilement modifier sa liste de course lors de ses achats.
Compteur temps réel : Store Pinia maintenant la cohérence entre l'affichage du compteur en footer et les actions utilisateur. Synchronisation automatique via appels API au montage des composants et mise à jour incrémentale lors des ajouts/retraits.
recette.mp4
Création d'une recette : Interface avec un infinite scroll chargeant les aliments de l'utilisateur. Barre de recherche filtrant par nom de produit.
Indicateurs de disponibilité : Affichage du nombre d'aliments manquants sur chaque recette de la liste, permettant priorisation des recettes réalisables.
Thomas Berranger - Linkedin - tberranger@hotmail.fr