Reebooking

Documentation

Complete guide to setting up and using the Reebooking system

Search Documentation
Find what you're looking for quickly

Quick links:

IntroductionFeaturesQuick StartInstallationChecklist
Reebooking - Luxury Spa Booking System
A modern, full-featured booking system for spa and salon businesses built with Next.js 16, TypeScript, Prisma, and PostgreSQL.

Key Highlights

Modern Tech Stack

Built with Next.js 16, React 19, TypeScript, and Tailwind CSS

Full-Stack Solution

Complete frontend and backend in one application

Role-Based Access

Support for Super Admin, Admin, Staff, and Client roles

AI-Powered

OpenAI integration for recommendations and availability

Next.js 16TypeScriptPrismaPostgreSQLStripeCloudinaryNextAuth
Getting Started
Everything you need to know before installing the system

What You Need Before Starting

A Computer

Windows, Mac, or Linux

Internet Connection

For downloading and setup

Basic Computer Skills

Opening files, typing, clicking

What This System Requires

Node.js (version 18 or higher)

A program that runs the system. Download from nodejs.org

PostgreSQL Database

Where your data is stored. Can be local or cloud-hosted (Supabase, Neon, Railway)

Code Editor (Optional)

To view and edit files. VS Code is recommended but any text editor works

Don't worry! We'll guide you through installing everything step by step.

Installation
Step-by-step guide to get your booking system up and running

Prerequisites

Node.js 18.x or higher
npm or yarn package manager
PostgreSQL database (local or cloud-hosted)
Git for version control

Clone the Repository

git clone <your-repository-url>
cd reebooking
Note
After setting up the database, you'll need to create an admin account. See the Quick Start section for details.
Configuration
Environment variables and third-party service setup

Required Variables

DATABASE_URL

PostgreSQL connection string

postgresql://user:password@localhost:5432/reebooking
NEXT_PUBLIC_BASE_URL (Optional)

Your application URL - auto-detected if not set

http://localhost:3000

baseUrl automatically switches between dev/prod based on NODE_ENV

NEXTAUTH_SECRET

Secret key for NextAuth (generate with openssl rand -base64 32)

Random 32-character string

Optional Variables

Cloudinary

For photo uploads

Optional
Stripe

For online payments

Optional
Twilio

For WhatsApp notifications

Optional
OpenAI

For AI features

Optional
Features
Comprehensive features for customers, admins, and staff

Customer Features

Easy Booking

Intuitive calendar-based booking system

Shopping Cart

Add multiple services to cart before checkout

Inspiration Photos

Upload reference photos with bookings

Stripe Payment Integration

Secure card payments with Stripe Checkout, automatic booking confirmation, and webhook support

Secure Payment Processing

PCI-compliant payment processing with encrypted transactions and automatic receipts

Automatic Booking Confirmation

Bookings automatically confirmed after successful Stripe payment via webhook

Payment Status Tracking

Real-time payment status updates and automatic booking status synchronization

Digital Receipts

Automatic receipt generation and email delivery after successful payment

Discount Codes

Apply promo codes at checkout to save money (works with both cash and Stripe payments)

Referral Program

Share your unique referral code and earn points when friends sign up and pay (Stripe payments supported)

Loyalty Rewards

Earn points with every booking and unlock tiered rewards

Social Sharing

Share referral links on Twitter, Facebook, WhatsApp, and LinkedIn

Global Search

Search across bookings, services, users, discount codes, and more with ⌘K shortcut

WhatsApp Notifications

Receive booking confirmations via WhatsApp

Favorites

Save favorite services for quick booking

Dashboard

View booking history and upcoming appointments

Admin Features

User Management

Manage customers, staff, and admins

Booking Management

View, update, and manage all bookings

Service Management

Add, edit, and delete services

Stripe Payment Management

Monitor Stripe payments, view payment history, and track transaction status

Payment Security

PCI-compliant payment processing with secure webhook handling and automatic booking confirmation

Payment Webhooks

Automatic booking confirmation via Stripe webhooks when payment succeeds

Payment Receipts

Automatic receipt generation for Stripe payments with email delivery

Discount Code Management

Create and manage discount codes with detailed analytics (works with Stripe payments)

Usage Analytics

Track which users used promo codes and usage statistics

Referral Management

View all referral codes, track referrals, and manage points per referral (Stripe payments supported)

Affiliate Tracking

Monitor referral performance, total points awarded, and unique referrals

Bulk Code Generation

Generate referral codes for all existing users with one click

Advanced Search

Role-based global search with keyboard shortcuts, filtering, and quick navigation

Analytics Dashboard

Revenue charts, booking statistics, and insights including Stripe payment analytics

Receipt Generation

Automatic receipt generation for bookings (both cash and Stripe payments)

Role Management

Assign and manage user roles

Staff Features

Booking View

View assigned bookings

Status Updates

Update booking status

Service Overview

View available services

Stripe Payment Features

Secure Checkout

Stripe Checkout Sessions provide a secure, PCI-compliant payment experience with support for all major credit and debit cards

Automatic Confirmation

Bookings are automatically confirmed via Stripe webhooks when payment succeeds, ensuring instant booking activation

Webhook Integration

Real-time payment status updates via Stripe webhooks, handling payment success, failures, and refunds automatically

Digital Receipts

Automatic receipt generation and email delivery after successful Stripe payment, with PDF download option

Discount Integration

Discount codes work seamlessly with Stripe payments, automatically applied before payment processing

Referral Rewards

Referral points are automatically awarded when referrals complete Stripe payments, tracked via webhook events

Payment Security

All payment data is handled securely by Stripe. No sensitive card information is stored on our servers

Payment Analytics

Track Stripe payment revenue, transaction counts, and payment method preferences in admin analytics dashboard

Multiple Payment Methods

Customers can choose between cash payment (pay at spa) or Stripe card payment during checkout

Quick Start Guide
Get your booking system up and running in 5 minutes!
⚡ Fast Setup (5 Minutes)
1

Install Dependencies

2 minutes
npm install
2

Set Up Database

1 minute
  • Create PostgreSQL database: createdb reebooking
  • Create .env file with minimum required variables
  • Run migrations: npx prisma migrate dev && npx prisma generate
3

Create Admin User

1 minute
  • Run: npx prisma studio
  • Go to User table → Add record
  • Add email, hashed password, role: SUPER_ADMIN, name
4

Start the App

1 minute
npm run dev

Visit http://localhost:3000 and login

Next Steps

  • Add Services: Go to Admin Dashboard → Services → Add Service
  • Test Booking: Go to homepage → Select service → Book appointment
  • Configure Integrations (Optional): Cloudinary, Stripe, Twilio
User Guides
Step-by-step guides for customers and users
How to Book a Service
  1. Go to Homepage - Open your browser and go to your website URL
  2. Select Service - Scroll to booking form and click on a service (e.g., "Manicure", "Pedicure")
  3. Choose Date - Click on calendar and select an available date (green dates are available)
  4. Select Time - Choose from available time slots:
    • 8:30 AM
    • 10:00 AM
    • 11:30 AM
    • 1:30 PM
    • 3:00 PM
    • 4:30 PM
  5. Add Photos (Optional) - Click "Upload Photos" to add inspiration images
  6. Add to Cart or Book Now - Click "Add to Cart" to add more services or "Book Now" to proceed
  7. Checkout - Review booking, enter information, choose payment method, and complete booking
Admin Guides
Complete guides for managing the booking system
How to Manage Bookings
  1. Go to Admin Dashboard - Sign in as admin and go to /admin
  2. View Bookings - Click "Bookings" in sidebar to see all bookings in list view, or click "Calendar" for visual view
  3. Update Booking Status - Click on a booking, change status dropdown (PENDING, CONFIRMED, COMPLETED, CANCELLED), and click "Update"
  4. Delete Booking - Click on booking, click "Delete" button, and confirm deletion
API Documentation
Complete API reference with endpoints, parameters, and examples

Authentication

All API routes require authentication except public service listings and approved rating displays.

Base URL

Development: http://localhost:3000/api/v1

Production: https://yourdomain.com/api/v1

GET /api/v1/bookings
Get bookings with filters

Query Parameters:

  • date (optional): Filter by specific date
  • startDate (optional): Start of date range
  • endDate (optional): End of date range
  • userId (optional): Filter by user ID
  • serviceId (optional): Filter by service ID
  • status (optional): PENDING, CONFIRMED, COMPLETED, CANCELLED, ALL
  • page (optional): Page number (default: 1)
  • limit (optional): Items per page (default: 10)
  • sort (optional): date-desc, date-asc, price-desc, price-asc

Example:

GET /api/v1/bookings?status=CONFIRMED&page=1&limit=10
POST /api/v1/bookings
Create a new booking

Body:

{ "serviceId": "uuid", "date": "2024-01-15", "time": "10:00 AM", "userName": "John Doe", "phone": "+1234567890", "email": "[email protected]", "paymentMethod": "cash", "photos": ["url1", "url2"] }
PATCH /api/v1/bookings/[id]
Update a booking

Update booking status, date, time, etc.

DELETE /api/v1/bookings/[id]
Delete a booking

Permanently delete a booking

Component Documentation
Complete reference for all components, their props, imports, and usage
SimpleBookingForm
components/SimpleBookingForm/index.tsx

Description:

Main booking form component that combines all booking steps

Imports:

  • useCart from @/hooks/use-cart
  • CalendarCard, CartSummary, PhotoUpload, ServiceSelection, TimeSelection
  • useBookingForm from ./useBookingForm

Features:

  • Service selection
  • Date picker
  • Time selection
  • Photo upload
  • Cart management
ServiceSelection
components/SimpleBookingForm/ServiceSelection.tsx

Props:

  • services: Service[]
  • selectedService: string
  • setSelectedService: (id: string) => void

Features:

  • Service cards with icons
  • Rating display (blurred if no rating)
  • Favorite button
  • Click to view rating details
CalendarCard
components/SimpleBookingForm/CalendarCard.tsx

Calendar component for date selection with booking indicators

TimeSelection
components/SimpleBookingForm/TimeSelection.tsx

Time slot selector with 6 daily slots (8:30 AM, 10:00 AM, 11:30 AM, 1:30 PM, 3:00 PM, 4:30 PM)

Database Schema
Complete database structure with all tables, fields, and relationships
User
User accounts with authentication and roles
idString (UUID)

Unique identifier

emailString (unique)

User email

nameString?

User name

passwordString?

Hashed password

roleString

SUPER_ADMIN, ADMIN, STAFF, or CLIENT

phoneString?

Phone number

referralCodeString? (unique)

Unique referral code

referralPointsInt

Points earned from referrals

Service
Spa/salon services offered
idString (UUID)

Unique identifier

nameString

Service name

priceInt

Price in cents

stripePriceIdString?

Stripe price ID (optional)

Booking
Customer bookings/appointments
idString (UUID)

Unique identifier

serviceIdString

Reference to Service

userIdString?

Reference to User (optional for guests)

dateDateTime

Booking date

timeString

Time slot

statusString

PENDING, CONFIRMED, COMPLETED, CANCELLED

paymentMethodString

cash or stripe

userNameString

Customer name

phoneString

Customer phone

emailString?

Customer email

Rating
Service ratings and reviews
idString (UUID)

Unique identifier

userIdString

Reference to User

serviceIdString

Reference to Service

ratingInt

1-5 stars

commentString?

Review text (optional)

statusString

PENDING, APPROVED, REJECTED

createdAtDateTime

When rating was created

Favorite
User's favorite services
idString (UUID)

Unique identifier

userIdString

Reference to User

serviceIdString

Reference to Service

DiscountCode
Promotional discount codes
idString (UUID)

Unique identifier

codeString (unique)

Promo code

typeString

PERCENT or FIXED

valueInt

Discount amount

minAmountInt?

Minimum purchase

maxUsesInt?

Maximum redemptions

usedCountInt

Times used

expiresAtDateTime?

Expiration date

activeBoolean

Is code active

Key Relationships
  • User has many Bookings, Favorites, and Ratings
  • Service has many Bookings, Favorites, and Ratings
  • Booking belongs to one Service and optionally one User
  • Rating belongs to one User and one Service (unique per user-service pair)
  • Favorite belongs to one User and one Service (unique per user-service pair)
  • DiscountCode has many DiscountUsage records
Troubleshooting
Common issues and their solutions
Cannot connect to database

Symptoms:

  • Error: Can't reach database server
  • Application won't start

Solutions:

  • Check PostgreSQL is running
  • Verify DATABASE_URL in .env is correct
  • Check username and password
  • For cloud databases, check IP whitelist
Port 3000 already in use

Symptoms:

  • Error when running npm run dev
  • Port already occupied

Solutions:

  • Windows: netstat -ano | findstr :3000, then taskkill /PID <PID> /F
  • Mac/Linux: lsof -ti:3000 | xargs kill
  • Or use different port: PORT=3001 npm run dev
Prisma Client not generated

Symptoms:

  • Error: @prisma/client did not initialize yet

Solutions:

  • Run: npx prisma generate
Module not found

Symptoms:

  • Error: Cannot find module '...'

Solutions:

  • Delete node_modules and package-lock.json
  • Run: npm install
Environment variables not loading

Symptoms:

  • Variables not working
  • Connection errors

Solutions:

  • Ensure .env file is in root directory
  • Restart development server after changing .env
  • Check for typos in variable names
  • No spaces around = in .env
Ratings not showing

Symptoms:

  • Ratings submitted but not visible

Solutions:

  • Check rating status (must be APPROVED)
  • Admin must approve ratings in Admin Dashboard → Ratings
  • Only APPROVED ratings show to public
Calendar not loading bookings

Symptoms:

  • Calendar shows but no bookings

Solutions:

  • Check user has bookings
  • Verify date filter (try 'All Bookings')
  • Check browser console for errors
  • Verify API is working: /api/v1/bookings
Advanced Topics
Customization, deployment, and security best practices
Change Brand Colors

Edit app/globals.css:

:root { --primary: 222.2 47.4% 11.2%; --secondary: 210 40% 96.1%; /* Add your colors here */ }
Change App Name
  1. app/layout.tsx - Update metadata title
  2. components/layout/landing/header.tsx - Update logo text
Add New Service Types

Services are managed through Admin Dashboard → Services. No code changes needed.

Installation Checklist
Use this checklist to ensure you've completed all setup steps correctly

Table of Contents