🍔 Contexte : SMASH°CLUB est une application de démonstration technique à but non commercial, réalisée pour le portfolio Krono. Elle simule une vraie infrastructure de commande en ligne pour un fast food premium, de l'accueil client jusqu'à l'écran de cuisine.

Pourquoi aller aussi loin pour une démo ?

Au départ, le cahier des charges était simple : un menu interactif, un panier, une confirmation de commande. Ce que font 80 % des sites restaurant. Mais je voulais aller beaucoup plus loin et montrer ce qu'une vraie application de restauration devrait être en 2026 : connectée, temps réel, pensée pour le personnel autant que pour le client.

Le résultat : une application full-stack simulée avec cinq modules distincts, tous interconnectés via un state management central.

Les cinq écrans de l'application

🏠
Accueil & Présentation
Page d'accueil animée avec présentation de la marque, mise en avant des produits phares, section "pourquoi nous" et CTA direct vers le menu. Transitions Framer Motion fluides sur chaque section, dot grid en fond, gradient ambre caractéristique de la charte SMASH°CLUB.
📋
Menu interactif
Catalogue filtrable par catégorie (burgers, sides, boissons, desserts). Chaque produit s'ouvre dans un modal de personnalisation complet : ajout d'options (double steak, sauce, fromage supplémentaire…), réglage de la quantité, prix dynamique mis à jour en temps réel. Ajout au panier avec animation et feedback visuel immédiat.
🚀
Tunnel de commande en 3 étapes
Récapitulatif du panier → Mode de livraison → Paiement. En livraison : détection automatique de la zone (1, 2 ou 3 selon le code postal IDF, ou "hors zone" pour bloquer la commande si l'adresse n'est pas couverte), carte OpenStreetMap des zones, créneaux horaires programmables 11h–23h, paiement en ligne simulé ou à la livraison.
⭐
Compte client & Fidélité
Authentification complète (connexion / inscription). Programme de fidélité avec points, progression de palier (Bronze → Silver → Gold → Platinum), récompenses échangeables (articles gratuits, remises). QR code de fidélité unique par compte. Historique des commandes cliquable avec modal détail et impression de ticket.
🖥️
Écran Cuisine — Kitchen Display System (KDS)
Le module le plus technique du projet. Interface temps réel pour l'équipe en cuisine, avec 4 colonnes de statut, drag & drop inter-colonnes, timers live par commande, alertes visuelles pour les retards et double-tap pour afficher tous les détails d'une commande. Voir ci-dessous pour le détail complet.

Le KDS : le cœur du système

Le Kitchen Display System est l'écran que l'équipe en cuisine voit en permanence. Il remplace les tickets papier, centralise les commandes et permet de suivre l'avancement en temps réel. C'est le module sur lequel j'ai passé le plus de temps, et de loin le plus complexe techniquement.

📊
4 colonnes de statut avec drag & drop

À préparer → En cours → Prêt → Livré. Chaque commande peut être glissée d'une colonne à l'autre via @dnd-kit, qui gère nativement le tactile. Un bouton coloré en bas de chaque carte permet d'avancer le statut en un clic, sans lever les mains du plan de travail. La colonne "Livré" est masquée par défaut pour garder l'écran propre — elle s'affiche en un toggle.

⏱️
Timers live par commande

Chaque commande affiche un compte à rebours mis à jour chaque seconde. Quand le temps est dépassé, la carte vire au rouge avec une bordure lumineuse clignotante et le badge "⚠ RETARD". Un compteur dans le header liste le nombre de commandes en retard sur l'ensemble du service.

👆
Double-tap / double-clic → vue détail complète

Double-cliquer (ou double-tapper sur tablette) sur une commande ouvre un modal plein écran avec toutes les informations client (nom, adresse, téléphone), l'heure de passage et l'heure estimée, et surtout tous les articles avec l'intégralité des personnalisations. Un bouton "Imprimer" génère un ticket de caisse complet (logo, SIRET, TVA, mentions légales) dans une nouvelle fenêtre et déclenche l'impression automatiquement.

📱
Colonnes adaptatives — conçu pour tablette

Sur une mini tablette en mode paysage, 3 colonnes se partagent exactement l'espace disponible sans scroll horizontal. Quand la colonne "Livré" est activée, une 4e s'ajoute et chacune rétrécit en conséquence. Aucun min-width fixe, aucun overflow : tout est flex avec min-w-0, ce qui garantit un rendu propre sur iPad mini comme sur grand écran cuisine.

Le ticket de caisse — impression depuis le navigateur

Sans bibliothèque PDF externe, j'ai mis en place un système d'impression via window.open() + window.print(). Le ticket est une page HTML stylisée en police monospace (comme un vrai ticket thermique), avec :

  • Logo et nom de l'établissement
  • Adresse, téléphone, SIRET et TVA (simulés)
  • Numéro de commande, date et heure
  • Informations client et adresse de livraison
  • Tous les articles avec options et prix ligne par ligne
  • Sous-total, frais de livraison et total TTC
  • Mentions légales (conservation, RCS, capital social)

Ce ticket est accessible depuis deux endroits : le modal de détail commande côté client (historique de compte), et le modal cuisine (KDS). Un seul helper partagé printReceipt(order) dans les utilitaires.

Stack technique

React 19 + Vite

Composants fonctionnels, hooks, SPA avec react-router-dom. Build ultra-rapide en développement et production.

Zustand

State management léger pour le panier, les commandes (KDS + historique) et l'authentification. Persist middleware pour la persistance localStorage.

Framer Motion

Animations de pages, transitions de modaux, micro-interactions sur les boutons, timers visuels clignotants et entrées/sorties en spring physics.

@dnd-kit

Drag & drop cross-colonnes dans le KDS. Supporte nativement le pointer et le touch (tablette). DragOverlay pour le fantôme visuel pendant le glissement.

Tailwind CSS

Charte dark amber sur mesure (brand-dark, brand-amber, brand-fire, status-new/prep/ready/done). Tokens couleur définis dans tailwind.config.js.

Leaflet + OpenStreetMap

Carte interactive des zones de livraison dans le tunnel de commande. Polygones GeoJSON colorés par zone, marker sur l'établissement.

Ce que ce projet démontre concrètement

SMASH°CLUB n'est pas un simple "site restaurant". C'est une démonstration de ce qu'il est possible de livrer pour un restaurateur en 2026 :

  • Côté client : expérience de commande fluide, personnalisée et fidélisante, comparable aux grandes apps de livraison.
  • Côté personnel : outil de gestion cuisine qui remplace des logiciels propriétaires coûteux par une interface web accessible sur n'importe quelle tablette ou TV.
  • Côté propriétaire : impression de tickets professionnels, suivi des commandes en temps réel, historique complet.

Le tout sans back-end — état persisté en localStorage pour la démo, mais la migration vers une API Node.js + base de données pour un vrai client est directement envisageable à partir de cette base.

🍔

Vous avez un projet restaurant, food truck ou fast food ?

Ce type d'application — commande en ligne, fidélité, écran cuisine — peut être adapté et livré pour votre établissement. Discutons-en.

Lancer mon projet Voir la démo live