# limitless-infoech-solutions/service-booking-system architecture

> Architecture diagram of the GitHub repository limitless-infoech-solutions/service-booking-system, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-24). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/limitless-infoech-solutions/service-booking-system
- Repository: https://github.com/limitless-infoech-solutions/service-booking-system

## Overview

This is a service-business appointment booking application. Customers select services, choose an available date and time, review the booking, provide contact details, and reach a confirmation view. The sampled appointment page creates a temporary booking hold and authenticates/attaches a customer; the availability and service APIs support selection. Payment and the remaining booking screens are present in the tree, but their runtime wiring and completion behavior are not established by the excerpts.

Main entry points: [`src/app/book/appointment/page.js`](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/app/book/appointment/page.js) (Appointment flow), [`src/lib/supabase.js`](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/lib/supabase.js) (Supabase client), [`src/app/book`](https://github.com/limitless-infoech-solutions/service-booking-system/tree/main/src/app/book) (Booking pages), [`src/components/bookings/ServiceSelectionStep.jsx`](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/components/bookings/ServiceSelectionStep.jsx) (Service selection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Customer experience"]
  node_home["Business landing<br/>[page.js]"]
  node_booking_pages["Booking pages"]
end

subgraph group_booking["Booking workflow"]
  node_appointment["Appointment flow<br/>[page.js]"]
  node_service_step["Service selection"]
  node_service_card["Service card<br/>[ServiceCard.js]"]
  node_review_step["Booking review"]
  node_payment_step["Payment step<br/>[PaymentStep.jsx]"]
  node_auth_modal["Customer auth UI"]
  node_booking_summary["Booking summary<br/>[BookingSummary.js]"]
  node_booking_options["Booking options<br/>[bookingOptions.js]"]
end

subgraph group_api["Booking APIs"]
  node_services_api["Service catalog API<br/>[route.js]"]
  node_availability_api["Availability API<br/>[route.js]"]
  node_hold_api["Booking hold API<br/>[route.js]"]
  node_customer_check["Customer check API<br/>[route.js]"]
  node_customer_auth["Customer auth API<br/>[route.js]"]
end

subgraph group_data["Data access"]
  node_service_data["Service catalog data<br/>[serviceData.js]"]
  node_pricing_data["Pricing data<br/>[pricing.js]"]
  node_supabase_client["Supabase client<br/>[supabase.js]"]
end

node_customer(("Customer"))
node_supabase[("Supabase")]

node_customer -->|"browses"| node_home
node_customer -->|"books through"| node_booking_pages
node_home -->|"links to"| node_booking_pages
node_booking_pages -->|"hosts"| node_appointment
node_service_step -->|"renders"| node_service_card
node_service_step -->|"uses catalog"| node_service_data
node_appointment -->|"requests services"| node_services_api
node_appointment -->|"checks slots"| node_availability_api
node_appointment -->|"creates hold"| node_hold_api
node_appointment -->|"authenticates customer"| node_customer_auth
node_appointment -->|"shows review"| node_review_step
node_appointment -->|"shows payment"| node_payment_step
node_appointment -->|"shows auth UI"| node_auth_modal
node_appointment -->|"shows summary"| node_booking_summary
node_appointment -->|"uses options"| node_booking_options
node_customer -->|"checks account"| node_customer_check
node_services_api -->|"queries via"| node_supabase_client
node_availability_api -->|"queries via"| node_supabase_client
node_hold_api -->|"reads and writes via"| node_supabase_client
node_customer_check -->|"queries via"| node_supabase_client
node_customer_auth -->|"reads and writes via"| node_supabase_client
node_supabase_client -->|"connects to"| node_supabase

click node_home "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/app/page.js"
click node_booking_pages "https://github.com/limitless-infoech-solutions/service-booking-system/tree/main/src/app/book"
click node_appointment "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/app/book/appointment/page.js"
click node_service_step "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/components/bookings/ServiceSelectionStep.jsx"
click node_service_card "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/components/bookings/ServiceCard.js"
click node_review_step "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/components/bookings/BookingReviewStep.jsx"
click node_payment_step "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/components/bookings/PaymentStep.jsx"
click node_auth_modal "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/components/bookings/CustomerAuthModal.jsx"
click node_booking_summary "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/components/bookings/BookingSummary.js"
click node_booking_options "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/components/bookings/bookingOptions.js"
click node_service_data "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/data/serviceData.js"
click node_pricing_data "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/data/pricing.js"
click node_services_api "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/app/api/services/route.js"
click node_availability_api "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/app/api/services/availability/route.js"
click node_hold_api "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/app/api/bookings/hold/route.js"
click node_customer_check "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/app/api/customers/check/route.js"
click node_customer_auth "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/app/api/customers/authenticate/route.js"
click node_supabase_client "https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/lib/supabase.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_booking_pages toneBlue
class node_appointment,node_service_step,node_service_card,node_review_step,node_payment_step,node_auth_modal,node_booking_summary,node_booking_options,node_supabase toneAmber
class node_services_api,node_availability_api,node_hold_api,node_customer_check,node_customer_auth toneMint
class node_service_data,node_pricing_data,node_supabase_client toneRose
class node_customer toneIndigo
```

## Components

### Customer experience

- [Business landing](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/app/page.js): `src/app/page.js`
- [Booking pages](https://github.com/limitless-infoech-solutions/service-booking-system/tree/main/src/app/book): `src/app/book`

### Booking workflow

- [Appointment flow](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/app/book/appointment/page.js): `src/app/book/appointment/page.js`
- [Service selection](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/components/bookings/ServiceSelectionStep.jsx): `src/components/bookings/ServiceSelectionStep.jsx`
- [Service card](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/components/bookings/ServiceCard.js): `src/components/bookings/ServiceCard.js`
- [Booking review](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/components/bookings/BookingReviewStep.jsx): `src/components/bookings/BookingReviewStep.jsx`
- [Payment step](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/components/bookings/PaymentStep.jsx): `src/components/bookings/PaymentStep.jsx`
- [Customer auth UI](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/components/bookings/CustomerAuthModal.jsx): `src/components/bookings/CustomerAuthModal.jsx`
- [Booking summary](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/components/bookings/BookingSummary.js): `src/components/bookings/BookingSummary.js`
- [Booking options](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/components/bookings/bookingOptions.js): `src/components/bookings/bookingOptions.js`

### Booking APIs

- [Service catalog API](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/app/api/services/route.js): `src/app/api/services/route.js`
- [Availability API](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/app/api/services/availability/route.js): `src/app/api/services/availability/route.js`
- [Booking hold API](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/app/api/bookings/hold/route.js): `src/app/api/bookings/hold/route.js`
- [Customer check API](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/app/api/customers/check/route.js): `src/app/api/customers/check/route.js`
- [Customer auth API](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/app/api/customers/authenticate/route.js): `src/app/api/customers/authenticate/route.js`

### Data access

- [Service catalog data](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/data/serviceData.js): `src/data/serviceData.js`
- [Pricing data](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/data/pricing.js): `src/data/pricing.js`
- [Supabase client](https://github.com/limitless-infoech-solutions/service-booking-system/blob/main/src/lib/supabase.js): `src/lib/supabase.js`

### Other components

- **Customer**
- **Supabase**

## Connections

- Customer → Business landing: browses
- Customer → Booking pages: books through
- Business landing → Booking pages: links to
- Booking pages → Appointment flow: hosts
- Service selection → Service card: renders
- Service selection → Service catalog data: uses catalog
- Appointment flow → Service catalog API: requests services
- Appointment flow → Availability API: checks slots
- Appointment flow → Booking hold API: creates hold
- Appointment flow → Customer auth API: authenticates customer
- Appointment flow → Booking review: shows review
- Appointment flow → Payment step: shows payment
- Appointment flow → Customer auth UI: shows auth UI
- Appointment flow → Booking summary: shows summary
- Appointment flow → Booking options: uses options
- Customer → Customer check API: checks account
- Service catalog API → Supabase client: queries via
- Availability API → Supabase client: queries via
- Booking hold API → Supabase client: reads and writes via
- Customer check API → Supabase client: queries via
- Customer auth API → Supabase client: reads and writes via
- Supabase client → Supabase: connects to