Overview
Real Estate Agency è una piattaforma immobiliare full-stack che ho progettato e sviluppato per dimostrare come un CMS headless moderno possa alimentare un sito di presentazione di fascia alta. Il progetto nasce da un problema concreto: le agenzie immobiliari devono aggiornare gli annunci, gestire il team e controllare i contenuti dell'home page in autonomia, senza dipendere da uno sviluppatore per ogni modifica. Ho costruito un backend editoriale su Sanity.io con schemi personalizzati per immobili, agenti, sedi e sezioni dell'home, e uno Studio di amministrazione deployato su hosting dedicato che permette all'agenzia di operare in completa indipendenza.
Il frontend è costruito in React 19 con Vite, Tailwind CSS v4 e React Router v7. L'elemento tecnico più significativo è l'home page: una sequenza scroll-driven realizzata con GSAP e ScrollTrigger che include un collage di immobili che si espande a schermo intero, card per tipologia che si impilano in sequenza allo scroll, una sezione "esperienza" con contatori animati e transizioni di pagina personalizzate con effetto nebbia. Ogni animazione costruisce un percorso narrativo che guida il visitatore attraverso il portfolio dell'agenzia senza interruzioni percepibili.
Il listato immobili offre ricerca full-text, filtri multipli (tipo contratto, tipologia, range di prezzo), ordinamento e dropdown custom costruiti da zero senza select nativo. Ogni scheda immobile include una galleria fullscreen navigabile, i dettagli tecnici e i contatti dell'agente assegnato, alimentati dinamicamente via query GROQ da Sanity. GROQ permette di recuperare esattamente i dati necessari senza overfetching, mantenendo le chiamate al CMS precise e performanti.
Il pannello editoriale lascia all'agenzia il controllo completo: quali immobili mostrare in home, l'ordine delle categorie, quali mettere in evidenza nel carosello, il tutto senza toccare il codice. Real Estate Agency è un caso concreto di architettura JAMstack in cui frontend e gestione dei contenuti sono completamente disaccoppiati.
Real Estate Agency raggiunge un punteggio Lighthouse di 94/100 su Performance su desktop e 71/100 su mobile, validato da Google PageSpeed Insights in produzione. Su desktop il First Contentful Paint è a 0,7 secondi, il Largest Contentful Paint a 1,2 secondi, il Total Blocking Time a 0 ms e il Cumulative Layout Shift a 0,104. Su mobile: FCP a 2,9 secondi, LCP a 6,0 secondi, TBT a 0 ms e CLS a 0,09. Il LCP mobile più alto è atteso per un sito alimentato da CMS headless: le immagini degli immobili vengono caricate da Sanity CDN tramite URL remoti, senza la possibilità di applicare il precaching statico tipico dei bundle Vite. Il TBT a 0 ms su entrambi i dispositivi conferma l'assenza di blocchi al thread principale.
Desktop
MobileFAQ
- Che cos'è Real Estate Agency?
- È una piattaforma immobiliare full-stack con frontend React e backend headless su Sanity CMS, che include sito pubblico con ricerca e filtri, schede dettagliate degli immobili e pannello di amministrazione per l'agenzia.
- Come funziona il pannello di amministrazione?
- L'agenzia gestisce immobili, agenti, sedi e contenuti editoriali tramite Sanity Studio, un'interfaccia visiva deployata su hosting dedicato. Può scegliere quali annunci mostrare in home, l'ordine delle categorie e quali evidenziare nel carosello, senza mai toccare il codice.
- Quali tecnologie sono state usate?
- Frontend: React 19, Vite, Tailwind CSS v4, React Router v7, GSAP con ScrollTrigger e Portable Text per il rendering dei contenuti ricchi. Backend: Sanity.io come CMS headless con schemi custom e query GROQ per il fetching dei dati. Deploy: Vercel per il frontend, hosting Sanity per lo Studio.
- Come sono realizzate le animazioni scroll-driven?
- Con GSAP e ScrollTrigger: il collage della home usa pin e scrub per espandersi a schermo intero allo scroll, le card si impilano con animazioni sequenziali, i contatori si animano all'entrata in viewport e le transizioni di pagina usano un effetto nebbia custom. Tutte le animazioni rispettano la preferenza prefers-reduced-motion.
- Cos'è GROQ e perché è stato usato?
- GROQ (Graph-Relational Object Queries) è il linguaggio di query di Sanity.io. Permette di costruire query precise che recuperano esattamente i campi necessari senza overfetching, semplificando la gestione dei dati rispetto a REST classico e integrando nativamente i tipi di contenuto custom definiti negli schemi Sanity.