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.