Ideate.
Book Your Juzz - Quran Khatm Completion Platform
Back to Portfolio
Web Design & Development

Book Your Juzz - Quran Khatm Completion Platform

Overview

Khatmul Quran Booking System

A comprehensive platform for managing Khatmul Quran bookings with interactive Juz selection, multi-campaign support, and automatic Khatm management.

Features

  • Juz Booking System

    • Interactive grid-based interface for selecting Juz slots
    • Real-time updates when slots are booked
    • Form with validation to collect participant information
  • Automatic Khatm Management

    • Tracks completion of current Khatm (30 Juz)
    • Automatically creates a new Khatm when the current one is completed
    • Maintains khatm numbering inside each campaign
  • Multi-Campaign Support

    • Create and manage multiple campaigns (e.g., Ramadan 2025, Ramadan 2026)
    • Keep historical data isolated by campaign
    • Admin can switch campaign context for stats, history, and exports
    • Legacy records are auto-assigned to a default campaign on first run
  • Admin Dashboard

    • Overview statistics (total Khatms, bookings, etc.)
    • List of recent bookings with participant details
    • Khatm history showing completed and ongoing Khatms
    • Visualization of Juz distribution statistics
    • Campaign selector and "New Campaign" creation flow
  • User Experience

    • Responsive design that works across devices
    • Light and dark mode support
    • Clear visual indicators for booked vs. available slots
    • Progress tracking for Khatm completion

Tech Stack

  • Frontend: Next.js with React
  • Backend: Next.js API routes
  • Database: MongoDB (via Mongoose)
  • Styling: Tailwind CSS with Shadcn UI components

Project Gallery

Book Your Juzz - Quran Khatm Completion Platform screenshot 1
Book Your Juzz - Quran Khatm Completion Platform screenshot 2
Book Your Juzz - Quran Khatm Completion Platform screenshot 3

Project Details

Client
Akode Islamic Centre
Year
2025
Want to build something similar?

I'm currently available for new projects and collaborations.

Let's Talk