# mugoedwin/salon architecture

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

- Interactive diagram: https://gitdiagram.com/mugoedwin/salon
- Repository: https://github.com/mugoedwin/salon

## Overview

This repository contains salon websites and administration screens alongside two backend implementations: a Django salon catalog/contact platform and a Node booking, payment, and notification API. The main user journey is browsing services and submitting a booking; staff manage services and bookings, while payment and messaging are separate operational capabilities. Source excerpts are limited, so some subsystem connections are not shown where the caller or data flow could not be verified.

Main entry points: [`src/routes.jsx`](https://github.com/mugoedwin/salon/blob/master/src/routes.jsx) (Web app routes), [`backend/src/app.js`](https://github.com/mugoedwin/salon/blob/master/backend/src/app.js) (API application), [`src/admin/ManageServices.jsx`](https://github.com/mugoedwin/salon/blob/master/src/admin/ManageServices.jsx) (Admin management), [`luxsalon/frontend/src/routes.jsx`](https://github.com/mugoedwin/salon/blob/master/luxsalon/frontend/src/routes.jsx) (Lux salon routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client experience"]
  node_root_routes["Web app routes<br/>[routes.jsx]"]
  node_service_pages["Service browsing<br/>[Services.jsx]"]
  node_booking_page["Booking page<br/>[Booking.jsx]"]
  node_account_pages["Accounts and history<br/>[UserDashboard.jsx]"]
  node_admin_pages["Admin management<br/>[ManageServices.jsx]"]
  node_catalog_service["Service catalog API<br/>[serviceCatalog.js]"]
  node_booking_service["Booking client service<br/>[bookingService.js]"]
  node_media_service["Media uploads<br/>[cloudinaryMedia.js]"]
  node_lux_routes["Lux salon routes<br/>[routes.jsx]"]
  node_lux_booking["Lux booking page<br/>[Booking.jsx]"]
  node_lux_service_list["Service listing"]
  node_lux_service_api["Salon services API client"]
end

subgraph group_django["Salon platform"]
  node_django_urls["Django API routes<br/>[api_urls.py]"]
  node_django_api["Salon API handlers<br/>[views_api.py]"]
  node_django_models[("Salon data models<br/>[models.py]")]
  node_contact_handlers["Contact handlers<br/>[views.py]"]
end

subgraph group_booking_api["Booking API"]
  node_node_app["API application<br/>[app.js]"]
  node_booking_routes["Booking routes<br/>[booking.routes.js]"]
  node_booking_controller["Booking controller"]
  node_booking_domain["Booking service<br/>[booking.service.js]"]
  node_appointment_store[("Appointments<br/>[Appointment.js]")]
  node_payment_routes["Payment routes<br/>[payment.routes.js]"]
  node_payment_controller["Payment controller"]
  node_payment_service["M-Pesa service<br/>[mpesa.service.js]"]
  node_webhook_routes["Webhook routes<br/>[webhook.routes.js]"]
  node_twilio_controller["Twilio webhook handler"]
  node_notification_service["Notifications"]
  node_whatsapp_service["WhatsApp delivery"]
end

subgraph group_integrations["External services"]
  node_firebase["Firebase<br/>[firebase.js]"]
  node_mpesa["M-Pesa"]
  node_twilio["Twilio"]
end

node_visitor(("Client or staff"))

node_visitor -->|"opens pages"| node_root_routes
node_root_routes -->|"routes to"| node_service_pages
node_root_routes -->|"routes to"| node_booking_page
node_root_routes -->|"routes to"| node_account_pages
node_root_routes -->|"routes to"| node_admin_pages
node_service_pages -->|"loads catalog"| node_catalog_service
node_booking_page -->|"submits booking"| node_booking_service
node_admin_pages -->|"manages catalog"| node_catalog_service
node_catalog_service -->|"reads and writes"| node_firebase
node_admin_pages -->|"uploads images"| node_media_service
node_visitor -->|"opens pages"| node_lux_routes
node_lux_routes -->|"routes to"| node_lux_booking
node_lux_routes -->|"routes to"| node_lux_service_list
node_lux_service_list -->|"loads services"| node_lux_service_api
node_lux_service_api -->|"requests services"| node_django_urls
node_django_urls -->|"dispatches to"| node_django_api
node_django_api -->|"accesses data"| node_django_models
node_django_urls -->|"dispatches to"| node_contact_handlers
node_node_app -->|"mounts routes"| node_booking_routes
node_node_app -->|"mounts routes"| node_payment_routes
node_node_app -->|"mounts routes"| node_webhook_routes
node_booking_routes -->|"dispatches to"| node_booking_controller
node_booking_controller -->|"creates booking"| node_booking_domain
node_booking_domain -->|"stores appointment"| node_appointment_store
node_payment_routes -->|"dispatches to"| node_payment_controller
node_payment_controller -->|"initiates payment"| node_payment_service
node_payment_service -->|"requests payment"| node_mpesa
node_webhook_routes -->|"dispatches to"| node_twilio_controller
node_notification_service -->|"sends notification"| node_whatsapp_service
node_whatsapp_service -->|"sends message"| node_twilio

click node_root_routes "https://github.com/mugoedwin/salon/blob/master/src/routes.jsx"
click node_service_pages "https://github.com/mugoedwin/salon/blob/master/src/pages/Services.jsx"
click node_booking_page "https://github.com/mugoedwin/salon/blob/master/src/pages/Booking.jsx"
click node_account_pages "https://github.com/mugoedwin/salon/blob/master/src/pages/Dashboard/UserDashboard.jsx"
click node_admin_pages "https://github.com/mugoedwin/salon/blob/master/src/admin/ManageServices.jsx"
click node_catalog_service "https://github.com/mugoedwin/salon/blob/master/src/services/serviceCatalog.js"
click node_booking_service "https://github.com/mugoedwin/salon/blob/master/src/services/bookingService.js"
click node_firebase "https://github.com/mugoedwin/salon/blob/master/src/firebase.js"
click node_media_service "https://github.com/mugoedwin/salon/blob/master/src/services/cloudinaryMedia.js"
click node_lux_routes "https://github.com/mugoedwin/salon/blob/master/luxsalon/frontend/src/routes.jsx"
click node_lux_booking "https://github.com/mugoedwin/salon/blob/master/luxsalon/frontend/src/pages/Booking.jsx"
click node_lux_service_list "https://github.com/mugoedwin/salon/blob/master/luxsalon/frontend/src/components/services/ClientServiceList.jsx"
click node_lux_service_api "https://github.com/mugoedwin/salon/blob/master/luxsalon/frontend/src/services/salonServicesApi.js"
click node_django_urls "https://github.com/mugoedwin/salon/blob/master/luxsalon/salon/api_urls.py"
click node_django_api "https://github.com/mugoedwin/salon/blob/master/luxsalon/salon/views_api.py"
click node_django_models "https://github.com/mugoedwin/salon/blob/master/luxsalon/salon/models.py"
click node_contact_handlers "https://github.com/mugoedwin/salon/blob/master/luxsalon/contact/views.py"
click node_node_app "https://github.com/mugoedwin/salon/blob/master/backend/src/app.js"
click node_booking_routes "https://github.com/mugoedwin/salon/blob/master/backend/src/routes/booking.routes.js"
click node_booking_controller "https://github.com/mugoedwin/salon/blob/master/backend/src/controllers/booking.controller.js"
click node_booking_domain "https://github.com/mugoedwin/salon/blob/master/backend/src/services/booking.service.js"
click node_appointment_store "https://github.com/mugoedwin/salon/blob/master/backend/src/models/Appointment.js"
click node_payment_routes "https://github.com/mugoedwin/salon/blob/master/backend/src/routes/payment.routes.js"
click node_payment_controller "https://github.com/mugoedwin/salon/blob/master/backend/src/controllers/mpesa.controller.js"
click node_payment_service "https://github.com/mugoedwin/salon/blob/master/backend/src/services/mpesa.service.js"
click node_webhook_routes "https://github.com/mugoedwin/salon/blob/master/backend/src/routes/webhook.routes.js"
click node_twilio_controller "https://github.com/mugoedwin/salon/blob/master/backend/src/controllers/twilioWebhook.controller.js"
click node_notification_service "https://github.com/mugoedwin/salon/blob/master/backend/src/services/notification.service.js"
click node_whatsapp_service "https://github.com/mugoedwin/salon/blob/master/backend/src/services/whatsapp.service.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_root_routes,node_service_pages,node_booking_page,node_account_pages,node_admin_pages,node_catalog_service,node_booking_service,node_media_service,node_lux_routes,node_lux_booking,node_lux_service_list,node_lux_service_api,node_visitor toneBlue
class node_django_urls,node_django_api,node_django_models,node_contact_handlers toneAmber
class node_node_app,node_booking_routes,node_booking_controller,node_booking_domain,node_appointment_store,node_payment_routes,node_payment_controller,node_payment_service,node_webhook_routes,node_twilio_controller,node_notification_service,node_whatsapp_service toneMint
class node_firebase,node_mpesa,node_twilio toneRose
```

## Components

### Client experience

- [Web app routes](https://github.com/mugoedwin/salon/blob/master/src/routes.jsx): `src/routes.jsx`
- [Service browsing](https://github.com/mugoedwin/salon/blob/master/src/pages/Services.jsx): `src/pages/Services.jsx`
- [Booking page](https://github.com/mugoedwin/salon/blob/master/src/pages/Booking.jsx): `src/pages/Booking.jsx`
- [Accounts and history](https://github.com/mugoedwin/salon/blob/master/src/pages/Dashboard/UserDashboard.jsx): `src/pages/Dashboard/UserDashboard.jsx`
- [Admin management](https://github.com/mugoedwin/salon/blob/master/src/admin/ManageServices.jsx): `src/admin/ManageServices.jsx`
- [Service catalog API](https://github.com/mugoedwin/salon/blob/master/src/services/serviceCatalog.js): `src/services/serviceCatalog.js`
- [Booking client service](https://github.com/mugoedwin/salon/blob/master/src/services/bookingService.js): `src/services/bookingService.js`
- [Media uploads](https://github.com/mugoedwin/salon/blob/master/src/services/cloudinaryMedia.js): `src/services/cloudinaryMedia.js`
- [Lux salon routes](https://github.com/mugoedwin/salon/blob/master/luxsalon/frontend/src/routes.jsx): `luxsalon/frontend/src/routes.jsx`
- [Lux booking page](https://github.com/mugoedwin/salon/blob/master/luxsalon/frontend/src/pages/Booking.jsx): `luxsalon/frontend/src/pages/Booking.jsx`
- [Service listing](https://github.com/mugoedwin/salon/blob/master/luxsalon/frontend/src/components/services/ClientServiceList.jsx): `luxsalon/frontend/src/components/services/ClientServiceList.jsx`
- [Salon services API client](https://github.com/mugoedwin/salon/blob/master/luxsalon/frontend/src/services/salonServicesApi.js): `luxsalon/frontend/src/services/salonServicesApi.js`

### Salon platform

- [Django API routes](https://github.com/mugoedwin/salon/blob/master/luxsalon/salon/api_urls.py): `luxsalon/salon/api_urls.py`
- [Salon API handlers](https://github.com/mugoedwin/salon/blob/master/luxsalon/salon/views_api.py): `luxsalon/salon/views_api.py`
- [Salon data models](https://github.com/mugoedwin/salon/blob/master/luxsalon/salon/models.py): `luxsalon/salon/models.py`
- [Contact handlers](https://github.com/mugoedwin/salon/blob/master/luxsalon/contact/views.py): `luxsalon/contact/views.py`

### Booking API

- [API application](https://github.com/mugoedwin/salon/blob/master/backend/src/app.js): `backend/src/app.js`
- [Booking routes](https://github.com/mugoedwin/salon/blob/master/backend/src/routes/booking.routes.js): `backend/src/routes/booking.routes.js`
- [Booking controller](https://github.com/mugoedwin/salon/blob/master/backend/src/controllers/booking.controller.js): `backend/src/controllers/booking.controller.js`
- [Booking service](https://github.com/mugoedwin/salon/blob/master/backend/src/services/booking.service.js): `backend/src/services/booking.service.js`
- [Appointments](https://github.com/mugoedwin/salon/blob/master/backend/src/models/Appointment.js): `backend/src/models/Appointment.js`
- [Payment routes](https://github.com/mugoedwin/salon/blob/master/backend/src/routes/payment.routes.js): `backend/src/routes/payment.routes.js`
- [Payment controller](https://github.com/mugoedwin/salon/blob/master/backend/src/controllers/mpesa.controller.js): `backend/src/controllers/mpesa.controller.js`
- [M-Pesa service](https://github.com/mugoedwin/salon/blob/master/backend/src/services/mpesa.service.js): `backend/src/services/mpesa.service.js`
- [Webhook routes](https://github.com/mugoedwin/salon/blob/master/backend/src/routes/webhook.routes.js): `backend/src/routes/webhook.routes.js`
- [Twilio webhook handler](https://github.com/mugoedwin/salon/blob/master/backend/src/controllers/twilioWebhook.controller.js): `backend/src/controllers/twilioWebhook.controller.js`
- [Notifications](https://github.com/mugoedwin/salon/blob/master/backend/src/services/notification.service.js): `backend/src/services/notification.service.js`
- [WhatsApp delivery](https://github.com/mugoedwin/salon/blob/master/backend/src/services/whatsapp.service.js): `backend/src/services/whatsapp.service.js`

### External services

- [Firebase](https://github.com/mugoedwin/salon/blob/master/src/firebase.js): `src/firebase.js`
- **M-Pesa**
- **Twilio**

### Other components

- **Client or staff**

## Connections

- Client or staff → Web app routes: opens pages
- Web app routes → Service browsing: routes to
- Web app routes → Booking page: routes to
- Web app routes → Accounts and history: routes to
- Web app routes → Admin management: routes to
- Service browsing → Service catalog API: loads catalog
- Booking page → Booking client service: submits booking
- Admin management → Service catalog API: manages catalog
- Service catalog API → Firebase: reads and writes
- Admin management → Media uploads: uploads images
- Client or staff → Lux salon routes: opens pages
- Lux salon routes → Lux booking page: routes to
- Lux salon routes → Service listing: routes to
- Service listing → Salon services API client: loads services
- Salon services API client → Django API routes: requests services
- Django API routes → Salon API handlers: dispatches to
- Salon API handlers → Salon data models: accesses data
- Django API routes → Contact handlers: dispatches to
- API application → Booking routes: mounts routes
- API application → Payment routes: mounts routes
- API application → Webhook routes: mounts routes
- Booking routes → Booking controller: dispatches to
- Booking controller → Booking service: creates booking
- Booking service → Appointments: stores appointment
- Payment routes → Payment controller: dispatches to
- Payment controller → M-Pesa service: initiates payment
- M-Pesa service → M-Pesa: requests payment
- Webhook routes → Twilio webhook handler: dispatches to
- Notifications → WhatsApp delivery: sends notification
- WhatsApp delivery → Twilio: sends message