Studio Ardenghi: il sito di un'interior designer, con i progetti stanza per stanza e il pannello da provare

Sito dimostrativo di un'interior designer inventata a Bologna: i progetti raccontati stanza per stanza, con la pianta interattiva, i confronti con il cursore e le tavole dei materiali, un Diario a puntate e il modulo contatti. Il pannello si prova senza account: le modifiche restano nel browser di chi prova.

**Livia Ardenghi non esiste**: è un'interior designer inventata, con uno studio a Bologna, sette progetti, cinque servizi e il Diario della ristrutturazione di casa sua. Il sito invece è vero: è costruito come quelli che faccio per gli studi veri, con le stesse pagine e lo stesso pannello, e una striscia in cima a ogni pagina dice che è dimostrativo. Le 61 foto sono generate sulla GPU del mio computer con un modello aperto, Z-Image-Turbo; le piante le disegna il codice.

**Che cosa fa**

- **I progetti stanza per stanza**: luogo, anno e intervento accanto al racconto, i colori presi dalla foto di copertina, che tingono appena la pagina, e una sezione per ogni stanza con le sue foto. - **La pianta interattiva**: le stanze segnate sul disegno, e un clic porta alle loro foto. - **I confronti con il cursore**: prima e dopo, il render e il lavoro finito, la prima idea e la versione approvata. Il cursore si sposta con il mouse, con il dito o con le frecce. - **Le tavole dei materiali**, una per progetto, e la galleria che si apre a tutto schermo. - **L'indice da rivista**: anno, titolo, luogo e categoria, con la foto che compare passando sopra un titolo, e i filtri per categoria. - **Il Diario**: cinque puntate della ristrutturazione, dalla prima visita a «Ci abitiamo». - **Italiano e inglese**: chi arriva da fuori trova l'una o l'altra lingua, secondo il suo browser. - **I contatti**: il modulo chiede il tipo di spazio, il servizio, i tempi e il budget, e il bottone di un servizio lo apre con il servizio già scelto. Qui non spedisce niente.

**Il pannello, da provare**

«Prova il pannello», nella striscia, apre il pannello senza account: si cambiano la home, i progetti e le foto, e il sito mostra le modifiche. Restano nel browser di chi prova: il server non le vede, e non c'è niente da moderare. Un percorso guidato di cinque passi si spunta da solo. Quasi tutto si accende e si spegne da lì: la pianta, l'indice, i colori, il Diario.

**La parte difficile**

Perché la prova funzioni, la logica del server gira anche nel browser. I servizi del sito stanno in un pacchetto che il server usa sopra MongoDB e la prova sopra una memoria che si comporta come MongoDB, con le stesse rotte e gli stessi schemi; una prova di parità manda le stesse richieste ai due e vuole risposte uguali, errori compresi. Il motore pesa circa 47 KB compressi e lo scarica solo chi apre la prova: la home scarica circa 93 KB di JavaScript in tutto.

Vue 3 e TypeScript, Fastify e MongoDB, con le pagine costruite dal server; ogni modifica passa da 177 prove automatiche e arriva sul server con una GitHub Action.

Progettazione, sviluppo full-stack e pubblicazione · 2026

Vue.js, Fastify, MongoDB, Z-Image-Turbo, Vite

Vedi il sito

Andrea Coppetta