Site de démonstration d'un glacier imaginaire à Turin. L'artisane indique depuis son téléphone les parfums disponibles et ceux qui sont épuisés, et la vitrine du site, dessinée en code bac par bac, change en direct avec l'heure de la dernière mise à jour. Avec le catalogue des parfums, les allergènes, les horaires et une interface à essayer sans compte.
**Gelateria Brina n'existe pas** : c'est un glacier artisanal imaginaire à Turin, et l'artisane, les parfums, les recettes et les photos sont inventés ; le site le dit en haut de chaque page. Tout le reste est vrai : la vitrine en direct, les horaires, le registre des allergènes et l'interface d'administration, construits comme pour une vraie boutique.
**Ce qu'il fait**
- **Les parfums du jour, en direct.** À la place d'une photo, il y a le comptoir, dessiné en SVG par le code : chaque bac a la couleur de son parfum et son étiquette. Quand un parfum est épuisé, son bac se vide sur tous les écrans ouverts en moins d'une seconde, et la vitrine indique « Mis à jour à 15 h 42 ». - **L'interface sur le téléphone.** L'artisane touche de grands interrupteurs : ce parfum est là, celui-ci non, celui-là est épuisé. Chaque geste est en ligne aussitôt et s'annule pendant huit secondes. - **Les allergènes.** Les ingrédients avec les allergènes en gras, les 14 de la réglementation européenne, un registre à imprimer pour la boutique, et aucun filtre « sans… », qui ressemblerait à une garantie. - **Le reste.** Les parfums de saison, les horaires avec la pause d'hiver et un « ouvert maintenant » calculé, un plan dessiné, des statistiques de visites sans cookies et 13 photos générées sur le GPU de mon ordinateur.
**Les visiteurs peuvent essayer l'interface** sans compte : ils entrent comme « Invité », suivent trois choses à essayer et, sur ordinateur, voient le site changer à côté de l'interface à chaque geste. Les modifications restent dans leur navigateur, où tourne la logique du serveur sur une copie des données, vérifiée route par route par un test automatique. Et pour que la vitrine ne reste pas figée, une journée de démonstration prépare le comptoir à l'ouverture et épuise quelques parfums.
**Le plus difficile**, c'est de ne jamais faire semblant d'être à jour. Si personne n'a touché le comptoir aujourd'hui, la vitrine le dit : « voici les parfums d'hier soir ». Un parfum épuisé le reste jusqu'à ce qu'on le remette. Et le direct doit tenir sur un vrai serveur : les événements passent par nginx sans être retenus, un signal toutes les 25 secondes garde la connexion ouverte, et sans direct la page demande l'état chaque minute. La page d'accueil pèse 99 Ko de JavaScript et ne bouge pas pendant le chargement.
Vue 3 et TypeScript, Fastify et MongoDB, schémas Zod partagés ; chaque modification passe par 165 tests automatiques et arrive sur mon serveur avec une GitHub Action.
Conception, développement full-stack et mise en ligne · 2026
Vue.js, Fastify, MongoDB, TypeScript, Z-Image-Turbo