Ce qu’il y a derrière un écran
Une carte de restaurant qui se modifie depuis un navigateur, sans appeler personne. Voici la même page, démontée pièce par pièce.
Statut
Ce site a été construit pour un restaurant qui étudiait un projet. Il n’a pas donné suite. Je le montre quand même, parce qu’il est terminé, en ligne, et qu’il montre exactement ce que je livre. Rien n’y est simulé : l’adresse fonctionne, la carte se charge depuis une base de données, et l’interface de gestion existe.
La page, démontée
Un site n’est pas une image. C’est un empilement de calques dont la moitié ne se voit jamais. Faites défiler : la pile s’ouvre, puis on la traverse.
Schéma en perspective : les sept calques qui composent le site du restaurant, empilés puis écartés les uns des autres, de la page visible jusqu’aux serveurs qui la font tourner.
01 · Le premier écran
Ce qu’on voit en arrivant
Le nom du restaurant, une phrase, et le sommaire de la carte juste en dessous. Un client qui cherche le menu avant de réserver sait où aller dès la première seconde.
- Next.js
- Rendu côté serveur
02 · La navigation
Trois entrées, pas une de plus
Entrées, plats, desserts. Un menu de restaurant n’a pas besoin d’autre chose, et chaque lien descend directement à sa section au lieu de recharger une page.
- 3 ancres
- Barre toujours visible
03 · La carte
Neuf plats, aucun codé en dur
Trois entrées, trois plats, trois desserts. Leurs photos, leurs prix et leurs allergènes viennent tous de la base. Retirer un plat de la carte du soir prend le temps de décocher une case.
- 9 plats
- 3 par catégorie
04 · L’API
La partie qu’on ne voit jamais
Entre la base et la page, une API sert les données dans un format standard. C’est elle qui permettra d’ajouter une commande en ligne ou une application, sans rien reconstruire.
- Symfony
- API Platform
- JSON-LD
05 · La base
Une seule table, bien remplie
Un plat, c’est une ligne : un nom, un prix, une catégorie, une photo, une liste d’allergènes et une case « visible ». Neuf allergènes différents sont gérés, avec les noms officiels européens.
- PostgreSQL
- 9 allergènes normalisés
06 · La gestion
Le restaurant reprend la main
Une interface protégée par mot de passe, où l’on ajoute un plat, on téléverse sa photo et on le publie. C’est la différence entre un site qu’il faut faire modifier et un site dont on est propriétaire.
- EasyAdmin
- Accès protégé
07 · L’hébergement
Quatre machines qui n’en font qu’une
La base, le serveur, le routeur d’adresses et le site public tournent chacun dans leur boîte. C’est ce qui permet de remonter l’ensemble à l’identique ailleurs, sans repartir de zéro.
- Docker
- 4 conteneurs
Ce qui tourne derrière
L’inventaire complet, pour ceux que ça intéresse.
- Site public
- Next.js, rendu serveur, déployé sur Vercel
- Serveur
- Symfony avec API Platform, API en JSON-LD
- Base de données
- PostgreSQL
- Gestion
- EasyAdmin, accès protégé, téléversement d’images
- Environnement
- Docker, un conteneur par service
- Ce que je referais
- Les photos de plats partent en pleine résolution : 1,7 Mio à elles seules, sur 2 Mio de page. C’est le premier chantier d’une v2.
La suite
Parlons de votre projet.
Un appel de 30 minutes, sans engagement. À la fin, vous savez si le projet tient debout, ce qu’il coûte et quand il peut être en ligne. Si je ne suis pas la bonne personne, je vous le dis.
Je réponds à chaque demande.