PANZAÏ — Démo plateforme de commande

Démo fonctionnelle réalisée par KNRWebsite pour PANZAÏ — Jungle Street Food (Thonon-les-Bains).

Site client (/) : accueil, carte, personnalisation des plats, panier, paiement (simulé), suivi de commande en direct.
Dashboard gérant (/admin) : commandes en temps réel (kanban + son), gestion du menu (prix, ruptures), statistiques, horaires et réglages de livraison.

Le site et le dashboard sont reliés : une commande passée sur le téléphone apparaît dans le dashboard en 2 secondes, et le suivi côté client avance quand le gérant clique.

Lancer la démo

Prérequis : Node.js 20 ou plus.

npm install
npm run dev

Puis ouvre :

Site client : http://localhost:3000
Dashboard gérant : http://localhost:3000/admin

Démo sur téléphone + tablette (recommandé pour le rendez-vous)

npm run dev écoute sur le réseau local. Le terminal affiche une adresse du type http://192.168.1.42:3000. Avec le Mac, le téléphone et la tablette sur le même Wi-Fi :

sur le téléphone : http://<IP-du-Mac>:3000 → passer une commande ;
sur la tablette (ou le Mac) : http://<IP-du-Mac>:3000/admin → cliquer sur Activer le son, puis accepter la commande.

Version optimisée (plus rapide)

npm run build
npm start

Scénario de démo conseillé (2 minutes)

Montrer l'accueil sur le téléphone (hero, toucan, best-sellers, bouton Commander toujours visible).
Ajouter un Crousty XL (sauce chili thaï) + un Pad Thaï, aller au panier, choisir Livraison, payer.
Sur la tablette : la commande arrive avec un son et pulse → Accepter 20 min.
Sur le téléphone : le suivi passe à « Ça chauffe au wok 🔥 ».
Tablette : Marquer prête → Remise au livreur. Le suivi client suit.
Dans Menu : mettre le Pad Thaï en Rupture → il est grisé sur le site client (≈10 s).
Dans Statistiques : montrer la commission économisée vs Uber Eats.
Dans Horaires & réglages : interrupteur « Commandes en pause » visible côté client.

Bouton Remettre la démo à zéro en bas de « Horaires & réglages ».

Ce qui est simulé dans cette démo

Élément	Démo	Production
Base de données	en mémoire (remise à zéro au redémarrage)	Supabase / Postgres
Paiement	simulé (1,4 s)	Stripe (carte, Apple Pay, Google Pay)
Temps réel	rafraîchissement toutes les 2 s	Supabase Realtime
Connexion gérant	aucune	compte sécurisé
SMS client	texte seulement	Brevo / Twilio
Avis Google, carte Maps	emplacements	API Google
Historique stats	chiffres de démo + jour en direct	calculé depuis la base
Logo	toucan provisoire	logo officiel PANZAÏ

À compléter avec le restaurant : prix du Veggie, boissons, desserts, suppléments, horaires, zone et frais de livraison, photos HD.

Structure

pages/            index, menu, panier, commande/[id], admin/*
components/       header, footer, cartes plats, fenêtre de personnalisation…
composables/      panier, données du resto, actions du dashboard
server/api/       API (menu, commandes, réglages)
server/utils/     store.ts — données de démo (carte, commandes, horaires)
assets/main.css   design system (couleurs, typo, boutons)
public/img/       photos des plats

Stack : Nuxt 3 (Vue 3), sans dépendance externe. Polices : Shojumaru (titres) et Manrope (texte) via Google Fonts.

3.5 KiB Raw Permalink Blame History