JUNOVATECH
Choisir
La carte défile comme un menu de salle, puis se resserre : incontournables, salades, panuozzi. Les photos restent au premier plan.
← Les réalisations
Étude de cas 04Restauration
Pizza L’EscapadeLa carte se goûte du bout des doigts.
Le site d’une ancienne pizzeria artisanale : une carte qui se filtre, des pizzas qui se composent, des allergènes toujours visibles et un panier présenté en démonstration. L’établissement est fermé et les commandes sont désactivées.
- Rôle
- Conception, interface, développement
- Plateforme
- Site web mobile d’abord, installable comme une application
- Technologies
- Next.js 16, React 19, Supabase, Zustand
- État
- Projet numérique en cours · établissement fermé
Pizza L’Escapade a cessé son activité. Le site reste en ligne comme démonstration du travail réalisé : la commande y est désactivée, aucune commande ni aucun paiement n’est possible.
Le problème
Une carte papier
ne se compose pas.
Une pizzeria vit de sa carte : des recettes qui changent, trois tailles, des ingrédients que l’on retire, des suppléments que l’on ajoute, des allergènes à signaler à chaque fois. Au téléphone ou au comptoir, tout cela se négocie de vive voix.
Le site devait donner à la carte la même générosité que la cuisine : de vraies photos, une composition claire, un prix qui suit chaque choix, et un panier qui garde tout en mémoire jusqu’au retrait, sur place ou à emporter.
La matière
La cuisine d’abord,
l’interface ensuite.
Le site part des photographies de la maison : pâtons qui lèvent, pizzas sorties du four, fleurs posées au dernier moment. L’interface s’efface pour leur laisser la place.
Photographies de l’établissement, publiées dans la galerie de son site.
La réponse
Trois principes,
visibles à l’écran.
- 01
La carte comme vitrine
Pizzas, incontournables, salades et panuozzi se filtrent d’un geste. Chaque fiche montre la photo, la composition et le prix.
- 02
Chaque pizza se compose
Trois tailles, des ingrédients à retirer, trente-huit suppléments : le prix se recalcule à chaque choix, avant même l’ajout au panier.
- 03
Les allergènes, partout
Les quatorze allergènes réglementaires suivent la pizza de la carte au panier, et se mettent à jour quand on ajoute un supplément.
À essayer
Les vrais écrans,
à portée de doigt.
La carte, en quatre gestes.
Les onglets de la carte changent la sélection sans recharger la page ; un toucher sur la pastille d’allergènes en donne le détail.
La carte complète, famille par famille.
Une Reine, à votre façon.
Le même parcours que sur le site, écran par écran : chaque choix modifie immédiatement le prix affiché sur le bouton d’ajout.
Photo, composition, allergènes et prix de départ : 13 €.
L’interface, en fonctionnement
Ce que l’on touche.
Ce qui se passe.
Composer
La fiche s’ouvre depuis le bas de l’écran. Taille, ingrédients retirés, suppléments : le prix suit chaque toucher.
Ajouter
Le panier s’ouvre aussitôt, garde la composition détaillée et se corrige sur place : quantité, modification, suppression.
S’arrêter
La page conserve le récapitulatif et les allergènes, mais la commande est désactivée dans l’interface et sur le serveur. Le bandeau de cette capture a été adapté pour la présentation.
Flâner
La galerie raconte le lieu : terrasse, soirées, pizzas et pâtons, filtrés par thème, avec une visionneuse plein écran.
La démonstration
Un parcours complet,
jusqu’au bouton désactivé.
De l’accueil à la page de commande : la carte, une Reine en 30 cm avec burrata, le panier… et un bouton « Commandes indisponibles » qui ne laisse rien partir.
Les écrans
L’application,
écran par écran.
L’expérience mobile
Pensé pour le téléphone,
jusqu’au dernier geste.
La carte, la personnalisation et le panier restent simples à parcourir sur mobile. Ces trois vues ont été capturées dans Safari, sur le site publié.
- La carte
- Personnalisation
- Le panier
Les choix techniques
Sous la surface,
des décisions.
- Next.js et React
- Next.js 16 et React 19 : une carte rendue côté serveur, lisible par les moteurs de recherche ; Tailwind 4 et Radix UI pour des composants accessibles.
- Un panier qui se souvient
- Le panier est conservé sur l’appareil : taille, ingrédients retirés et suppléments survivent à un rechargement de la page.
- Une carte pilotée
- La disponibilité des pizzas vient de Supabase et se règle depuis un espace gérant ; elle est vérifiée de nouveau avant toute commande.
- Installable
- Manifeste, service worker et guide d’installation pour l’iPhone : le site s’ajoute à l’écran d’accueil comme une application.
- Une commande coupée proprement
- Un seul interrupteur désactive la commande dans l’interface et dans l’API, qui répond « Commandes momentanément indisponibles. » : rien ne peut partir par erreur.
- Paiement et e-mails prévus
- Le parcours prévoyait le paiement par carte avec Stripe et des confirmations par e-mail avec Resend. Ces étapes ne sont plus accessibles.
Le projet aujourd’hui
Établissement fermé.
La pizzeria a cessé son activité. Le site reste en ligne comme démonstration : carte, personnalisation, panier, galerie et installation fonctionnent ; la commande en ligne est désactivée.
À savoir
- Aucune commande et aucun paiement : le bouton de commande et l’API sont désactivés.
- Le suivi de commande reste affiché, mais aucune commande réelle n’existe.
- Sur téléphone, la grille de photos « Du pétrin au four » de l’accueil ne s’affiche pas : défaut connu.
À propos des captures
Captures et films réalisés le 11 octobre 2026 sur le site publié, en émulation iPhone 16e (navigateur automatisé), et trois captures sur un iPhone 16e physique dans Safari. Aucune commande, aucun paiement, aucune donnée saisie. Le bandeau de commande des médias « Commande désactivée », de la composition carte-panier et du film composé a été retouché uniquement pour la capture en environnement isolé. Le site publié conserve un ancien texte évoquant une ouverture à venir ; la production n’a pas été modifiée.