Property Portfolio Management Platform — Case Study

Property Portfolio Management PlatformMonthos built a single operations workspace for a residential and short-stay rental portfolio—replacing spreadsheets, inboxes and channel dashboards with one secure, bilingual platform covering buildings, apartments, leads, tenants, leases, documents, bookings and procurement.

Industry

Property management / residential & short-stay rentals

Product type

Internal operations web application (admin back office)

Built by

Monthos

At a glance

Problem / What we built

Portfolio operations were spread across spreadsheets and channel dashboards. We built a single authenticated workspace covering buildings, apartments, the lettings pipeline, tenants, leases, documents, a multi-channel booking calendar and procurement.

Who it's for

Property managers and operations staff running a multi-building rental portfolio, including short-stay listings across Airbnb, Booking.com and Vrbo alongside direct lets.

Stack

React 19 + TypeScript + Vite, Tailwind CSS v4, Supabase (Postgres, Auth, Storage) with row-level security, i18next (English/French), Recharts.

Scope / Deployment

8 product modules, 14 application tables across 21 migrations, a 25-module typed data layer, bilingual UI. Deployed as a static single-page app backed by Supabase.

Project impact

One bilingual workspace replaced spreadsheets, inboxes and channel dashboards for a multi-building rental portfolio.

Enquiry to tenant in one step. A single guided workflow creates the tenant and lease, writes a conversion note and syncs the apartment's status—removing repetitive manual re-entry.

One occupancy view across every channel. Airbnb, Booking.com, Vrbo and direct lets, plus leases, on a single month/week calendar.

Security built in, not bolted on. Row-level security on all 14 tables and private, signed-URL document storage for passports, visas and contracts.

Bilingual by default. A fully localised English/French interface for a team that works in both.

Who this is for: property managers, portfolio operators, student-housing operators and short-stay businesses running multiple units across channels.The challengeA growing rental portfolio quickly outgrows ad-hoc tools. The day-to-day reality the product set out to fix:

Fragmented records. Buildings, units, enquiries, tenants and supplier costs lived in separate spreadsheets and inboxes, with no single source of truth.

No clear pipeline from enquiry to tenant. Inbound interest had to be tracked, qualified and then manually re-entered as a tenant and lease once it converted — a repetitive, error-prone hand-off.

Short-stay complexity. Units are let across multiple channels (Airbnb, Booking.com, Vrbo) as well as directly, making it hard to see — at a glance — what is occupied, vacant or in turnover on any given date.

Sensitive documents everywhere. Passports, visas, contracts, bills and invoices needed to be stored against the right tenant and unit, securely, rather than emailed around.

Procurement with no visibility. Vendor spend against buildings was difficult to request, track and report on.

A bilingual team. Staff work in both English and French, so the interface needed first-class localisation rather than an afterthought.

Our approachMonthos approached this as a focused internal operations tool: opinionated where it helps staff move quickly, and conservative where data integrity matters.Guiding principles:

One workspace, clearly modularised. Each operational concern — buildings, apartments, leads, customers, calendar, procurement — is its own module behind a consistent shell, so the surface is broad without feeling sprawling.

Integrity in the database, not just the UI. Business rules (date ranges, status workflows, occupancy limits, "one primary contact" rules) are enforced with Postgres constraints and indexes, so the data stays correct regardless of how it's edited.

A typed seam between UI and data. Every table is fronted by a dedicated, typed data-access module, keeping React components clean and the Supabase surface area contained.

Localisation as a foundation. The interface is fully translated and locale-aware (dates, numbers, errors) from the ground up, with the user's choice persisted.

A shared design system. The UI is composed from a single token-driven design vocabulary for consistent spacing, density and styling across every screen.

What we deliveredThe application is organised into eight modules behind a single authenticated shell with a persistent sidebar, search, sortable/paginated tables, slide-over detail drawers, and a comfort/density display toggle.Portfolio & buildings

Buildings register with manager contact details, total and available apartment counts, and address.

Portfolio vacancy indicator — a live progress bar and summary derived from real apartment data.

Full create/edit flow with validation, search highlighting, multi-select, sorting and pagination.

Apartments

Unit-level inventory linked to its building, with floor, unit type (Studio, 1 BR, 2 BR, 3 BR), tenant, door code and status (occupied, vacant, maintenance).

Per-unit rent at day, week and month rates and lease-end dates.

Associated parking bays (floor + bay) tracked per apartment.

Lettings pipeline (Leads)

A leads register capturing contact details, interested building, unit-type preference, source and follow-up date.

A six-stage pipeline: new → contacted → qualified → tour scheduled → converted → lost, with six capture sources.

Lead to tenant in one guided workflow. Staff turn a qualified lead into a tenant and lease in a single step—copying primary phone and email, writing a conversion note, opening a lease against a chosen apartment, syncing that apartment's status, and marking the lead converted—so there's no manual re-entry and occupancy stays in sync.

Customers (tenants)A tabbed tenant record bringing together everything about a resident:

Tab

Contents

Information

Name and multiple labelled phone/email contacts, with enforced "one primary" per type

Leases

Leases linking the tenant to specific apartments, with start/end dates

Attachments

Securely stored documents — passports, visas, contracts, bills, invoices

Vehicles

Registered vehicle licence plates

Notes

Timestamped notes attributed to the signed-in user

Rentals calendar

Month and week views in a familiar calendar layout, rendering multi-day stays as continuous bars that span and wrap across weeks.

Channel-aware: Airbnb, Booking.com, Vrbo and direct bookings are colour-coded, with leases surfaced alongside bookings.

Check-in / check-out indicators and a booking detail view for day-to-day operations.

Procurement

Vendor directory with category (cleaning, maintenance, supplies, utilities, professional services, other), contact details and active flag.

Purchase orders against a vendor and (optionally) a building, with a six-stage status workflow (draft → submitted → approved → ordered → received → cancelled), amount, currency and dates.

Reporting that aggregates spend by month, vendor, building and category, plus order-status breakdowns and summary metrics (total spend, average order value, active vendors).

System alerts & settings

Schedulable system alerts with publish / unpublish windows that surface as a site-wide banner to staff, managed from Settings.

Technical highlights

Layer

Technology

Frontend framework

React 19 + TypeScript (~5.8)

Build tooling

Vite 6

Styling

Tailwind CSS v4 (Vite plugin) + a token-driven design system

UI building blocks

Radix UI (Select), lucide-react icons, Motion

Data visualisation

Recharts (vacancy and procurement charts)

Internationalisation

i18next / react-i18next — English & French, 11 namespaces

Database

Supabase (PostgreSQL)

Authentication

Supabase Auth (email / password)

File storage

Supabase Storage (private bucket, signed URLs)

Hosting

Static SPA on a CDN host (Netlify), Supabase as managed backend

Quality gate

TypeScript strict type-checking (tsc --noEmit)

Notable architecture decisions

Row-level security on every table. All 14 tables ship with RLS enabled and explicit select/insert/update/delete policies, so data access is governed at the database, not just in the client.

Critical business rules are enforced in the database, so the data stays consistent as the system grows. Check constraints encode real rules — available apartments can't exceed total, lease and booking end-dates must follow start-dates, bills and invoices must be linked to an apartment — backed by partial unique indexes (one primary phone/email per customer, one plate per customer, unique parking bays).

A reusable updated_at trigger keeps audit timestamps consistent across every table from a single shared function.

Referential integrity by intent. Foreign keys use deliberate delete behaviour — cascade for owned child records, set null for optional links, restrict to protect vendors referenced by purchase orders.

Secure document handling. Tenant documents live in a private Storage bucket with a MIME-type allowlist and a 50 MB size limit; downloads are served through short-lived signed URLs rather than public links.

A thin, typed data layer. Twenty-five focused modules sit between the React UI and Supabase, each owning one entity's queries and row-to-model mapping — keeping components declarative and the backend contract explicit.

Localisation as infrastructure. Locale is detected, persisted to storage and reflected on the document element; dates, numbers and validation messages all resolve through the active locale.

System architecture┌─────────────────────────────────────┐ │ Browser (Single-Page App) │ │ │ │ React 19 + TypeScript + Vite │ │ ┌─────────────────────────────────┐ │ │ │ 8 modules: Dashboard · Calendar │ │ │ │ Buildings · Apartments · Leads │ │ │ │ Customers · Procurement · Settings │ │ └─────────────────────────────────┘ │ │ i18n (EN/FR) · Recharts · Design system│ │ │ │ │ 25 typed data-access modules │ └────────────┼──────────────────────────┘ │ HTTPS (supabase-js) ▼ ┌──────────────────────────────────────────────────────┐ │ Supabase │ │ │ │ Auth Postgres (RLS) Storage │ │ (email/pw) 14 tables · 21 migrations private bucket │ │ triggers · constraints signed URLs │ └──────────────────────────────────────────────────────┘Outcomes

Before

After

Source of truth

Spreadsheets + channel dashboards + inboxes

One authenticated workspace

Enquiry → tenant

Manual re-entry across tools

One-click conversion (tenant + lease + note + status sync)

Occupancy view

Pieced together per channel

Unified month/week calendar across all channels + leases

Documents

Emailed / scattered

Private, access-controlled storage per tenant & unit

Procurement

Limited visibility

Tracked POs with spend reporting by month, vendor, building & category

Languages

Single-language tooling

Fully bilingual (English / French)

By the numbers

Metric

Count

Product modules

Database tables

14 (+ 1 storage bucket)

Database migrations

Typed data-access modules

UI languages

2 (EN / FR), 11 translation namespaces

Lead pipeline stages

Purchase-order workflow stages

Vendor categories

Booking channels

4 (Airbnb, Booking.com, Vrbo, Direct)

Document types

Why this project mattersThis is a strong reference build for data-dense internal operations software done properly:

It demonstrates end-to-end ownership of a real workflow — from inbound enquiry, through conversion, to tenant management, occupancy and supplier spend — rather than a single isolated feature.

It shows production-grade data discipline: row-level security, meaningful constraints, deliberate foreign-key behaviour and secure file handling are built in, not bolted on.

It proves bilingual, design-system-driven UI can be delivered consistently across a broad surface of tables, drawers, calendars and charts.

It reflects a maintainable architecture — a clean, typed seam between UI and backend — that's straightforward to extend as the portfolio and its channels grow.

Services demonstrated

Product discovery and scoping for internal operations tooling

Full-stack web application design and development

Database design with PostgreSQL — schema, migrations, constraints and row-level security

Authentication and secure, access-controlled file storage

Multi-channel booking & calendar UX

Workflow automation (lead-to-tenant conversion)

Reporting and data visualisation

Internationalisation (English / French)

Design-system-led UI engineering

Get in touchMonthos designs and ships custom, production-grade applications. If you're running operations on spreadsheets and disconnected tools and want a single, dependable workspace built around your workflow, we'd like to talk.Talk to Monthos →Case study prepared for Monthos.com · Project: Property Portfolio Management PlatformMonthos Group — Cheltondale, Johannesburg, SA. Email info@monthos.com, phone +27 (68) 750 7313.Case studies · Privacy Policy · Terms of Service