BariBhara — Full-Stack Smart Rental Management PWA
A production-grade Progressive Web Application (PWA) designed for automated property and rental management. Features WebAuthn biometric login, Tesseract.js NID OCR scanning, digital lease signing with canvas, automated rent receipts/PDF invoices, and real-time Socket.io notifications.
Key Highlights & Features
Core architecture capabilities & functional highlights
Multi-Role Portals
Separate dedicated dashboards for Landlords, Tenants, and Platform Administrators.
NID OCR Integration
Automated tenant onboarding and ID verification powered by Tesseract.js optical character recognition.
Digital Lease Agreements
In-browser canvas signature for legally compliant rental agreements with instant PDF download.
PWA & Offline-First
Fully installable on Android/iOS/Desktop with service worker caching and background sync.
PWA & Offline-First
Fully installable on Android/iOS/Desktop with service worker caching and background sync.
Real-time Notifications
Instant maintenance requests and rental alerts powered by Socket.io.
System Overview & Workflow
In-depth technical architecture, engineering choices, and business impact
Project Overview & Mission
BariBhara is a modern, installable rental management platform architected to solve chaotic, paper-based tenancy management in Bangladesh. It digitizes the complete tenant lifecycle—from listing discovery and digital lease agreement signing to automated rent invoicing and maintenance ticket dispatch.
Architecture & Engineering
Key Outcomes & Business Impact
- Replaced manual paper agreements with tamper-proof digital leases signed in under 2 minutes.
- Reduced tenant onboarding time by 70% using client-side OCR auto-population.
- Zero-latency notification delivery between landlords and tenants via WebSockets.
The Technical Challenge
Messy Multi-Role Conditions
Checking landlord vs tenant permissions with repeated 'if-else' blocks inside every component made the codebase cluttered and hard to maintain.
Form Validation Clutter
Adding properties, units, and tenant details required dozens of manual if-else checks, bloating component files.
Complex State & Prop Drilling
Passing rental calculation and bill split data across nested components caused unnecessary re-renders and bloated Context code.
Repetitive Data Fetching
Writing manual useEffect hooks, loading booleans, and error try-catches across every page duplicated hundreds of lines of code.
Engineered Solution
Centralized Role-Based Guards
Replaced dozens of if-else checks with a single reusable Higher-Order Guard, making route security clean in just 1 line of code.
Declarative Schema with Zod
Swapped manual validation loops with unified Zod schemas, handling form validation automatically with React Hook Form.
Lightweight State via Zustand
Replaced heavy Context boilerplates with atomic Zustand stores, so only components using the specific data re-render.
Streamlined Async Data via TanStack Query
Eliminated manual useEffects and loading states; automated caching, refetching, and error handling in a single hook call.
Interface & Key Screens
Click any image to inspect, zoom, and pan in full-screen
