A modern, full-stack digital property management and tenant billing platform designed to bring transparency, auditability, and automation to informal rental markets.
While this platform is built with a highly flexible architecture applicable to rental markets globally, its design is deeply informed by the unique, high-friction dynamics of the Ghanaian rental ecosystem and similar developing market landscapes.
In many developing regions, particularly across rapidly urbanizing Ghanaian hubs like Accra, Kumasi, and Takoradi, the residential rental sector is characterized by limited transparency, informal practices, and frequent disputes between landlords and tenants. Key structural challenges include:
- Excessive Rent Advances & Informal Agreements: A common market norm is demanding rent advances of one to two years upfront (in spite of formal regulations like the Rent Act). Most tenancy agreements are verbal or highly informal, leaving both landlords and tenants vulnerable to sudden evictions, arbitrary price hikes, and communication breakdowns.
- Shared Utility & Prepaid Billing Disputes: Shared prepaid electricity meters (such as ECG prepaid systems) and communal water bills are a constant source of friction. Co-tenants and landlords lack a clear, neutral, and automated mechanism to divide utility consumption and costs fairly, leading to ongoing disputes.
- Information Asymmetry & Middlemen: Real estate platforms in these markets focus almost exclusively on initial property listings and advertising. They do not handle the ongoing lifecycle of tenancy. Landlords are left with fragmented, manual paper records, and tenants have no credible payment receipts or formal tenancy histories.
- Lack of Audit Trails: The absence of digital documentation makes auditing rent collections, utility payments, and maintenance history nearly impossible. In the event of a dispute, neither party has access to a reliable, neutral single source of truth.
This Digital Property Management System acts as a reliable digital registry and billing engine to digitize and standardize routine rental operations. It replaces verbal promises and manual paper calculations with an automated, transparent system:
- Real-Time Availability & Property Auditing: Landlords can monitor their entire property portfolio, track occupied/unoccupied units in real time, and view historical occupancy patterns.
- Automated Utility & Rent Billing: An automated billing engine calculates utility splits (e.g., dividing electricity/water bills among co-tenants) and automatically issues digital invoices.
- Immutable Digital Records: Tenants and landlords have instant access to detailed payment receipts, account statements, and formal digital tenancy agreements.
- Role-Based Dashboards: Separate user portals for Landlords and Tenants with tailored views, communication feeds, and action items.
Because this prototype doesn't include real payment processing systems, billing is managed through a status-tracking workflow that mimics the payment acknowledgment process:
- Bill Creation: Landlords use the landlord dashboard to generate bills for rent and utilities. Each billing item includes a description, amount, due date, and property reference, and is stored in the database with a status of "Pending". This process establishes a formal record of the financial obligations.
- Tenant View: The platform displays outstanding rental and utility bills for tenants. To help tenants understand their bills, the interface displays billing information clearly. This transparency eliminates information asymmetry in the Ghanaian rental market.
- Tenant Action: Bills are marked as "Paid" in the system following payment via Mobile Money (MoMo), bank transfer, or cash. This updates the bill's status and records a timestamp to log the tenant's payment claim. Note that the payment claim is recorded by the system for verification, not processed financially.
- Landlord Verification: Landlords view the updated status on their dashboard when a tenant designates a bill as "Paid". Once they confirm receipt of funds outside the system, the landlord marks the bill as "Completed". This two-step confirmation ensures both parties consent to the payment.
This billing procedure follows a state machine structure (Pending → Paid → Completed) to provide predictable bill progression, separate notification from verification, and prevent invalid state changes.
.png)
.png)
.png)
Landing Page
Properties Page
.png)
Property - Bills section
Properties - Rooms section
.png)
Properties - Announcements section
Create Announcement modal
- React
18.3.1 - Vite
^6.4.1 - TypeScript
- React Router
7.13.0 - React Query
^5.95.2 - React Hook Form
7.55.0 - Zod
^4.3.6 - Axios
^1.13.6 - Tailwind CSS
4.1.12 - Lucide React
0.487.0 - Motion
12.23.24 - React Hot Toast
^2.6.0 - Tw Animate CSS
1.3.8
- Node.js / Express
5.2.1 - TypeScript
^5.9.3 - ts-node-dev
^2.0.0 - Mongoose
^9.1.6 - JSON Web Tokens
9.0.3 - Zod
^4.3.6 - bcrypt
6.0.0and argon2^0.44.0 - Multer
^2.1.1 - Pino
^10.3.0+pino-pretty^13.1.3 - Express Rate Limit
^8.3.0 - cookie-parser
^1.4.7 - config
^4.2.0 - dotenv
^17.3.1 - Day.js
^1.11.19
- MongoDB via Mongoose ODM
- Local development with Node and Vite
- Environment configuration via
.env
- Role-Based Routing & Access Control: Protected tenant and landlord sections enforcing proper user context and access rules.
- Centralized API Validation: Shared schemas using Zod for robust request validation and type-safe server-client contracts.
- Asynchronous UI State Management: Integrated React Query for cache-aware data fetching, query invalidation, optimistic updates, and clean loading/error states.
- Secure Authentication: JSON Web Tokens (JWT) stored in HTTP-only cookies, combined with secure password hashing via bcrypt and argon2.
- Production-Minded Backend Middleware: Configured CORS, rate limiting, request logging, standard error handlers, and file upload processing using Multer.
- Component-Driven UI Design: Highly reusable form controls, modal managers, alerts, and navigation abstractions.
- Service-Oriented Architecture: Clear separation of concerns in the backend with distinct controllers, services, Mongoose models, and route definitions.
- package.json — Frontend dependencies and scripts
- main.tsx — Application entrypoint
- App.tsx — Provider composition and global layout
- routes.tsx — Application routing and protected route guards
- components — Reusable UI components and layout pieces
- context — Authentication and app-level context providers
- hooks — Custom hooks for frontend behavior
- provider — React Query provider setup
- schema — Client-side Zod validation schemas
- services — Axios-based API service functions
- utils — Shared UI and helper utilities
- styles — Tailwind and theme styling
- package.json — Backend dependencies and dev scripts
- app.ts — Express application setup and server bootstrap
- routes.ts — API route registration
- controller — Request handlers for resources (users, rooms, bills, bookings, properties, tenancies)
- service — Business logic and data orchestration layer
- model — Mongoose data models and schema definitions
- schema — Zod validation schemas for request body validation
- middleware — Auth, error-handling, rate-limiting, and validation middleware
- utils — Database connection, JWT helpers, error factory, and logging
- config — Configuration defaults and environment settings
- Node.js 18+ installed
- npm installed (bundled with Node.js)
- MongoDB available locally or via cloud connection
- Open a terminal and navigate to the backend directory:
cd backend - Install backend dependencies:
npm install
- Create a
.envfile in the backend directory and add the required environment variables:PORT=5000 MONGO_URI=mongodb://localhost:27017/property_management JWT_SECRET=your_jwt_secret_key_here
- Start the backend development server:
npm run dev
- Confirm the backend is listening and successfully connected to MongoDB.
- Open a terminal and navigate to the frontend directory:
cd frontend - Install frontend dependencies:
npm install
- Start the Vite development server:
npm run dev
- Open the application in your browser at the Vite local URL (typically
http://localhost:5173).
This repository demonstrates a clean, production-ready full-stack workflow:
- Modern React UX Patterns: Implements declarative routing, custom UI state management, and type-safe hooks.
- Separation of Concerns: Clean MVC/Service pattern on the backend, ensuring backend code remains modular, readable, and easy to unit test.
- Production Readiness: Solid security baselines including rate limiting, CORS configuration, security-minded cookie handling, and validation layers.
- Developer Ergonomics: Streamlined tooling using Vite, React Query, TypeScript, and a unified lint/format standard.
Thank you for reviewing this project. Please reach out if you would like a brief walk-through of the codebase architecture!