JHomes

🔹 Project Overview

JHomes digitizes the entire rental lifecycle—from property onboarding and digital contract signing to automated rent collection, maintenance handling, refund workflows, and dispute resolution—using a highly scalable, role-based architecture.

The system supports six distinct user roles (Landlord, Tenant, Vendor, Admin, Sub-Admin, Super Admin), each with isolated dashboards, permissions, and workflows enforced using JWT authentication, role-based middleware, and protected frontend routing.

The platform is actively used in production and has published mobile applications on both the App Store and Play Store, making it a fully operational commercial product rather than a demo or academic project.

Company: Betopia Group (SM Technology)
Role: Senior Frontend Engineer & Web Project Lead
Project Type: Real-World Industrial Product (Web + Mobile Apps)
Status: Live (Web, Android & iOS)

---

🔹 Property & Contract Management Flow

• Multiple property onboarding models were implemented to support real-world rental scenarios, including public listings and private, invite-only rentals initiated by landlords or vendors using secure email invitations.

• Digital contract signing workflow ensures sequential signing where tenants sign first, landlords receive automated notifications, and contracts activate only after both parties complete the process.

• Email-driven contract invitations are generated dynamically, allowing targeted tenants to review property details and sign contracts securely without manual intervention.

---

🔹 Key Features & Functionalities

🔐 Authentication & Authorization

• Implemented JWT-based authentication with secure cookie handling, server-side token decoding, and role-based access control enforced at both frontend and backend levels.

• Built protected routes and dashboards using Next.js App Router, middleware logic, and role-aware navigation rendering.

📊 Role-Based Dashboards (Next.js + Redux Toolkit)

• Developed dynamic dashboards where each user role sees only relevant features, menus, and data, driven by role mappings and centralized permission logic.

• Integrated Redux Toolkit and RTK Query to manage global state, caching, API calls, and real-time UI updates efficiently.

💳 Payments, Wallet & Finance System

• Implemented monthly rent payments, deposit wallets, refund workflows, and payment history using secure backend APIs and third-party payment gateway integration.

• Built receipt generation and PDF downloads using backend services, allowing tenants to access official payment documents at any time.

🔧 Maintenance & Rental Lifecycle Management

• Designed a complete maintenance request system where tenants can raise issues, landlords/vendors can respond, and admins can monitor resolution status.

• Implemented quit-rental request flows where either party can initiate a request and the counter-party can accept or decline, ensuring transparent exit handling.

💬 Real-Time Messaging & Notifications

• Integrated WebSocket-based real-time messaging using Socket.IO for instant communication between landlords, tenants, vendors, and administrators.

• Built a notification system for rent due alerts, upcoming payments, contract events, and maintenance updates using background jobs and event-driven logic.

🚨 Red-List & User Risk Management

• Implemented a red-list management system to flag problematic users, restrict future rentals, and provide visibility across different roles to reduce operational risk.

---

🔹 Challenges & Solutions

🔴 Challenge 1: Managing a Complex Multi-Role System (6 User Roles)

Problem:
Designing a single platform that supports six different user roles (Landlord, Tenant, Vendor, Admin, Sub-Admin, Super-Admin), each with unique permissions, dashboards, workflows, and business rules, without creating duplicated logic or security risks.

Solution:

• Implemented a centralized role-based access control (RBAC) system using JWT tokens

• Protected routes on both frontend and backend using role validation middleware

• Dynamically rendered sidebar menus and dashboard features based on user roles

• Ensured strict permission isolation for sensitive actions like payments, refunds, and user management

This ensured scalability, security, and clean separation of responsibilities across roles.

---

🔴 Challenge 2: Handling Complex Rental Contract Lifecycle

Problem:
Managing real-world rental workflows such as listing onboarding, invite-only rentals, multi-stage contract signing, and legally sensitive rental activation while keeping the process user-friendly.

Solution:

• Designed multiple onboarding flows for Listing, Existing Rental, and New Rental contracts

• Implemented email-based tenant invitations with secure contract links

• Built a dual-signature workflow where contracts activate only after both parties sign

• Synced contract state across web and mobile platforms

This accurately reflected real Nigerian rental processes in a fully digital workflow.

---

🔴 Challenge 3: Ensuring Reliable Payments & Monthly Billing

Problem:
Handling recurring rent payments, refunds, wallet deposits, and transaction history while ensuring financial accuracy and user trust.

Solution:

• Integrated secure payment flows for rent, deposits, and wallet top-ups

• Built payment history, receipt generation, and refund tracking modules

• Added backend validation to prevent duplicate or invalid payments

• Implemented automated notifications for upcoming and overdue payments

This provided a transparent, reliable, and auditable financial system for all users.

---

🔴 Challenge 4: Real-Time Communication & Notifications

Problem:
Keeping landlords, tenants, vendors, and admins synchronized in real time for messaging, maintenance requests, payment updates, and system alerts.

Solution:

• Implemented WebSocket-based real-time messaging and notifications

• Synced live updates with Redux state for consistent UI behavior

• Added backend event validation to prevent race conditions

• Ensured graceful fallbacks for unstable network conditions

This significantly improved user engagement and operational responsiveness.

---

🔴 Challenge 5: Project Continuity During Team Turnover

Problem:
Mid-project loss of backend and mobile developers created risks in delivery timelines, system understanding, and feature consistency.

Solution:

• Took ownership of understanding the full system architecture and business logic

• Coordinated between frontend, backend, and mobile teams to maintain alignment

• Contributed directly to backend API creation and logic when required

• Acted as a technical bridge between stakeholders and development teams

This ensured uninterrupted delivery and long-term project stability.

---

🔴 Challenge 6: Scaling a Large Enterprise Dashboard

Problem:
Managing performance and usability in a feature-heavy dashboard with dozens of modules, charts, real-time updates, and role-specific views.

Solution:

• Modularized dashboard architecture using reusable components and layouts

• Optimized API calls with caching, pagination, and debouncing

• Introduced lazy loading and optimistic UI updates

• Improved perceived performance on low-bandwidth networks

This resulted in a smooth, scalable, enterprise-grade dashboard experience.

---

🔹 Learning Outcomes

• Gained hands-on experience building and maintaining a large-scale SaaS rental platform used by real customers across web and mobile

• Strengthened expertise in role-based systems, secure authentication, and authorization design

• Learned how to model real-world legal and financial workflows into scalable software systems

• Improved leadership skills by managing cross-team coordination and technical ownership

• Deepened understanding of enterprise frontend architecture with Next.js, Redux Toolkit, and real-time systems

• Developed confidence handling production-grade systems with payments, notifications, and user management

🔹 Frontend Architecture & Technologies

• Next.js (App Router) – Server-side rendering and scalable routing

• TypeScript – Type safety across a large enterprise codebase

• Redux Toolkit & RTK Query – State management and API data caching

• Tailwind CSS & ShadCN UI – Consistent, accessible UI components

• Framer Motion – Smooth animations and transitions

• Websocket – Real-time messaging and notifications

• React Hook Form + Zod – Form handling and validation

---

🔹 Backend Architecture & Technologies

• • Node.js & Express.js – RESTful API architecture

  • TypeScript – Strongly typed backend services

  • MongoDB & Prisma – Data modeling and database access

  • JWT Authentication – Secure role-based access control

  • BullMQ & Redis – Background jobs, notifications, and queues

  • WebSockets (ws) – Real-time communication

  • Multer & Sharp – File upload and image optimization

  • Nodemailer – Email notifications and invitations

  • ---

    🔹☁️ Infrastructure & Services

  • AWS S3 – File and document storage

  • Firebase Admin – Push notifications and admin services

  • PDFKit & Puppeteer – Receipt and document generation

  • Docker & PM2 – Production deployment

  • App Store & Play Store – Mobile app distribution

---

🔹 My Role & Impact

• Acted as the primary frontend engineer responsible for dashboard development, API integration, and role-based access control across the web platform.

• Implemented all major frontend-backend integrations while collaborating with designers and aligning UI behavior with complex business rules.

• Took ownership of the project during critical phases when backend and mobile developers left, contributing to backend API development, logic building, and production debugging.

• Played a key role in project continuity, technical decision-making, and cross-team communication, effectively acting as a web project lead.