Site de demonstração de uma designer de interiores inventada em Bolonha: os projetos contados divisão a divisão, com a planta interativa, as comparações com cursor e os painéis de materiais, um Diário por episódios e o formulário de contacto. O painel experimenta-se sem conta: as alterações ficam no navegador de quem o experimenta.
**A Livia Ardenghi não existe**: é uma designer de interiores inventada, com um estúdio em Bolonha, sete projetos, cinco serviços e o Diário da renovação da sua própria casa. O site, pelo contrário, é verdadeiro: está feito como os que faço para estúdios reais, com as mesmas páginas e o mesmo painel, e uma faixa no topo de cada página diz que é uma demo. As 61 fotografias são geradas na placa gráfica do meu computador com um modelo aberto, o Z-Image-Turbo; as plantas são desenhadas pelo código.
**O que faz**
- **Os projetos divisão a divisão**: local, ano e intervenção ao lado da história, as cores tiradas da foto de capa, que tingem levemente a página, e uma secção para cada divisão com as suas fotos. - **A planta interativa**: as divisões marcadas no desenho, e um clique leva às suas fotos. - **As comparações com cursor**: antes e depois, o render e a obra acabada, a primeira ideia e a versão aprovada. O cursor move-se com o rato, com o dedo ou com as setas. - **Os painéis de materiais**, um por projeto, e a galeria que abre em ecrã inteiro. - **O índice de revista**: ano, título, local e categoria, com a foto que aparece ao passar sobre um título, e os filtros por categoria. - **O Diário**: cinco episódios da renovação, da primeira visita a «Ci abitiamo» (já cá vivemos). - **Italiano e inglês**: quem chega de fora vê uma ou outra língua, conforme o navegador. - **Os contactos**: o formulário pede o tipo de espaço, o serviço, os prazos e o orçamento, e o botão de um serviço abre-o com esse serviço já escolhido. Aqui não envia nada.
**O painel, para experimentar**
«Prova il pannello» (experimentar o painel), na faixa, abre o painel sem conta: mudam-se a página inicial, os projetos e as fotos, e o site mostra as alterações. Ficam no navegador de quem experimenta: o servidor não as vê, e não há nada para moderar. Um percurso guiado de cinco passos assinala-se sozinho. Quase tudo se liga e desliga a partir dali: a planta, o índice, as cores, o Diário.
**A parte difícil**
Para a experiência funcionar, a lógica do servidor também corre no navegador. Os serviços do site estão num pacote que o servidor usa com o MongoDB e a experiência com uma memória que se comporta como o MongoDB, com as mesmas rotas e os mesmos esquemas; um teste de paridade envia os mesmos pedidos aos dois e exige respostas iguais, erros incluídos. O motor pesa cerca de 47 KB comprimidos e só o descarrega quem abre a experiência: a página inicial descarrega cerca de 93 KB de JavaScript ao todo.
Vue 3 e TypeScript, Fastify e MongoDB, com as páginas geradas no servidor; cada alteração passa por 177 testes automáticos e chega ao servidor com uma GitHub Action.
Conceção, desenvolvimento full-stack e publicação · 2026
Vue.js, Fastify, MongoDB, Z-Image-Turbo, Vite