VCM
Una web app basata su ruoli che riunisce in un'unica interfaccia tutto ciò di cui una comunità residenziale ha bisogno: proprietari, residenti, finanza, prenotazioni, richieste e reportistica.
React 19
React Router 7
Vite
TypeScript
SCSS
Jotai
SWR
Firebase Cloud Messaging
Panoramica
VCM è il front end per una piattaforma di gestione immobiliare e di comunità che serve due tipologie di utenti molto diverse a partire dallo stesso codebase. Gli amministratori lo usano per gestire le operazioni: immobili, residenti, finanza, incidenti, reportistica e comunicazioni. I proprietari e i residenti lo usano per gestire le proprie esigenze, tra cui pagamenti, richieste di assistenza, prenotazioni di servizi, documenti e informazioni sulla comunità. Il prodotto riunisce una serie di flussi di lavoro manuali e frammentati in un unico ambiente coerente.
Il problema
Gestire una comunità residenziale significa coordinare molti elementi contemporaneamente: registri di residenti e proprietari, richieste di manutenzione e assistenza, prenotazioni di servizi, reclami, cronologia dei pagamenti, estratti conto, verbali di ispezione e incidenti, e avvisi. Quando queste informazioni sono distribuite tra fogli di calcolo, thread di email e strumenti disconnessi, qualcosa finisce inevitabilmente per perdersi. La sfida consisteva nel realizzare un'unica interfaccia utile sia per il team operativo sia per i residenti seguiti, offrendo due esperienze realmente distinte e mantenendo il prodotto rapido, coerente e manutenibile con l'aggiunta di ulteriori flussi di lavoro.
Il mio ruolo e approccio
Ho guidato lo sviluppo del front end: l'architettura dell'applicazione, il data layer condiviso, i pattern UI riutilizzabili e la struttura basata sui ruoli che tiene insieme il tutto. In qualità di contributor principale del codebase, ho definito le convenzioni che hanno guidato il resto dello sviluppo. La mia priorità era evitare l'errore tipico di queste applicazioni, ossia riscrivere la stessa logica di tabelle, filtri e moduli per ogni nuova entità. Ho invece realizzato un set ridotto di solide primitive e una shell basata sui permessi, rendendo l'aggiunta di un nuovo flusso di lavoro una questione di composizione anziché di reinventare da zero.
Stack tecnologico
Funzionalità chiave
Galleria
Sfide e soluzioni
La sfida principale è stata l'ampiezza della superficie applicativa: decine di tipi di entità, ciascuna con necessità di elenco, filtro, creazione, modifica ed esportazione, distribuite su due ruoli utente. Riscrivere tutto ciò per ogni singola funzionalità avrebbe generato un'applicazione non manutenibile. Ho risolto il problema con primitive riutilizzabili e un modello di navigazione configurabile guidato dai permessi, in modo che l'interfaccia si adatti a ciò che il backend autorizza senza menu hardcoded né logiche duplicate.
L'altra esigenza ricorrente era uno stato capace di reggere l'uso reale. Ho gestito la paginazione e i filtri delle liste tramite la query string dell'URL, rendendo le viste condivisibili, preservando la normale navigazione avanti/indietro del browser e mantenendo lo stato delle tabelle anche dopo il ricaricamento. Ho centralizzato l'autenticazione nello stato condiviso e nel layer delle richieste per mantenere leggeri i componenti delle funzionalità, e ho introdotto un error boundary, stati di caricamento e un reindirizzamento fluido alla scadenza della sessione, evitando che una dashboard complessa fallisca silenziosamente.
Risultato
VCM è un unico front end che serve realmente entrambi i lati della gestione di comunità. I team operativi gestiscono l'intero ciclo di vita degli immobili da un unico workspace di amministrazione, mentre i residenti operano in autonomia per pagamenti, richieste, prenotazioni e documenti. Poiché è basato su primitive condivise e su una shell orientata ai permessi, il codebase continua a scalare con l'aggiunta di nuovi flussi di lavoro invece di appesantirsi a ogni nuova funzionalità.
Hai un problema di prodotto simile?
Condividi il prodotto attuale, il risultato di cui hai bisogno e i vincoli già presenti. Li utilizzerò per definire un primo milestone sensato.
Servizi di sviluppo SaaS