Parrucchiere — sito immersivo e prenotazioni
Un sito con l'atmosfera del salone, più prenotazioni online e un'agenda iPad tutta sua.
- Astro
- React
- Three.js
- GLSL
- Cloudflare Workers
- Cloudflare D1
- Resend
- Playwright
- 100Lighthouse accessibilità, best practice e SEO
- 348 mslargest contentful paint
- 6.9 → 1.7 s3D pronto su telefono, dopo l'ottimizzazione
Specchio, poltrona e un motore di prenotazione tutto suo
Tocca un blocco per vedere cosa fa.
- Logica
- Persone
- Ingresso
- Infrastruttura
- Dati
- Uscita
Il cuore del sistema
Il sistema del salone
Una home WebGL con l'atmosfera del locale, un motore di prenotazione di proprietà del salone invece di uno strumento in affitto, un'agenda iPad per lo staff e promemoria che partono da soli, tutto su Cloudflare.
Collegato a Motore prenotazioni, Agenda staff, Wizard prenotazione, Home WebGL, Cron promemoria, Cloudflare D1, SMS ed email
Logica
Motore prenotazioni
Pacchetto condiviso dietro 23 route API: griglia da 30 minuti, fuso con ora legale, preavviso e limite di annullamento, token HMAC per il link di gestione.
- Astro SSR
- Cloudflare Workers
- TypeScript
Riceve da Wizard prenotazione, Agenda staff, Il sistema del salonePassa a Cloudflare D1, SMS ed email
Persone
Agenda staff
PWA per iPad e telefono: una colonna per collaboratore, trascinamento con pressione lunga, nuovi appuntamenti, chiusure. Controlla ogni 5 s se qualcosa è cambiato.
- React
- PWA
Riceve da Il sistema del salonePassa a Motore prenotazioni
Ingresso
Wizard prenotazione
Isola React in quattro passi: servizio, giorno e slot libero in tempo reale, contatti, conferma. Prezzi e durate arrivano dal database, non dalla pagina.
- React
- Motion
Riceve da Home WebGL, Il sistema del salonePassa a Motore prenotazioni
Logica
Home WebGL
Shader del muro di marmo, insegna al neon che si accende, capelli GPU per ogni servizio. Livelli per dispositivo e loop che dorme; con reduced motion niente 3D né video.
- Three.js
- GLSL
- WAAPI
Riceve da Il sistema del salonePassa a Wizard prenotazione
Infrastruttura
Cron promemoria
Gira ogni 15 minuti. Alza il flag di invio prima di spedire, lo riabbassa se falliscono tutti i canali, si ferma dopo 3 tentativi. Anonimizza i dati dopo 24 mesi.
- Cron Worker
Riceve da Cloudflare D1, Il sistema del salonePassa a SMS ed email
Dati
Cloudflare D1
Un solo insert condizionato, COUNT(*) sotto la capienza, rende impossibile la doppia prenotazione: 201 per una nuova, 409 per slot occupato, 410 oltre il limite.
- Cloudflare D1
- SQL
Riceve da Motore prenotazioni, Il sistema del salonePassa a Cron promemoria
Uscita
SMS ed email
Conferma, modifica, annullamento e promemoria, tutti registrati in agenda. L'email porta l'invito .ics; l'SMS sta in 160 caratteri con il link di gestione.
- Resend
- SMS API
- .ics
Riceve da Motore prenotazioni, Cron promemoria, Il sistema del salone
Il problema
Il salone viveva su Instagram e WhatsApp, e lo strumento di prenotazione che usava stava per chiudere. Serviva un sito con l'atmosfera del locale (marmo nero, oro, un'insegna al neon) invece di un template, più un sistema di prenotazione e un'agenda staff di sua proprietà.
Cosa ho costruito
- Ho costruito la home come scena WebGL: un muro di marmo nero, un'insegna al neon ricalcata dal logo vero e migliaia di capelli disegnati dalla GPU, che cambiano con ogni servizio e seguono il cursore.
- Ho esteso il motore di prenotazione di un mio progetto precedente: slot da 30 minuti, ora locale con ora legale, link firmati per spostare o annullare, email con invito calendario, SMS.
- Ho costruito un'agenda iPad per lo staff: una colonna per collaboratore, pressione lunga per trascinare, stati arrivato, pagato e non presentato, aggiornata ogni 5 secondi.
- Ho aggiunto un worker cron che manda i promemoria ogni 15 minuti e anonimizza i dati vecchi dei clienti.
- Ho buttato la prima versione dopo una critica a punteggio e sono ripartito da un concept più forte, i fili di luce.
La parte difficile
Rendere usabile su telefoni economici una home piena di shader. Ho aggiunto livelli per dispositivo, compilazione parallela degli shader e un loop di render che si addormenta quando niente si muove. Con la CPU rallentata, il 3D pronto su telefono è sceso da 6,9 s a 1,7 s e il tempo di blocco da 4,8 s a 0,7 s.
Risultato
Il sito ha Lighthouse 100 su accessibilità, best practice e SEO, con LCP a 348 ms e CLS a 0. Il flusso di prenotazione passa i controlli end-to-end (nuova prenotazione, slot occupato, troppo tardi), dopo 19 cicli di QA documentati e con 11 versioni ripristinabili.
Il mio ruolo
Progetto in solitaria, diretto dall'inizio alla fine: ho scritto brand DNA, regole e specifiche, giudicato ogni versione con una critica a punteggio e testato su telefoni veri. Gran parte del codice l'ha scritto Claude Code, e ho fatto costruire a Codex una versione parallela come confronto.