Badminton Court Slot Booking System

Project Overview

Key Features

• Interactive Slot Grid: A live schedule grid per court showing available, booked, past, and currently-selected time slots with clear color-coded states and a legend.
• Multi-Court Scheduling: Supports multiple courts with independent availability, each bookable in fixed 1.5-hour blocks across 30-minute grid increments.
• Smart Slot Selection: Hovering or selecting a time snaps to the best-fitting 90-minute block that doesn't overlap an existing booking.
• Date-Bounded Booking Window: Customers can book from today up to 10 days in advance, with past time slots on the current day automatically disabled.
• Timezone-Aware Scheduling: Availability and time calculations are handled correctly for the venue's local timezone (Asia/Dhaka).
• Instant Booking Confirmation: A confirmation modal collects the customer's name and phone number, validates input, and submits the booking directly to the API.
• Conflict Detection: The booking API checks for an existing reservation on the same court, date, and start time before confirming, returning a clear conflict error if the slot is already taken.
• Resilient Availability Loading: If the database is temporarily unreachable, the booking grid falls back to a static dataset so the page remains usable instead of breaking.
• Venue Landing Page: Includes a branded header, an auto-advancing image slider showcasing the courts, an amenities section (parking, lockers, refreshments, changing rooms), and an embedded Google Maps location with directions link.

Key Responsibilities

• Full-Stack Development: Designed and built the entire application solo, from the booking UI to the API and database integration.
• Booking Logic: Implemented the slot grid, availability rendering, and the time-snapping logic that maps a selected time to a valid booking block.
• API Development: Built the REST API route handling slot availability lookups (GET) and booking creation with conflict checking (POST) using Next.js Route Handlers.
• Database Integration: Connected the app to MongoDB Atlas using the native Node.js driver, including a connection-caching pattern to avoid exhausting connections during development.
• Frontend Development: Built the responsive booking interface and landing page sections using React 19 and Tailwind CSS v4.
• Timezone & Date Handling: Implemented correct local-timezone date/time logic for slot availability, the booking date range, and disabling past times.
• UI Polish: Iteratively refined the booking flow and UI details, including timezone fixes and interactive button/tooltip behavior.