VCM

Role: Lead front-end engineerTimeline: 2025-2026Type: Web app (B2B SaaS)

React 19

React Router 7

Vite

TypeScript

SCSS

Jotai

SWR

Firebase Cloud Messaging

VCM hero image

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.

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.

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.

FrameworkReact 19 with React Router 7

BuildVite

LanguageTypeScript

StylingSCSS, organised per feature

StateJotai for app-wide state (auth, sidebar, selected property, notifications)

DataSWR over a shared Axios client, with automatic auth handling

NotificationsFirebase Cloud Messaging

ReportingRecharts for dashboards; @react-pdf/renderer and CSV utilities for exports

Two role-based experiencesseparate admin and owner shells that route users to the right place and enforce access.

Permission-aware navigationthe sidebar is built from each user's actual permissions, so people only see what they're allowed to use.

A shared data layerone request pipeline injects auth and device headers, caches with SWR, and handles expired sessions by returning the user cleanly to login.

Reusable feature primitiveslisting tables with pagination, filter inputs bound to the URL, modal forms, chart cards, file uploads, and export buttons that the whole app is assembled from.

Operational coverageservice requests, amenity booking and a community calendar, finance screens (payments, statements, invoices, reminders), user and unit management, and reporting.

Push notificationsFirebase messaging with in-app toasts.

PDF and CSV exportsfor the finance and reporting flows that need offline or submission-ready output.

VCM screen 1

VCM screen 2

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.

All projects Next projectZED (My Islamic Reminders)

Overview

TheProblem

MyRole&Approach

TechStack

KeyFeatures

Gallery

Challenges&Solutions

Outcome