Cappelli su misura — configuratore 3D
Uno studio 3D da telefono per disegnare cappelli con strass in millimetri reali, con negozio e back-office.
- Astro 7
- React 19
- Three.js
- zustand + immer
- zod
- Drizzle ORM
- Cloudflare D1 + R2
- Vitest + Playwright
- 53punti di ancoraggio nominati per modello, ognuno con il gemello speculare
- 315 → 21 msper passo con 6.000 pietre lungo il bordo, dopo l'ottimizzazione
- 26decisioni architetturali documentate (ADR)
Un cappello, misurato in millimetri
Tocca un blocco per vedere cosa fa.
- Logica
- Persone
- Dati
- Infrastruttura
- Uscita
Il cuore del sistema
Studio del cappello in millimetri
Ogni parte lavora sullo stesso design: un cappello procedurale in millimetri reali, modificato dal telefono, controllato da un solo schema e trasformato in prodotti, magazzino e distinta materiali.
Collegato a Motore del cappello, Studio da telefono, Bozze offline, Documento di design, Worker Cloudflare, D1 + R2, Negozio e carrello, Back-office
Logica
Motore del cappello
Un cappello Three.js procedurale in millimetri reali: 5 modelli, 14 zone, 11 tessuti procedurali, 53 ancoraggi nominati con gemello speculare.
- Three.js
Riceve da Studio del cappello in millimetriPassa a Studio da telefono
Persone
Studio da telefono
Un editor React da telefono: strass da testo, forma, immagine o pennello; specchio, livelli, annulla e ripeti con le patch di immer.
- React 19
- zustand
- immer
Riceve da Motore del cappello, Studio del cappello in millimetriPassa a Bozze offline, Documento di design
Dati
Bozze offline
Bozze salvate in IndexedDB e sincronizzate con un numero di revisione, così le modifiche in conflitto vengono rilevate e non sovrascritte.
- IndexedDB
Riceve da Studio da telefono, Studio del cappello in millimetriPassa a Worker Cloudflare
Logica
Documento di design
Un solo schema zod su client e server, misure reali degli strass, prezzi e una distinta materiali calcolata da ogni design.
- zod
Riceve da Studio da telefono, Studio del cappello in millimetriPassa a Worker Cloudflare
Infrastruttura
Worker Cloudflare
Astro su un solo Worker; l'API è divisa in prefissi pubblico, studio e admin, con codici via email, CSRF, CSP, rate limit e upload validati.
- Astro 7
- Cloudflare Workers
Riceve da Bozze offline, Documento di design, Studio del cappello in millimetriPassa a D1 + R2
Dati
D1 + R2
41 tabelle con Drizzle, importi in centesimi; gli asset caricati su R2, dove quelli privati rispondono 404 a chiunque altro.
- Cloudflare D1
- Cloudflare R2
- Drizzle ORM
Riceve da Worker Cloudflare, Studio del cappello in millimetriPassa a Negozio e carrello, Back-office
Uscita
Negozio e carrello
Pagine del negozio in Astro e un carrello ospite lato server con blocchi atomici sui drop limitati, sconti e spedizioni. Il checkout Stripe è previsto.
- Astro 7
- GSAP
Riceve da D1 + R2, Studio del cappello in millimetri
Persone
Back-office
Magazzino con movimenti in transazione, lista della spesa e materiali scaricati dalla distinta di ogni ordine una sola volta.
- React 19
Riceve da D1 + R2, Studio del cappello in millimetri
Il problema
Un artigiano di cappelli con strass su misura aveva un configuratore 3D con un modello low-poly, un solo colore per tutto il cappello e un color picker nativo che su iPhone copriva il modello. Il cliente voleva che posizionare testi, loghi, toppe e strass fosse facilissimo, con tanti ancoraggi predefiniti, snap e simmetria.
Cosa ho costruito
- Ho scritto una specifica master a fasi con quality gate e divieti, poi ho fatto lavorare Claude Code in un lungo loop autonomo e Codex su un branch separato, con ogni task ricontrollato da un subagent revisore indipendente.
- Ho specificato un motore procedurale del cappello in millimetri reali invece di un asset 3D: 5 modelli, 14 zone, 11 tessuti procedurali e 53 ancoraggi nominati, ognuno con il suo gemello speculare.
- Ho consegnato uno Studio pensato per il telefono: strass da testo, forme, immagini o pennello, modalità specchio, annulla e ripeti, e bozze offline che si sincronizzano rilevando i conflitti.
- Ho aggiunto un negozio con carrello lato server che blocca i pezzi limitati in modo atomico, e un back-office in cui la distinta materiali di ogni design muove il magazzino.
- Ho blindato il Worker: codici monouso via email, CSRF, CSP, rate limit per cliente e upload validati; gli asset privati rispondono 404, mai 403.
La parte difficile
Mettere testi e loghi piatti su un cappello curvo senza deformarli. La prima mappa della superficie si invertiva con errori fino a 53,7 mm; il metodo di Newton con avvolgimento periodico l'ha portata a 0 errori su 400 punti di prova, e un camminatore geodetico ha riportato in squadra gli elementi deformati.
Risultato
Un prototipo funzionante in locale, non ancora pubblicato: Studio, negozio e back-office girano su D1 e R2 locali dopo 74 commit in 6 giorni. Posare 6.000 pietre lungo il bordo è passato da 315 a 21 ms per passo dopo l'ottimizzazione; checkout, export e audit finale sono ancora da fare.
Il mio ruolo
Progetto per un cliente costruito orchestrando agenti: il codice l'hanno scritto Claude Code e Codex. Io ho scritto e mantenuto la specifica master, fornito i riferimenti e le mie skill di design, chiesto i confronti tecnici diventati ADR, fissato le priorità e revisionato i risultati.