Carrozzeria Zotta — Molto più di un sito web
Un ecosistema digitale su misura: sito aziendale, software gestionale e infrastruttura cloud, progettati per lavorare insieme. Con una concept car 3D interattiva nella Home.
- Categoria
- Sito web · Gestionale · Cloud · 3D
- Committente
- Carrozzeria Zotta, Collegno (TO)
- Piattaforma
- Sito web, gestionale web e backend cloud
- Stato
- Online · Lancio pubblico in preparazione
- Anno
- 2026
Il progetto
Carrozzeria Zotta è un’attività di Collegno, alle porte di Torino, presente dal 2005: carrozzeria e verniciatura, gestione dei sinistri, cristalli e danni da grandine.
Per l’officina abbiamo progettato e sviluppato molto più di una presenza online: non soltanto un sito da visitare, ma un sistema di lavoro costruito sulle esigenze concrete dell’attività, dal sito al gestionale fino all’infrastruttura che li collega.
Le parti del progetto
Sito aziendale
11 pagine responsive con i servizi, i contatti diretti e una sezione per i lavori prima/dopo alimentata dal gestionale.
Approfondisci: Sito aziendaleGestionale su misura
Un’applicazione web con accesso personale per organizzare lavorazioni, foto, stati e pubblicazioni, da computer e smartphone.
Approfondisci: Gestionale su misuraInfrastruttura ed esperienza 3D
Backend e database su Cloudflare, archivio privato delle foto, aggiornamento automatico del sito e una concept car 3D interattiva.
Approfondisci: Infrastruttura ed esperienza 3D
Sito pubblico
Un sito costruito intorno a chi ha bisogno della carrozzeria
Chi cerca una carrozzeria spesso ha appena avuto un danno. Il sito risponde subito: quali servizi l'officina offre davvero, come lavora, come raggiungerla. Ogni scelta grafica è al servizio di questa chiarezza.
Home 
Menu 
Contatti
- Servizi reali
- Carrozzeria e verniciatura, gestione dei sinistri, cristalli e danni da grandine, con pagine dedicate ai servizi principali. Solo ciò che l’officina offre davvero.
- Contatti a un tocco
- Chiamata, WhatsApp e indicazioni stradali sempre a portata di mano, anche nel menu su smartphone. Orari e indirizzo arrivano da un’unica fonte di dati.
- Lavori prima/dopo
- Una sezione alimentata dal gestionale, con categorie, gallerie e un confronto prima/dopo da usare con mouse, dito o tastiera.
- Coerente con il marchio
- Grafite e verde lime dal logo, titoli condensati e un alone verde che segue il mouse su desktop: un’identità riconoscibile, senza sacrificare la leggibilità.
Gestionale web
Un’applicazione su misura per il lavoro in officina
Il gestionale è un'applicazione web con accesso riservato: le due persone autorizzate lavorano sullo stesso archivio, dal computer o dallo smartphone. Si apre una lavorazione quando l'auto arriva, la si completa nei giorni successivi e la si pubblica sul sito solo quando è pronta.
Chi lavora in officina aggiorna lavorazioni e Portfolio da un’interfaccia dedicata, senza intervenire sul codice del sito e senza usare GitHub.
Accesso e lavoro di squadra
- Account personali con email e password
- Sessioni protette che scadono se non vengono usate
- Nuova password tramite un link personale a uso singolo
- Lo stesso archivio da computer e smartphone
- Salvataggi contemporanei gestiti: nessuno sovrascrive il lavoro di un collega
Lavorazioni
- Bozze da riprendere su più giornate
- Foto PRIMA e DOPO ordinate per inquadratura
- Stati sempre chiari: in corso, pubblicati, ritirati, cestino
- Copia di recupero delle modifiche non salvate sul dispositivo
- Guida illustrata per scattare foto confrontabili
Pubblicazione
- Controlli su dati mancanti e foto consigliate
- Conferma esplicita prima di andare online
- Modifiche a un lavoro online in attesa fino alla nuova pubblicazione
- Ritiro dal sito senza perdere il lavoro
- Ripristino dal cestino ed eliminazione definitiva con conferma
- Lavori reali sempre separati da quelli di prova
Schermate con dati e illustrazioni dimostrative: nessun cliente, targa o operatore reale.
Prima e dopo
Prima e dopo, con precisione
Un confronto prima/dopo funziona solo se le due foto coincidono. Ma lo scatto DOPO arriva giorni più tardi, a mano libera: cambiano un po' distanza, angolo e inquadratura. Il gestionale corregge queste differenze prima della pubblicazione.
Le foto entrano nel lavoro
L’operatore carica le foto PRIMA e DOPO, anche dallo smartphone, direttamente nella lavorazione.
Riconosce i punti in comune
Individua centinaia di dettagli distintivi in entrambe le foto, come spigoli e profili della carrozzeria, e li mette in corrispondenza.
Propone la correzione
Stima spostamento, zoom e rotazione che portano la foto DOPO sulla PRIMA e li propone solo se superano i controlli di affidabilità.
L’operatore perfeziona
Anteprima con il cursore, confronto tra foto originali e allineate, regolazione manuale di posizione, zoom e rotazione.
Salva solo con conferma
Il confronto si salva solo con una conferma esplicita. Viene registrata la correzione: le foto dell’archivio non vengono sovrascritte.
- Fedele, non ritoccato
- La foto viene solo spostata, ingrandita o ruotata: mai deformata né ritoccata, quindi il confronto mostra il lavoro com’è.
- Calcolato nel browser
- Un metodo a punti caratteristici con una stima robusta che ignora i dettagli incoerenti, in un processo separato che non blocca l’interfaccia.
- Limiti dichiarati
- Corregge differenze moderate, non la prospettiva. Se le foto sono troppo diverse non propone nulla e suggerisce la regolazione manuale o un nuovo scatto.
- Verificato
- 63 controlli automatici su immagini di prova con spostamenti, zoom e rotazioni noti, compresi i casi che devono essere rifiutati.
Illustrazioni dimostrative: la foto DOPO è stata spostata, ingrandita e ruotata apposta per la prova. I test misurano il comportamento su immagini di prova, non la precisione su ogni foto reale: le soglie andranno confermate sui primi scatti dell’officina.
Esperienza 3D
Concept car 3D interattiva
Nella metà destra della Home su desktop c'è una concept car sportiva nero-grafite con dettagli verde lime, realizzata per il sito nei colori del marchio. È un elemento illustrativo, indicato nella pagina come «Concept 3D illustrativo»: non è un'auto reale né un lavoro dell'officina.
- Da guardare e da girare
- Segue leggermente il movimento del mouse; trascinandola ruota a 360° con un’inerzia naturale. Si ruota anche con le frecce della tastiera e un pulsante riporta alla vista iniziale.
- Materiali e luce
- Vernice grafite metallizzata con strato trasparente, accenti verde lime e luci a LED, illuminati da uno studio virtuale generato direttamente nel browser.
- Caricata solo quando serve
- Il modello arriva dopo il resto della pagina e solo su schermi desktop con una grafica adeguata. Fino ad allora, o se qualcosa non va, resta un’immagine statica dello stesso modello.
- Attenta al dispositivo
- Disegna solo quando qualcosa si muove, si ferma fuori schermo e passa a una modalità semplificata se il computer fatica. Su smartphone e tablet il 3D non viene scaricato.
Un modello illustrativo, senza loghi o marchi di case automobilistiche. Alcuni componenti derivano da un modello con licenza CC BY 4.0: autori, fonti, licenza e modifiche sono indicati nei crediti.Crediti e licenze del modello 3D
Infrastruttura cloud
L’architettura dietro l’esperienza
Dietro il sito e il gestionale c’è un sistema che il visitatore non vede: accessi, dati, archivio fotografico e aggiornamento del sito sono collegati tra loro, ognuno con un ruolo preciso.
Dal gestionale al Portfolio
Lavorazione approvata
L’operatore pubblica il lavoro dopo i controlli e la conferma sulle foto.
Archivio aggiornato
Il backend registra la nuova versione nell’archivio privato.
Ricostruzione avviata
Il Deploy Hook chiede a Cloudflare di generare di nuovo il sito.
Solo ciò che è pubblicabile
La generazione legge l’archivio, tiene solo i lavori reali pubblicati e prepara le immagini.
Portfolio aggiornato
Le nuove pagine vanno online. Un lavoro ritirato esce dal sito con lo stesso percorso.
- Astro · sito pubblico
- Pagine statiche e veloci, generate con i soli lavori pubblicati e le immagini ottimizzate per il web.
- Cloudflare Pages · distribuzione
- Mette online il sito sul dominio dell’officina e lo ricostruisce a ogni aggiornamento.
- Cloudflare Workers · backend
- Il servizio del gestionale: accessi, controlli sulle richieste, salvataggio delle lavorazioni e avvio della pubblicazione.
- Cloudflare D1 · database
- Account, sessioni e tentativi di accesso. Lavorazioni e foto non stanno qui: hanno un archivio dedicato.
- Archivio privato · GitHub
- Lavorazioni e fotografie in un repository privato, separato dal codice del sito: il backend ci scrive, il sito ne usa solo i lavori pubblicabili.
- Deploy Hook · aggiornamento
- Quando un lavoro viene pubblicato o ritirato, il gestionale chiede da solo la ricostruzione del sito.
Verificati dal vivo: la lettura dell’archivio durante la generazione del sito e la ricostruzione avviata manualmente con il Deploy Hook. L’avvio automatico dal pulsante «Pubblica» è implementato e coperto da test automatici; il collaudo completo con la prima lavorazione reale è ancora da eseguire.
Sicurezza e controllo
Progettato con attenzione ai dati
Le foto di un’officina possono contenere targhe, volti o documenti. Il sistema è costruito perché nulla arrivi online per caso e perché l’ultima parola spetti sempre a una persona.
- Accesso riservato
- Solo gli operatori autorizzati, con account personali, sessioni a scadenza, tentativi di accesso limitati e controlli su ogni richiesta di modifica.
- Foto private
- L’archivio non è pubblico: le foto delle lavorazioni si vedono solo dal gestionale, finché un lavoro non viene pubblicato.
- Posizione e metadati rimossi
- Coordinate GPS e altri dati nascosti nelle foto vengono eliminati già sul dispositivo; il backend rifiuta i file che li contengono ancora.
- File verificati
- Formato effettivo, dimensioni e peso di ogni immagine vengono controllati prima di entrare nell’archivio.
- Conferma prima di pubblicare
- Chi pubblica dichiara di aver controllato targhe, volti, documenti e dati personali. Il controllo è umano e guidato dal pannello: non c’è un oscuramento automatico.
- Prove sempre fuori dal sito
- Contenuti dimostrativi e lavori di prova restano esclusi dalla versione pubblica. Un controllo finale blocca la pubblicazione se trova file privati.
Sviluppo e test
Tecnologia e verifiche
Strumenti moderni, scelti per ogni parte del sistema e verificati con test automatici.
- Astro e TypeScript
- Sito multipagina statico, componenti riutilizzabili e dati aziendali raccolti in un’unica fonte.
- three.js
- Concept car in formato glTF compresso, con decodificatore ospitato sul sito e caricamento differito.
- Node.js
- Generazione delle pagine dei lavori con immagini WebP ottimizzate e strumenti per lo sviluppo del gestionale.
- SEO tecnica
- Metadati, dati strutturati per l’attività locale e sitemap, pronti per l’indicizzazione al lancio pubblico.
- Accessibilità
- Navigazione da tastiera, menu e finestre accessibili, rispetto di «Riduci movimento». Verifiche automatiche WCAG 2.2 AA senza violazioni sulle pagine controllate.
- Test automatici
- Suite per sito, accessi, flusso delle lavorazioni, backend e allineamento, eseguite in un ambiente locale che riproduce il cloud; layout controllato da 320 a 1920 px.
Un unico sistema, progettato insieme
Carrozzeria Zotta riassume il nostro modo di lavorare: non solo siti web, ma applicazioni, backend e strumenti operativi costruiti intorno alle esigenze concrete di un’attività.
Il sito presenta l’officina con chiarezza, il gestionale lascia a chi ci lavora il controllo su cosa pubblicare e quando, l’infrastruttura collega dati, foto e pubblicazioni e la concept car dà al marchio un’immagine riconoscibile.
Stato del progetto
- Sito pubblicoOnline
- Raggiungibile su carrozzeriazotta.it. Il lancio pubblico è in preparazione: l’indicizzazione sui motori di ricerca non è ancora attiva e la sezione Lavori attende i primi interventi reali.
- Gestionale webOnline
- Attivo con gli account dei due operatori autorizzati.
- Pubblicazione automaticaImplementata
- Coperta da test automatici; lettura dell’archivio e ricostruzione manuale verificate dal vivo. Manca il collaudo con la prima lavorazione reale.
- Concept car 3DIntegrata
- Attiva nella Home su desktop, con immagine statica di riserva.
Crediti e licenze
Concept car 3D
Carrozzeria e dettagli del modello sono generati in Blender da uno script parametrico scritto per il progetto, senza loghi o marchi di case automobilistiche.
Pneumatici, dischi e pinze dei freni, sedili anteriori e volante derivano da «Car Concept» di Eric Chadwick, © 2024 Darmstadt Graphics Group GmbH, licenza Creative Commons Attribuzione 4.0 Internazionale (CC BY 4.0). Modifiche: parti estratte e adattate, sedili ritagliati, pinze ricolorate, loghi e marchi Khronos e 3D Commerce rimossi.
«Car Concept» deriva a sua volta da un modello di pubblico dominio (CC0) di Unity Fan. I componenti sono forniti dagli autori «così come sono», senza garanzie, e il loro uso non implica approvazione da parte degli autori.
Marchio e schermate
Nome e logo Carrozzeria Zotta appartengono ai rispettivi titolari. Le schermate del gestionale mostrano dati e illustrazioni dimostrative.
Hai un prodotto digitale da costruire?
Consulenza iniziale gratuita,circa 30 minuti,senza impegno