Aller au contenu principal
Mohamed Amine MIDENI
Tous les projets

Piazza Napoletana

Site de réservation et tableau de bord pour un restaurant, livré pour un vrai client

Next.js 16 (App Router)React 19TypeScriptTailwind CSS 4Framer Motion
Piazza Napoletana

À propos

Contexte, problème & solution

Piazza Napoletana est un site de réservation et un tableau de bord admin construits pour un restaurant italien en activité à Gommern-Menz, en Allemagne. Tout le cahier des charges tenait en une phrase : un client doit pouvoir réserver une table en moins de trente secondes, sur un téléphone, en allemand.

Contexte et problème. Les widgets de réservation pour restaurants échouent généralement dans l'une de deux directions. Soit c'est un simple formulaire de contact — le gérant réconcilie alors les demandes à la main et le client ne sait jamais si un horaire est réellement libre ; soit c'est une plateforme tierce lourde, avec des frais par couvert et la marque de quelqu'un d'autre. La vraie contrainte, c'est que la disponibilité n'est pas une liste fixe de créneaux : elle est dérivée des horaires d'ouverture et de la capacité restante, et les deux changent. Coder les créneaux en dur garantit que le site se désynchronise du commerce dès le premier changement de jour de fermeture.

Solution. Le parcours de réservation est un assistant en quatre étapes — nombre de couverts, puis date, puis heure, puis coordonnées — où chaque étape restreint la suivante. Les créneaux ne sont pas stockés : ils sont générés à la demande depuis les horaires d'ouverture enregistrés en base, puis filtrés par la capacité restante pour cette date — un créneau complet n'apparaît donc simplement pas. Le gérant modifie les horaires, le profil et l'image d'accueil depuis un tableau de bord protégé par mot de passe, qui liste aussi les réservations par date avec changement de statut et suppression — aucune intervention de développeur pour l'exploitation quotidienne. La production tourne sur Turso (libSQL) avec les images dans Vercel Blob, mais sans jeton configuré l'application se replie sur un fichier SQLite local et des uploads locaux : un clone frais démarre immédiatement avec npm run dev.

Ingénierie et exigence qualité. Dériver la disponibilité des horaires stockés plutôt que d'une table de créneaux est la décision sur laquelle repose toute la justesse du reste : il existe exactement une source de vérité, et quand le gérant change les horaires du lundi le formulaire de réservation suit sans redéploiement. Les données entrantes sont validées par Zod à la frontière des route handlers, et l'espace admin est protégé par une connexion par mot de passe plus un jeton de session signé issu d'un secret d'environnement, et non par un simple drapeau côté client. Le chemin de repli sans configuration relève lui aussi de la qualité : il permet de cloner, relire et démontrer le projet sans provisionner de base de données — exactement ce qu'exige une remise de projet à un client.

Architecture

Comment le système est construit

architecture.diagram
Clients
Site public
Mobile-firstHoraires, galerie, carteAvis & contact
Assistant de réservation
Couverts → date → heureEn moins de 30 secondes
Application
Route handlers Next.js
/api/reservations/api/availabilityValidation Zod
Session admin
Connexion par mot de passeJeton de session signé
Logique
Moteur de disponibilité
Créneaux issus des horairesTient compte de la capacité
Tableau de bord admin
Réservations par dateÉdition horaires & profil
Données
Turso (libSQL)
Réservations & paramètresRepli SQLite en dev
Vercel Blob
Images d'accueil & galerieRepli uploads locaux
Vrai projet client : un restaurant en activité en AllemagneRéservation en moins de 30 secondes, quatre étapes, mobile-firstDisponibilités dérivées des horaires, jamais codées en durSensible à la capacité : les créneaux complets disparaissentTurso en production, SQLite en local — zéro configurationLe gérant maîtrise horaires, images et profil sans développeur

Stack technique

Technologies utilisées

Frontend

Next.js 16 (App Router)React 19TypeScriptTailwind CSS 4Framer MotionTanStack Query

Backend

Route handlers Next.jsSchémas ZodMoteur de disponibilité par capacitéSession par cookie

Données & stockage

Turso (libSQL)Repli SQLite localVercel BlobRepli upload local

Admin

Réservations par dateChangement de statut & suppressionÉditeur d'horairesProfil & image d'accueil

Livraison

Déploiement VercelConfiguration par variables d'envInterface en allemand (client)Design mobile-first

Envie d'en savoir plus sur Piazza Napoletana ?

Ce dépôt est privé, le code n'est donc pas public — je peux présenter l'architecture et le code sur demande.