BookYour Juzz' | Khatmul Quran Booking System

A real-time, transparent system for assigning all 30 Juz and tracking each Khatmul Quran cycle with clarity.

Client

Akode Islamic Centre

Duration

2 months

Project Overview

BookYour Juzz' is a community-driven Khatmul Quran booking platform that enables Islamic communities and Majlis coordinators to organize collective Quran recitation with full transparency. Users can pick any open Juz from an interactive 30-slot grid, submit their details, and their slot is confirmed instantly with real-time updates. The system automatically tracks Khatm completion — once all 30 Juz are booked, it creates a new Khatm cycle and maintains numbering across campaigns. Coordinators get a comprehensive admin dashboard with booking statistics, cycle history, participant details, Juz distribution visualization, and multi-campaign support (e.g., Ramadan 2025, Ramadan 2026). Built with Next.js, MongoDB (Mongoose), Tailwind CSS, and Shadcn UI components, the platform delivers a premium dark-themed UI with full light/dark mode support and responsive design across all devices.

Technologies & Tools

Modern technologies used to build this project

Next.js

React

TypeScript

MongoDB

Mongoose

Tailwind CSS

Shadcn UI

Next.js API Routes

Radix UI

Challenges

Building a real-time booking grid that updates instantly when someone reserves a Juz

Creating automatic Khatm cycle management — auto-creating new cycles when all 30 Juz are booked

Implementing multi-campaign support with isolated data per campaign (e.g., Ramadan 2025 vs 2026)

Designing a comprehensive admin dashboard with booking stats, history, and Juz distribution analytics

Ensuring form validation for participant details while keeping the booking flow frictionless

Solutions

Built an interactive 30-slot grid with clear visual indicators for booked vs. available Juz using Shadcn UI components

Implemented automatic Khatm numbering and cycle creation logic in MongoDB with Mongoose middleware

Created a campaign selector with context switching for stats, history, and data exports in the admin panel

Designed a premium dark-themed dashboard with overview statistics, recent bookings list, and Juz distribution charts

Used React Hook Form with validation for quick booking while collecting name, location, phone, and optional email

Results & Impact

Measurable outcomes and business impact of this project

Enabled transparent coordination of 28+ completed Khatm cycles

Reduced manual Juz assignment time from hours to seconds

Active visitor tracking shows real-time engagement on the booking page

Responsive design achieves 95%+ mobile usage from community members

Admin dashboard provides complete oversight with export capabilities

Ready to Start Your Project?

Let's create something amazing together. As a leading web designer in Kerala, I'm here to help bring your vision to life.

Start Your Project View More Projects