Barber-Booking-SaaS

Features

1. AI Booking Assistant

• Receives booking messages from clients (WhatsApp or chat widget) (possibilities for telegram / phone calls)
• Understands date/time requests using NLP
• Validates barber availability
• Saves booking automatically to Supabase

2. n8n Workflow Integration

• Handles incoming messages
• Calls AI model for message interpretation
• Creates records in Supabase (bookings, clients, etc.)
• Sends confirmation messages to clients

3. Supabase Backend

• Authentication for barbers & clients

• Database tables for:

  • clients
  • barbers
  • services
  • bookings
  • availability
  • barber_settings

4. React Dashboard

• Barber login panel
• Calendar view of bookings
• List of clients
• Manage services & working hours
• Dashboard analytics (daily bookings, revenue estimate, etc.)

5. Client Web Portal

• Create account
• View upcoming bookings
• Cancel/reschedule
• Browse services
• Hero landing page + simple front page

---

Project Structure

/project
 ├── backend (supabase)
 │     ├── migrations
 │     ├── policies
 │     └── db.sql
 ├── automations (n8n workflows)
 │     └── ai-booking-workflow.json
 ├── dashboard (React app for barbers)
 │     ├── src
 │     └── package.json
 ├── client-portal (React app for customers)
 │     └── src
 └── README.md

---

Database Schema (Supabase)

Clients

id (uuid)
full_name
phone
email
created_at

Barbers

id (uuid)
full_name
phone
email
password_hash
role
created_at

Services

id (uuid)
name
description
price
duration_minutes
barber_id

Bookings

id (uuid)
client_id
barber_id
service_id
date
time
status (pending/confirmed/cancelled)
created_at

Availability

id (uuid)
barber_id
weekday
start_time
end_time

Barber Settings

id
barber_id
auto_confirm (bool)
timezone

---

n8n Workflow Overview

Workflow steps:

1. Webhook → Receives client message (WhatsApp / API)
2. AI Parser → Extracts intent (booking, cancel, reschedule)
3. Supabase Node → Checks availability
4. Supabase Node → Insert booking
5. Respond to User → Sends confirmation message

Workflow JSON is included in:

automations/ai-booking-workflow.json

---

React Dashboard (Barber Panel)

Pages included:

• Login / Register
• Dashboard Overview
• Calendar (full bookings view)
• Clients List
• Services Management
• Settings

Built with:

• React
• Supabase Auth
• shadcn/ui
• FullCalendar
• TailwindCSS

---

Client Web Portal

• Register / Login
• Create booking (coming soon)
• View upcoming appointment
• Cancel or reschedule
• Minimal landing page

---

Installation

1. Clone Repo

git clone https://github.com/klisard/Barber-Booking-SaaS.git
cd barber-booking-saas

2. Install Dashboard

cd dashboard
npm install
npm run dev

3. Install Client Portal

cd client-portal
npm install
npm run dev

4. Import n8n Workflow

Go to: n8n → Settings → Import Workflow → Upload ai-booking-workflow.json

5. Set Up Supabase

• Create new Supabase project
• Run SQL from backend/db.sql
• Add environment variables to dashboard + n8n

---

⚙️ Environment Variables

Dashboard .env

VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=

n8n

SUPABASE_URL=
SUPABASE_SERVICE_ROLE_KEY=
AI_API_KEY=
WHATSAPP_API_KEY=

---

📘 Future Improvements

• Add payment integration (Stripe)
• Multi-barber branch management
• Client push notifications
• AI voice booking (Twilio Voice)
• Barber mobile app (React Native)

---

🤝 Team Members

Project developed by a team of three members:

• Klisard Muca – Project Manager, AI + n8n workflows
• Erbi Bejkolli – Supabase + backend
• Marsel Vojka – React dashboard + UI/UX

---