Site de démonstration d'une architecte d'intérieur imaginaire à Bologne : les projets racontés pièce par pièce, avec le plan interactif, les comparaisons à curseur et les planches de matériaux, un Journal en épisodes et le formulaire de contact. L'administration s'essaie sans compte : les modifications restent dans le navigateur.
**Livia Ardenghi n'existe pas** : c'est une architecte d'intérieur imaginaire, avec un studio à Bologne, sept projets, cinq services et le Journal de la rénovation de sa propre maison. Le site, lui, est réel : il est construit comme ceux que je fais pour de vrais studios, avec les mêmes pages et la même administration, et un bandeau en haut de chaque page dit que c'est une démo. Les 61 photos sont générées sur la carte graphique de mon ordinateur avec un modèle ouvert, Z-Image-Turbo ; les plans sont dessinés par le code.
**Ce qu'il fait**
- **Les projets pièce par pièce** : lieu, année et intervention à côté du récit, les couleurs tirées de la photo de couverture, qui teintent légèrement la page, et une section pour chaque pièce avec ses photos. - **Le plan interactif** : les pièces marquées sur le dessin, et un clic mène à leurs photos. - **Les comparaisons à curseur** : avant et après, le rendu et le travail fini, la première idée et la version validée. Le curseur se déplace à la souris, au doigt ou avec les flèches. - **Les planches de matériaux**, une par projet, et la galerie qui s'ouvre en plein écran. - **L'index façon magazine** : année, titre, lieu et catégorie, avec la photo qui apparaît au survol d'un titre, et les filtres par catégorie. - **Le Journal** : cinq épisodes de la rénovation, de la première visite à « Ci abitiamo » (on y habite). - **Italien et anglais** : qui arrive de l'extérieur voit l'une ou l'autre langue, selon son navigateur. - **Le contact** : le formulaire demande le type d'espace, le service, les délais et le budget, et le bouton d'un service l'ouvre avec ce service déjà choisi. Ici, rien n'est envoyé.
**L'administration, à essayer**
« Prova il pannello » (essayer l'administration), dans le bandeau, ouvre l'administration sans compte : on modifie l'accueil, les projets et les photos, et le site affiche les modifications. Elles restent dans le navigateur : le serveur ne les voit pas, et il n'y a rien à modérer. Un parcours guidé en cinq étapes se coche tout seul. Presque tout s'active et se désactive de là : le plan, l'index, les couleurs, le Journal.
**La partie difficile**
Pour que l'essai fonctionne, la logique du serveur tourne aussi dans le navigateur. Les services du site sont dans un paquet que le serveur utilise avec MongoDB et l'essai avec une mémoire qui se comporte comme MongoDB, avec les mêmes routes et les mêmes schémas ; un test de parité envoie les mêmes requêtes aux deux et exige des réponses identiques, erreurs comprises. Le moteur pèse environ 47 Ko compressés et seuls ceux qui ouvrent l'essai le téléchargent : l'accueil télécharge environ 93 Ko de JavaScript en tout.
Vue 3 et TypeScript, Fastify et MongoDB, avec les pages construites sur le serveur ; chaque modification passe par 177 tests automatiques et arrive sur le serveur avec une GitHub Action.
Conception, développement full-stack et mise en ligne · 2026
Vue.js, Fastify, MongoDB, Z-Image-Turbo, Vite