Case study · Web app · Agenzia immobiliare
Vilfor
Un'agenzia immobiliare piccola ha bisogno di due cose: un sito che faccia trovare gli annunci e un modo per aggiornarli da sola, senza chiamare nessuno. Vilfor è tutte e due: un sito pubblico in spagnolo e un pannello riservato dove si creano, si modificano e si tolgono gli annunci, foto comprese.
- Progetto
- Vilfor Real Estatebrand concept
- Settore
- Agenzia immobiliarevendita e affitto, Barcellona
- Tipo
- Web appsito pubblico e pannello riservato
- Cosa abbiamo fatto
- Design, sviluppo, database, gestionaleannunci, foto, accessi
- Tecnologie
- React, Vite, SupabaseLovable, Tailwind, shadcn/ui
Il punto di partenza
Un sito che l'agenzia aggiorna da sola
I siti delle agenzie piccole invecchiano in fretta: gli annunci restano online quando la casa è già venduta, le foto arrivano per mail e qualcuno deve caricarle. Il problema non è il sito, è chi lo tiene aggiornato.
Per Vilfor abbiamo costruito il sito e il suo gestionale insieme. Il pubblico cerca con i filtri, apre la scheda, guarda le foto e chiede informazioni. L'agenzia entra nel pannello, crea un annuncio, trascina le foto, sceglie vendita o affitto e pubblica. Tutto passa da un unico database.
01
Trovare la casa in tre clic
Zona, tipo, contratto, fascia di prezzo, stanze: i filtri agiscono subito sulla lista, senza ricaricare.
02
Pubblicare senza aiuto
Un modulo con tutti i campi, le foto che si trascinano e si riducono da sole, un interruttore per vendita o affitto.
03
Portare al contatto
Valutazione gratuita in apertura, modulo in ogni scheda già compilato con l'interesse, pagina contatti con orari.
Cosa abbiamo costruito
Il sito e il pannello
Cinque pagine pubbliche e un'area riservata. Stesso database, stesse foto, stessi annunci.
01
L'apertura e le proprietà in evidenza
Una villa al tramonto, una frase sola e il tasto per la valutazione gratuita, che apre un modulo esterno. Sotto, le proprietà in evidenza con prezzo, stanze, bagni e metri, i servizi e la presentazione.
Chiude una fascia color oro: hai una casa da vendere o affittare?
02
La ricerca con i filtri
Zona, tipo di immobile, contratto e, nei filtri avanzati, fascia di prezzo con il cursore e numero di stanze e bagni. La lista sotto si aggiorna subito e dice quante proprietà restano.
Ogni scheda ha l'etichetta Venta o Alquiler, il prezzo in oro e i tre numeri che contano.
03
La scheda con la galleria e la richiesta
Titolo, indirizzo, prezzo, i tre numeri, la descrizione e le caratteristiche con la spunta. La galleria ha la foto grande e le miniature che la cambiano.
A destra, sempre in vista, il modulo di richiesta con il messaggio già scritto: sono interessato a questa proprietà.
04
Chi siamo e i contatti
Chi siamo racconta l'agenzia in sei valori: serietà, onestà, efficienza, impegno, sicurezza, trattamento personale. La pagina contatti ha il modulo e, di fianco, telefono, mail e orari.
Il banner dei cookie con rifiuta e accetta, e le pagine legali, chiudono la parte pubblica.
05
La porta del pannello
Una pagina sobria: email, password, entra. Dietro c'è un controllo in più: non basta avere un account, serve il ruolo di amministratore, verificato nel database.
Da qui in poi l'agenzia gestisce tutto da sola. Lo vediamo nella sezione dopo.
Da telefono la ricerca sta in cima e le schede una sotto l'altra: la maggior parte delle richieste parte da qui.
Dentro l'app
Il giro completo, dentro Vilfor
Otto passi: quattro da visitatore con le schermate vere, quattro nel pannello riservato ricostruiti dal codice.
VisitatoreAdmin
Panel de administración
Nuevo anuncio «Casa adosada con jardín» · hace 2 h
Anuncio «Loft industrial» actualizado · ayer
Gestionar propiedades (8)
+ Nueva propiedad| Imagen | Título | Ubicación | Precio | Estado | Acciones |
|---|---|---|---|---|---|
| Ático de lujo con terraza | Madrid | 695.000 € | Venta | ✎🗑 | |
| Villa mediterránea | Marbella | 1.250.000 € | Venta | ✎🗑 | |
| Apartamento junto a la playa | Valencia | 1.450 €/mes | Alquiler | ✎🗑 | |
| Casa adosada con jardín | Sitges | 890.000 € | Venta | ✎🗑 | |
| Oficina diáfana | Madrid | 3.200 €/mes | Alquiler | ✎🗑 |
Crear nueva propiedad
Max 3MB · ridimensionamento automatico a 1200px
Impostazioni profilo
Come è fatto
Sotto il cofano: filtri, foto e un interruttore
Sei meccanismi, uno alla volta. Dalla ricerca al pannello.
- React
- Vite
- Supabase
- Storage
- react-hook-form
- shadcn/ui
Ubicación
Tipo de inmueble
Precio (€)
tipo, contratto, prezzo: la lista si filtra subito
I filtri che agiscono subito sulla lista
Cosa vedi. Scegli il tipo, muovi il cursore del prezzo: le schede che non c'entrano spariscono e il contatore si aggiorna.
Come è fatto. Gli annunci arrivano una volta sola dal database. I filtri sono stato dell'interfaccia: a ogni cambio la lista viene rifiltrata in memoria, senza nuove richieste. Il cursore del prezzo è a due maniglie, a passi di diecimila euro.
Max 3MB · JPEG, PNG, WebP
la foto si riduce nel browser, prima di partire
Le foto che si riducono prima di partire
Cosa vedi. Trascini una foto da 5 MB: in un attimo è caricata, ridotta e già nel modulo con il suo indirizzo pubblico.
Come è fatto. Il file viene controllato (massimo 3 MB, solo immagini), disegnato su un canvas a 1200 pixel di larghezza e riesportato in JPEG al 75%. Solo allora parte verso il bucket annunci di Supabase Storage, con un nome unico. L'URL pubblico torna nel campo del modulo.
set tipo_operazione =
where id = 'demo-001'
Calle Serrano 45, Madrid
un interruttore: etichetta, prezzo e «/mes» seguono
Un interruttore per vendita o affitto
Cosa vedi. Nel modulo un interruttore: Venta o Alquiler. Nell'annuncio cambiano l'etichetta, il colore e il «/mes» dopo il prezzo.
Come è fatto. Un solo campo nel database, tipo_operazione, con due valori. Il modulo lo scrive con un interruttore; la scheda pubblica e la tabella del pannello lo leggono e decidono etichetta, colore e formato del prezzo.
non basta avere un account: serve il ruolo
La porta dell'admin, con il controllo del ruolo
Cosa vedi. Entri con email e password. Se non sei amministratore, un avviso e torni al login.
Come è fatto. L'accesso è di Supabase Auth. Dopo il login il pannello chiama una funzione nel database, is_admin, che controlla il ruolo dell'utente: se risponde no, la sessione viene chiusa e si torna alla porta. Le regole di sicurezza del database fanno lo stesso controllo su ogni scrittura.
CancelarEliminar
conferma · delete su Supabase · lista ricaricata
La tabella che si aggiorna da sola
Cosa vedi. Clicchi il cestino: una conferma, l'annuncio sparisce, un avviso in basso a destra.
Come è fatto. La lista è una query con cache che si invalida dopo ogni azione: cancellare un annuncio manda la richiesta a Supabase, poi ricarica la lista e mostra un toast. Se qualcosa va storto, il toast è rosso e la riga resta.
miniature che cambiano la foto · modulo già compilato
La galleria e il modulo già compilato
Cosa vedi. Nella scheda clicchi una miniatura e la foto grande cambia. A destra il modulo ha già scritto «sono interessato a questa proprietà».
Come è fatto. Le foto sono un array nell'annuncio; la galleria tiene l'indice della foto scelta e la mostra grande, con la miniatura evidenziata in oro. Il modulo è lo stesso della pagina contatti, con il messaggio precompilato e l'identificativo dell'annuncio.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per ogni agenzia o attività con un catalogo
Agenzie immobiliari, concessionari, noleggi, studi: se hai un elenco che cambia, il sito deve cambiare con lui.
01
Il sito è il gestionale
Se aggiornare un annuncio richiede una mail a qualcuno, il sito invecchia. Un pannello semplice vale più di una home bellissima.
02
Le foto devono essere facili
Trascinare e basta: la riduzione automatica evita foto da 8 MB e pagine lente, senza chiedere niente a chi carica.
03
Pochi filtri, quelli giusti
Zona, tipo, contratto, prezzo, stanze. Se agiscono subito, chi cerca resta.
04
Ogni scheda è una pagina di contatto
Il modulo di fianco, già compilato con l'interesse, raccoglie più richieste di una pagina contatti.
05
Proteggi la porta, non solo la serratura
Un account non basta: il ruolo va controllato nel database, dove anche le regole di scrittura lo rispettano.
Il prossimo potrebbe essere il tuo
Vuoi un sito che aggiorni da solo?
Agenzie, concessionari, noleggi, studi con un catalogo: se il tuo sito è fermo perché aggiornarlo è una fatica, costruiamo il pannello che ti serve. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti