
Vue d'ensemble
Projet Master MIAGE
Restomate est une application innovante conçue pour faciliter la gestion des commandes dans les restaurants. Elle permet aux clients de passer commande directement depuis leur téléphone après avoir scanné un QR code disposé sur leur table. Développée dans le cadre d'un projet de Master MIAGE, l'application offre des interfaces personnalisées pour chaque acteur du restaurant, optimisant ainsi les processus de commande et la gestion quotidienne.
Ma Contribution
Prototypage et développement frontend
Ma principale contribution au projet Restomate a été le prototypage de l'application ainsi que le développement du code frontend. J'ai travaillé sur la conception des interfaces utilisateur en utilisant Figma pour créer des maquettes interactives, et j'ai développé le frontend de l'application en utilisant Inertia.js avec React.js pour assurer une expérience utilisateur fluide et réactive.
Maquette Figma
Prototype interactif
Développement Frontend
Approche et points forts
Dans le cadre du développement frontend, nous avons mis l'accent sur la modularité et la réutilisabilité des composants. En créant des éléments d'interface modulaires, nous avons pu assurer une cohérence visuelle et fonctionnelle à travers l'application. Le choix d'utiliser des bibliothèques "Headless UI" nous a permis d'implémenter des fonctionnalités complexes tout en gardant un haut niveau de personnalisation.
Malgré les défis rencontrés, comme l'intégration de fonctionnalités avancées telles que la pagination et les filtres dynamiques, nous avons réussi à offrir une expérience utilisateur fluide et conforme aux maquettes initiales.
Interfaces Utilisateurs
Les solutions que nous proposons sont adaptées à chaque rôle au sein du restaurant. Suite à des entretiens avec des restaurateurs, nous avons conçu des interfaces compatibles avec le matériel qu'ils possèdent déjà, qu'il s'agisse de smartphones, de tablettes ou d'ordinateurs de bureau. Cela permet une intégration fluide sans nécessiter d'investissements supplémentaires en équipement.
Interface Client
- Explorez le menu interactif du restaurant
- Accédez aux descriptions détaillées de chaque plat
- Personnalisez vos commandes selon vos préférences
- Gérez facilement votre panier
- Commandez directement via le QR code de votre table
Interface Serveur
- Profitez des mêmes fonctionnalités que les clients
- Gérez rapidement la disponibilité des produits
- Enregistrez les commandes pour les clients
Technologies Utilisées
- Maquettes réalisées avec Figma
- Développement frontend avec Inertia.js et React.js
- Backend développé avec Laravel
- Composants UI avec Tailwind CSS et Headless UI
- Système de suivi des commandes en temps réel avec WebSockets
Concepts Utilisés
- Modularité et réutilisabilité des composants
- Utilisation de bibliothèques "Headless UI" pour les fonctionnalités avancées
- Intégration des QR codes pour permettre aux clients de commander via leur téléphone
- Hooks custom pour gérer l'état de l'application
Objectifs du Projet
L'objectif de ce projet était de nous familiariser avec les technologies modernes de développement web et de mettre en pratique les concepts appris en cours. Nous avons ainsi pu explorer des outils tels que React.js, Inertia.js, et Tailwind CSS, tout en travaillant sur un projet concret et innovant. Ce projet m'a permis de renforcer mes compétences en développement frontend et de découvrir de nouvelles approches pour concevoir des interfaces utilisateur interactives et performantes.