VCM
A role-based web app that puts everything a residential community needs into one interface: owners, residents, finance, bookings, requests, and reporting.
React 19
React Router 7
Vite
TypeScript
SCSS
Jotai
SWR
Firebase Cloud Messaging
Overview
VCM is the front end for a property and community management platform that serves two very different audiences from the same codebase. Administrators use it to run operations: properties, residents, finance, incidents, reporting, and communication. Owners and residents use it to handle their own affairs, including payments, service requests, amenity bookings, documents, and community information. The product pulls a pile of scattered, manual workflows into one consistent place.
The Problem
Running a residential community means juggling a lot of moving parts at once: resident and owner records, maintenance and service requests, amenity bookings, complaints, payment histories, statements, inspection and incident reports, and announcements. When those live across spreadsheets, email threads, and disconnected tools, things slip through the cracks. The challenge was building one interface that serves both an operations team and the residents they look after, two genuinely different experiences, while keeping the product fast, consistent, and maintainable as more workflows get added.
My Role & Approach
I led the front-end build: the application architecture, the shared data layer, the reusable UI patterns, and the role-based structure that holds it all together. As the top contributor on the codebase, I set the conventions the rest of the work followed. My priority was to avoid the trap these apps usually fall into, which is rebuilding the same table, filter, and form logic for every new entity. Instead I built a small set of strong primitives and a permission-aware shell, so adding a new workflow became a matter of composition rather than reinvention.
Tech Stack
Key Features
Gallery
Challenges & Solutions
The central challenge was scale of surface area: dozens of entity types, each needing list, filter, create, edit, and export, across two user roles. Rewriting that per feature would have produced an unmaintainable app. I solved it with reusable primitives and a configurable, permission-driven navigation model, so the interface adapts to what the backend grants without hardcoding menus or duplicating logic.
The other recurring need was state that survives the real world. I drove list pagination and filtering through the URL's query string, which makes views shareable, keeps browser back and forward working naturally, and preserves table state across reloads. I centralised auth into shared state and the request layer so feature components stay lightweight, and I added an error boundary, loading states, and a graceful redirect on session expiry so a dense dashboard never fails silently.
Outcome
VCM is a single front end that genuinely serves both sides of community management. Operations teams run the full property lifecycle from one admin workspace, and residents self-serve on payments, requests, bookings, and documents. Because it's built on shared primitives and a permission-aware shell, the codebase keeps scaling as new workflows get added rather than getting heavier with each one.
Have a similar product problem?
Share the current product, the outcome you need, and the constraints already in the way. I will use that to define a sensible first milestone.
SaaS development services