OhMyFood a débuté comme un projet OpenClassrooms. J’ai conservé la version d’origine intacte et conçu une V2 distincte lorsque j’y suis revenu avec davantage d’expérience front-end.
Je voulais accompagner l’utilisateur de la découverte des restaurants à la confirmation de réservation, en passant par le menu.
- Évolution
- Projet OpenClassrooms → refonte 2026
- Stack
- React • TypeScript • Vite • React Router
Le projet d’origine
OhMyFood est un projet d’apprentissage OpenClassrooms centré sur la création d’un site web responsive pour la découverte et la réservation de restaurants. Sa disposition statique d’origine sert de référence pour la refonte présentée ici.
Du guide de restaurants à la réservation
J’ai repris le guide de restaurants et ajouté un parcours qui va du choix des plats à la confirmation. Je suis revenu sur l’aspect visuel une fois ce parcours fonctionnel.
Les filtres sont enregistrés dans l’URL, et la sélection de plats reste disponible quand on change de page. Si on change de restaurant, l’application demande confirmation avant de l’effacer.
Les disponibilités ont aussi des états de chargement, de liste vide et d’erreur. Après confirmation, les détails de la réservation restent disponibles sur la page suivante pendant la session.
À chaque changement de page, le focus clavier passe au nouveau titre. Les animations respectent les préférences de mouvement réduit. Les restaurants et leurs disponibilités sont simulés en local, sans service de réservation côté serveur.
Les plats choisis et le total restent visibles du menu jusqu’à la réservation et sa confirmation.
Découverte
Découverte des restaurants parisiens, exploration des ambiances, des cuisines et des avis.
Menu & panier
Sélection des plats chez La palette du goût. Les choix et le total restent visibles en temps réel dans le panier.
Réservation
Choix du nombre de convives, de la date et de l’horaire. La page de réservation conserve les plats et le total choisis dans le menu.
Confirmation
Une confirmation limpide avec référence unique, date, horaire, nombre de convives et récapitulatif des plats.
Découverte
Découverte des restaurants parisiens, exploration des ambiances, des cuisines et des avis.
Page de découverte OhMyFood V2 présentant La palette du goût dans le guide de sélectionMenu & panier
Sélection des plats chez La palette du goût. Les choix et le total restent visibles en temps réel dans le panier.
Menu de La palette du goût avec plats sélectionnés et panier de réservation affichant le totalRéservation
Choix du nombre de convives, de la date et de l’horaire. La page de réservation conserve les plats et le total choisis dans le menu.
Page de réservation pour La palette du goût avec choix du nombre d’invités, date, heure et récapitulatif du menuConfirmation
Une confirmation limpide avec référence unique, date, horaire, nombre de convives et récapitulatif des plats.
Réservation confirmée à La palette du goût avec numéro de référence, date, heure, nombre de convives et récapitulatifLa refonte visuelle est venue après
La version d’origine était un site statique réalisé pour OpenClassrooms. La V2 ajoute un parcours de réservation ; les écrans ci-dessous montrent aussi comment j’ai revu son aspect visuel.
Une fois le flux V2 opérationnel, je pensais avoir presque terminé. En réexaminant les premiers écrans, les encadrés rigides, les bordures fines et les petits libellés trahissaient encore l’esprit d’un projet d’école.
Version d’origine — HTML / Sass
Version raffinée — React / TypeScript / Editorial UI
C’était fonctionnel. Mais visuellement daté.
Une fois le parcours de réservation en place, j’ai repris la typographie, les photos, les interactions et les animations.
La direction finale associe des fonds parchemin chaleureux, un contraste lie-de-vin profond (#421930), des corps de texte plus amples et de la photographie culinaire. Les micro-animations explicitent ce qui change après chaque action.
Ce que je changerais ensuite
Dans la V1, je me concentrais sur la réalisation isolée de chaque écran. La V2 m’a amené à penser les liens entre eux : la persistance du menu d’une page à l’autre, le passage à la confirmation et une identité visuelle qui donne envie de réserver.
Les disponibilités sont encore simulées en local. Une version en production aurait besoin d’un backend et de disponibilités mises à jour en temps réel ; j’aimerais aussi explorer les comptes utilisateurs.
Continuité d’état entre les routes
Garantir que la sélection de plats et le panier récapitulatif persistent sans perte lors de la navigation.
Une reprise visuelle après le parcours
Remplacer les encadrés scolaires par des surfaces parchemin chaudes, des contrastes lie-de-vin et une typographie expressive.
Accessibilité et gestion du focus
Déplacer le focus clavier sur le titre lors des transitions de route et respecter scrupuleusement la réduction des animations.