Manazil Al Haramain - Multi-Tenant Travel Agency CRM & Marketplace
A production-grade, multi-tenant SaaS platform where multiple licensed travel agencies list, sell, and manage Hajj, Umrah, Northern Pakistan, and international tour packages through a single unified marketplace. It provides dedicated dashboards for customers, agencies, and platform administrators, with AI-powered assistance, real-time analytics, and end-to-end booking, payment, and ledger management.
What is Manazil Al Haramain - Multi-Tenant Travel Agency CRM & Marketplace?
Manazil Al Haramain is a multi-tenant travel-agency CRM and marketplace I built to let multiple licensed agencies sell and manage Hajj, Umrah, and tour packages on one platform. It combines role-based dashboards for customers, agencies, and admins with a full booking, payment, and commission ledger system, AI-powered support and analytics, real-time charts, multilingual (EN/UR/AR) RTL support, and production-grade security enforced by PostgreSQL Row-Level Security.
Technologies & Tools Used
Technical Highlights
- Next.js - App Router with React Server Components, Server actions & route handlers, ISR and SEO optimization
- React - Component-driven UI, State-managed dashboards
- TypeScript - Strict typing, End-to-end type-safe data models
- TailwindCSS - Utility-first styling, Responsive, themeable dashboards
- Supabase - PostgreSQL database, Authentication & Google OAuth, Row-Level Security (RLS), Private Storage with signed URLs
- PostgreSQL - Row-Level Security policies, Multi-tenant data isolation, SQL migrations
- AI Integration - Google Gemini, RAG support chatbot, Natural-language analytics, Passport OCR & translation
- next-intl - EN / UR / AR localization, Full RTL support
- recharts - Interactive charts, Revenue & booking analytics
- Framer Motion - UI micro-interactions, Smooth transitions
- Zod - Shared client/server validation, Type-safe schemas
- Leaflet - Interactive hotel maps, Distance-to-Haram markers
- Security - Content Security Policy & security headers, Rate limiting & reCAPTCHA, Audit logging
- lucide-react - Consistent icon system, Clean UI visuals
Key Features
- Architected a multi-tenant marketplace with role-based access control (RBAC) and PostgreSQL Row-Level Security (RLS) enforcing strict data isolation between agencies and customers at the database level.
- Built three distinct, reusable dashboard experiences (customer, agency, and platform admin) on the Next.js App Router using React Server Components for performance.
- Implemented the complete booking lifecycle: reservations, partial payments, status tracking, cancellations, and refunds, backed by a financial ledger and commission engine.
- Developed invoicing, agency payouts, coupons, and a disputes resolution system with full audit logging of every meaningful action.
- Created public marketplace features: package listings, branded agency storefronts, search and filtering, reviews and ratings, and lead capture forms.
- Integrated AI features via Google Gemini: a retrieval-augmented (RAG) support chatbot grounded on live catalog data, natural-language analytics, automated dispute triage, passport OCR for auto-filling forms, and multilingual content translation.
- Built real-time analytics dashboards with Recharts (revenue trends, booking breakdowns, agency performance) implementing loading, empty, error, and populated states.
- Delivered full internationalization for English, Urdu, and Arabic with complete right-to-left (RTL) support using next-intl.
- Integrated interactive maps (Leaflet) for hotel locations and distance-to-Haram visualizations.
- Hardened the platform for production: Content Security Policy, security headers, Zod validation, rate limiting, Google reCAPTCHA, Google OAuth sign-in, and private file storage with signed URLs.
- Optimized SEO and Core Web Vitals with dynamic metadata, JSON-LD structured data, an auto-generated sitemap, and Open Graph cards.
Project Category
Project Showcase
