Demo-Website einer erfundenen Innenarchitektin in Bologna: Projekte Raum für Raum erzählt, mit interaktivem Grundriss, Vergleichsreglern und Materialtafeln, einem Journal in Folgen und dem Kontaktformular. Der Admin-Bereich lässt sich ohne Konto testen: Änderungen bleiben im Browser der Testenden.
**Livia Ardenghi gibt es nicht**: Sie ist eine erfundene Innenarchitektin mit einem Studio in Bologna, sieben Projekten, fünf Leistungen und einem Journal über den Umbau ihrer eigenen Wohnung. Die Website dagegen ist echt: Sie ist gebaut wie die, die ich für echte Studios mache, mit denselben Seiten und demselben Admin-Bereich, und ein Streifen oben auf jeder Seite sagt, dass sie eine Demo ist. Die 61 Fotos sind auf der Grafikkarte meines Computers mit einem offenen Modell erzeugt, Z-Image-Turbo; die Grundrisse zeichnet der Code.
**Was sie kann**
- **Projekte Raum für Raum**: Ort, Jahr und Leistungen neben der Geschichte, die Farben aus dem Titelfoto, die die Seite leicht tönen, und für jeden Raum ein Abschnitt mit seinen Fotos. - **Der interaktive Grundriss**: die Räume in der Zeichnung markiert, und ein Klick führt zu ihren Fotos. - **Vergleiche mit Schieberegler**: vorher und nachher, Rendering und fertige Arbeit, erste Idee und freigegebene Version. Der Regler bewegt sich mit der Maus, mit dem Finger oder mit den Pfeiltasten. - **Die Materialtafeln**, eine pro Projekt, und die Galerie, die sich bildschirmfüllend öffnet. - **Das Register wie in einer Zeitschrift**: Jahr, Titel, Ort und Kategorie, mit dem Foto, das beim Überfahren eines Titels erscheint, und den Filtern nach Kategorie. - **Das Journal**: fünf Folgen über den Umbau, vom ersten Besuch bis „Ci abitiamo“ (wir wohnen hier). - **Italienisch und Englisch**: Wer von außen kommt, sieht je nach Browser die eine oder die andere Sprache. - **Kontakt**: Das Formular fragt nach Raumart, Leistung, Zeitrahmen und Budget, und der Knopf einer Leistung öffnet es mit dieser Leistung schon gewählt. Hier wird nichts verschickt.
**Der Admin-Bereich, zum Testen**
„Prova il pannello“ (den Admin-Bereich testen) im Streifen öffnet den Admin-Bereich ohne Konto: Man ändert die Startseite, die Projekte und die Fotos, und die Website zeigt die Änderungen. Sie bleiben im Browser der Testenden: Der Server sieht sie nicht, und es gibt nichts zu moderieren. Eine geführte Tour mit fünf Schritten hakt sich von selbst ab. Fast alles wird dort ein- und ausgeschaltet: der Grundriss, das Register, die Farben, das Journal.
**Der schwierige Teil**
Damit der Test funktioniert, läuft die Logik des Servers auch im Browser. Die Dienste der Website stecken in einem Paket, das der Server mit MongoDB nutzt und der Test mit einem Speicher, der sich wie MongoDB verhält, mit denselben Routen und denselben Schemas; ein Paritätstest schickt beiden dieselben Anfragen und verlangt gleiche Antworten, Fehler inklusive. Die Engine wiegt komprimiert etwa 47 KB und wird nur von denen geladen, die den Test öffnen: Die Startseite lädt insgesamt etwa 93 KB JavaScript.
Vue 3 und TypeScript, Fastify und MongoDB, mit serverseitig gerenderten Seiten; jede Änderung durchläuft 177 automatische Tests und kommt mit einer GitHub Action auf den Server.
Konzeption, Full-Stack-Entwicklung und Veröffentlichung · 2026
Vue.js, Fastify, MongoDB, Z-Image-Turbo, Vite