Sitio de demostración de una interiorista inventada en Bolonia: los proyectos contados estancia por estancia, con el plano interactivo, las comparaciones con cursor y los tableros de materiales, un Diario por entregas y el formulario de contacto. El panel se prueba sin cuenta: los cambios se quedan en el navegador de quien lo prueba.
**Livia Ardenghi no existe**: es una interiorista inventada, con un estudio en Bolonia, siete proyectos, cinco servicios y el Diario de la reforma de su propia casa. La web, en cambio, es real: está hecha como las que hago para estudios de verdad, con las mismas páginas y el mismo panel, y una franja en lo alto de cada página dice que es una demo. Las 61 fotos están generadas en la GPU de mi ordenador con un modelo abierto, Z-Image-Turbo; los planos los dibuja el código.
**Qué hace**
- **Los proyectos estancia por estancia**: lugar, año e intervención junto al relato, los colores sacados de la foto de portada, que tiñen ligeramente la página, y una sección para cada estancia con sus fotos. - **El plano interactivo**: las estancias marcadas en el dibujo, y un clic lleva a sus fotos. - **Las comparaciones con cursor**: antes y después, el render y la obra terminada, la primera idea y la versión aprobada. El cursor se mueve con el ratón, con el dedo o con las flechas. - **Los tableros de materiales**, uno por proyecto, y la galería que se abre a pantalla completa. - **El índice de revista**: año, título, lugar y categoría, con la foto que aparece al pasar sobre un título, y los filtros por categoría. - **El Diario**: cinco entregas de la reforma, de la primera visita a «Ci abitiamo» (ya vivimos aquí). - **Italiano e inglés**: quien llega desde fuera ve uno u otro, según su navegador. - **El contacto**: el formulario pide el tipo de espacio, el servicio, los plazos y el presupuesto, y el botón de un servicio lo abre con ese servicio ya elegido. Aquí no envía nada.
**El panel, para probar**
«Prova il pannello» (prueba el panel), en la franja, abre el panel sin cuenta: se cambian la portada, los proyectos y las fotos, y la web muestra los cambios. Se quedan en el navegador de quien prueba: el servidor no los ve y no hay nada que moderar. Un recorrido guiado de cinco pasos se marca solo. Casi todo se activa y se desactiva desde ahí: el plano, el índice, los colores, el Diario.
**La parte difícil**
Para que la prueba funcione, la lógica del servidor también corre en el navegador. Los servicios de la web están en un paquete que el servidor usa con MongoDB y la prueba con una memoria que se comporta como MongoDB, con las mismas rutas y los mismos esquemas; una prueba de paridad envía las mismas peticiones a los dos y exige respuestas iguales, errores incluidos. El motor pesa unos 47 KB comprimidos y solo lo descarga quien abre la prueba: la portada descarga unos 93 KB de JavaScript en total.
Vue 3 y TypeScript, Fastify y MongoDB, con las páginas generadas en el servidor; cada cambio pasa 177 pruebas automáticas y llega al servidor con una GitHub Action.
Diseño, desarrollo full-stack y publicación · 2026
Vue.js, Fastify, MongoDB, Z-Image-Turbo, Vite