Skip to content

Fullstack's booking platform uses Next.js 15 (App Router), TypeScript, Supabase, and Shadcn UI. Features include user management, manual payment verification, and PDF ticket export.

Notifications You must be signed in to change notification settings

khalifaalhasan/next-booking-platform

Repository files navigation

🏒 Business Development Center

Modern Booking Platform

A modern business asset reservation system inspired by the seamless booking flow of Traveloka.
Supports Down Payment / Full Payment, real-time admin verification, and QR-Based E‑Ticketing.


πŸš€ Tech Stack

Next.js TypeScript Supabase TailwindCSS Shadcn License


🌟 Key Features

πŸ‘€ User Features

  • Traveloka‑Style Booking Flow
    Choose Date β†’ Fill Details β†’ Make Payment

  • Smart Calendar

    • Blocks Pending & Confirmed dates
    • Supports Daily & Hourly rentals
  • Flexible Payment

    • Full Payment / 50% Down Payment
    • Prevents double payments
  • User Dashboard

    • Real‑time status updates
    • Upload payment proof
    • Booking history
  • Wishlist to save preferred services

  • Form Persistence using localStorage

  • E‑Ticket (PDF) + QR Code activated upon payment completion


πŸ›‘οΈ Admin Features

  • Management Dashboard
  • Verify Payments (Approve / Reject)
  • CRUD Services + Multiple Image Upload
  • Dynamic Spec (JSONB)
  • Auto‑Generated Slug URL
  • Built‑in QR Scanner (Camera Support)

πŸ› οΈ Technologies Used

Category Technology
Framework Next.js 15 (App Router)
Language TypeScript
Database & Auth Supabase (PostgreSQL)
UI TailwindCSS + Shadcn/ui
Forms React Hook Form + Zod
Date Utilities Date-fns + React-day-picker
PDF Renderer @react-pdf/renderer
QR Scanner @yudiel/react-qr-scanner
Notifications Sonner Toast

πŸš€ Getting Started

1️⃣ Clone Repository

git clone https://github.com/username/project.git
cd project

2️⃣ Install Dependencies

npm install

3️⃣ Configure Environment Variables

Create a .env.local file:

NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here

4️⃣ Configure Supabase Database

Ensure the following tables exist:

  • profiles
  • categories
  • services
  • bookings
  • payments
  • saved_services

Include required triggers & payment status functions.

5️⃣ Run Development Server

npm run dev

Open in browser:
πŸ‘‰ http://localhost:3000


πŸ“‚ Project Directory Structure

app/
 β”œβ”€β”€ (main)/
 β”‚    β”œβ”€β”€ services/
 β”‚    β”œβ”€β”€ book/
 β”‚    β”œβ”€β”€ dashboard/
 β”œβ”€β”€ (admin)/
 β”‚    β”œβ”€β”€ bookings/
 β”‚    β”œβ”€β”€ services/
 β”‚    β”œβ”€β”€ scan/
 β”œβ”€β”€ (checkout)/
 β”‚    β”œβ”€β”€ payment/
 β”œβ”€β”€ layout.tsx

πŸ“Έ Screenshots


🀝 Contributing

1️⃣ Fork the Repository

2️⃣ Create a New Branch

git checkout -b new-feature

3️⃣ Commit Your Changes

git commit -m "Add new feature"

4️⃣ Push the Branch

git push origin new-feature

5️⃣ Open a Pull Request


πŸ“„ License

This project is released under the MIT License.
See the LICENSE file for more details.


⭐ If you like this project, consider giving it a Star! ⭐

About

Fullstack's booking platform uses Next.js 15 (App Router), TypeScript, Supabase, and Shadcn UI. Features include user management, manual payment verification, and PDF ticket export.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages