Présentation du projet
Application de borne de commande de restaurant développée en React pour un écran tactile kiosk (1080×1920). 6 pages, routing dynamique, gestion de panier avec Context API et traduction FR/EN avec react-i18next.
Architecture
L'application consomme ma component library via npm. Le state global est géré par Context API (panier, catégorie active). Les traductions sont gérées côté app avec react-i18next, la librairie reçoit les textes traduits via props.
Défis techniques résolus
- Séparation données/affichage pour que la traduction ne casse pas le filtrage des catégories
- Gestion du panier avec Context API (ajout, suppression, calcul du total et taxes)
- Routing dynamique avec React Router (page produit par ID)
- Connexion de la librairie de composants via npm au lieu de npm link pour le déploiement
- Adaptation de l'app kiosk (1080×1920) à tous les écrans via scaling dynamique
Apprentissages
Context API
Gestion de state global partagé entre les pages : panier, catégorie active, calculs dérivés (sous-total, taxes, total).
react-i18next
Implémentation complète de la traduction FR/EN : clés de traduction, séparation des labels affichés et des clés de données, traduction des options dynamiques dans le panier.
React Router
Navigation multi-pages avec routes dynamiques, useParams, useNavigate et persistance du state entre les navigations.
Publication et versioning npm
Consommation d'un package npm en production, gestion des peerDependencies et déploiement sur Netlify.
Prochain objectif
Intégrer une API REST avec Node.js et Express pour servir le menu dynamiquement, et connecter l'application à une base de données afin de persister les commandes. L'objectif est de transformer Matt's Diner en application full-stack complète.