# maramsshubbar/qless-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/maramsshubbar/qless-frontend
- Repository: https://github.com/maramsshubbar/qless-frontend

## Overview

QLess is a virtual queue and appointment platform for customers, business owners, staff, and administrators. The customer journey begins with browsing businesses and branches, then joining a queue or booking a service; customers can track tickets, receive updates, and manage their account. Separate owner, staff, and admin areas support business setup, queue operations, and platform oversight. The graph reflects the frontend routes and sampled service calls; several capabilities are included from the README, but their internal wiring was not sampled.

Main entry points: [`src/App.jsx`](https://github.com/maramsshubbar/qless-frontend/blob/main/src/App.jsx) (Routed application), [`src/components/Bookings/BookServiceForm.jsx`](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Bookings/BookServiceForm.jsx) (Service bookings), [`src/services/api.js`](https://github.com/maramsshubbar/qless-frontend/blob/main/src/services/api.js) (API request client), [`src/components/BranchDetails/BranchDetailsPage.jsx`](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/BranchDetails/BranchDetailsPage.jsx) (Business and branch details)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Application entry"]
  node_app["Routed application<br/>[App.jsx]"]
  node_identity["Authentication and roles<br/>[UserContext.jsx]"]
end

subgraph group_customer["Customer experience"]
  node_browse["Business discovery<br/>[BrowsePage.jsx]"]
  node_business_details["Business and branch details"]
  node_queue_join["Join queue<br/>[JoinQueuePage.jsx]"]
  node_ticket["Ticket tracking<br/>[TicketPage.jsx]"]
  node_dashboard["Customer dashboard"]
  node_profile["Customer profile"]
  node_bookings["Service bookings"]
  node_reviews["Customer reviews<br/>[ReviewsSection.jsx]"]
end

subgraph group_operations["Business operations"]
  node_owner_setup["Business setup and billing<br/>[BusinessForm.jsx]"]
  node_owner_management["Owner management<br/>[OwnerBranch.jsx]"]
  node_queue_settings["Queue configuration"]
  node_queue_control["Queue control<br/>[QueueControl.jsx]"]
  node_analytics["Queue analytics"]
  node_staff["Staff workspace<br/>[StaffLayout.jsx]"]
end

subgraph group_oversight["Platform oversight"]
  node_admin["Admin console<br/>[AdminLayout.jsx]"]
end

subgraph group_integration["Services and integrations"]
  node_api_client["API request client<br/>[api.js]"]
  node_business_service["Business and branch services<br/>[businessService.js]"]
  node_owner_service["Owner business service"]
  node_booking_service["Booking service<br/>[bookingService.js]"]
  node_ticket_service["Ticket service<br/>[ticketService.js]"]
  node_queue_service["Queue service<br/>[queueService.js]"]
end

node_people(("Platform users"))
node_backend{{"QLess backend"}}

node_people -->|"use"| node_app
node_app -->|"routes to"| node_browse
node_app -->|"routes to"| node_business_details
node_app -->|"routes to"| node_queue_join
node_app -->|"routes to"| node_ticket
node_app -.->|"routes to"| node_dashboard
node_app -.->|"routes to"| node_bookings
node_app -.->|"routes to"| node_owner_setup
node_app -.->|"routes to"| node_owner_management
node_app -.->|"routes to"| node_staff
node_app -.->|"routes to"| node_admin
node_app -->|"reads user"| node_identity
node_browse -->|"loads listings"| node_business_service
node_business_details -->|"loads details"| node_business_service
node_business_details -->|"offers booking"| node_bookings
node_bookings -->|"requests slots"| node_booking_service
node_ticket -.->|"loads ticket"| node_ticket_service
node_ticket -->|"loads queue"| node_queue_service
node_dashboard -->|"loads tickets"| node_ticket_service
node_dashboard -.->|"shows bookings"| node_bookings
node_owner_setup -->|"creates business"| node_owner_service
node_queue_settings -->|"configures queues"| node_queue_service
node_reviews -.->|"submits reviews"| node_backend
node_business_service -->|"calls"| node_api_client
node_booking_service -->|"calls"| node_api_client
node_queue_service -.->|"calls"| node_api_client
node_api_client -->|"sends requests"| node_backend
node_owner_service -->|"sends requests"| node_backend

click node_app "https://github.com/maramsshubbar/qless-frontend/blob/main/src/App.jsx"
click node_identity "https://github.com/maramsshubbar/qless-frontend/blob/main/src/contexts/UserContext.jsx"
click node_browse "https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Browse/BrowsePage.jsx"
click node_business_details "https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/BranchDetails/BranchDetailsPage.jsx"
click node_queue_join "https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Ticket/JoinQueuePage.jsx"
click node_ticket "https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Ticket/TicketPage.jsx"
click node_dashboard "https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Dashboard/CustomerDashboard.jsx"
click node_profile "https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/CustomerProfile/CustomerProfile.jsx"
click node_bookings "https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Bookings/BookServiceForm.jsx"
click node_reviews "https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Reviews/ReviewsSection.jsx"
click node_owner_setup "https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Business/BusinessForm.jsx"
click node_owner_management "https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Owner/OwnerBranch.jsx"
click node_queue_settings "https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/QueueSettings/QueueSettingsPage.jsx"
click node_queue_control "https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Control/QueueControl.jsx"
click node_analytics "https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Analytics/QueueAnalyticsPage.jsx"
click node_staff "https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Staff/StaffLayout.jsx"
click node_admin "https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/AdminPanel/AdminLayout.jsx"
click node_api_client "https://github.com/maramsshubbar/qless-frontend/blob/main/src/services/api.js"
click node_business_service "https://github.com/maramsshubbar/qless-frontend/blob/main/src/services/businessService.js"
click node_owner_service "https://github.com/maramsshubbar/qless-frontend/blob/main/src/services/ownerBusinessService.js"
click node_booking_service "https://github.com/maramsshubbar/qless-frontend/blob/main/src/services/bookingService.js"
click node_ticket_service "https://github.com/maramsshubbar/qless-frontend/blob/main/src/services/ticketService.js"
click node_queue_service "https://github.com/maramsshubbar/qless-frontend/blob/main/src/services/queueService.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_app,node_identity,node_people toneBlue
class node_browse,node_business_details,node_queue_join,node_ticket,node_dashboard,node_profile,node_bookings,node_reviews toneAmber
class node_owner_setup,node_owner_management,node_queue_settings,node_queue_control,node_analytics,node_staff toneMint
class node_admin toneRose
class node_api_client,node_business_service,node_owner_service,node_booking_service,node_ticket_service,node_queue_service,node_backend toneIndigo
```

## Components

### Application entry

- [Routed application](https://github.com/maramsshubbar/qless-frontend/blob/main/src/App.jsx): `src/App.jsx`
- [Authentication and roles](https://github.com/maramsshubbar/qless-frontend/blob/main/src/contexts/UserContext.jsx): `src/contexts/UserContext.jsx`

### Customer experience

- [Business discovery](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Browse/BrowsePage.jsx): `src/components/Browse/BrowsePage.jsx`
- [Business and branch details](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/BranchDetails/BranchDetailsPage.jsx): `src/components/BranchDetails/BranchDetailsPage.jsx`
- [Join queue](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Ticket/JoinQueuePage.jsx): `src/components/Ticket/JoinQueuePage.jsx`
- [Ticket tracking](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Ticket/TicketPage.jsx): `src/components/Ticket/TicketPage.jsx`
- [Customer dashboard](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Dashboard/CustomerDashboard.jsx): `src/components/Dashboard/CustomerDashboard.jsx`
- [Customer profile](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/CustomerProfile/CustomerProfile.jsx): `src/components/CustomerProfile/CustomerProfile.jsx`
- [Service bookings](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Bookings/BookServiceForm.jsx): `src/components/Bookings/BookServiceForm.jsx`
- [Customer reviews](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Reviews/ReviewsSection.jsx): `src/components/Reviews/ReviewsSection.jsx`

### Business operations

- [Business setup and billing](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Business/BusinessForm.jsx): `src/components/Business/BusinessForm.jsx`
- [Owner management](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Owner/OwnerBranch.jsx): `src/components/Owner/OwnerBranch.jsx`
- [Queue configuration](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/QueueSettings/QueueSettingsPage.jsx): `src/components/QueueSettings/QueueSettingsPage.jsx`
- [Queue control](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Control/QueueControl.jsx): `src/components/Control/QueueControl.jsx`
- [Queue analytics](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Analytics/QueueAnalyticsPage.jsx): `src/components/Analytics/QueueAnalyticsPage.jsx`
- [Staff workspace](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/Staff/StaffLayout.jsx): `src/components/Staff/StaffLayout.jsx`

### Platform oversight

- [Admin console](https://github.com/maramsshubbar/qless-frontend/blob/main/src/components/AdminPanel/AdminLayout.jsx): `src/components/AdminPanel/AdminLayout.jsx`

### Services and integrations

- [API request client](https://github.com/maramsshubbar/qless-frontend/blob/main/src/services/api.js): `src/services/api.js`
- [Business and branch services](https://github.com/maramsshubbar/qless-frontend/blob/main/src/services/businessService.js): `src/services/businessService.js`
- [Owner business service](https://github.com/maramsshubbar/qless-frontend/blob/main/src/services/ownerBusinessService.js): `src/services/ownerBusinessService.js`
- [Booking service](https://github.com/maramsshubbar/qless-frontend/blob/main/src/services/bookingService.js): `src/services/bookingService.js`
- [Ticket service](https://github.com/maramsshubbar/qless-frontend/blob/main/src/services/ticketService.js): `src/services/ticketService.js`
- [Queue service](https://github.com/maramsshubbar/qless-frontend/blob/main/src/services/queueService.js): `src/services/queueService.js`

### Other components

- **Platform users**
- **QLess backend**

## Connections

- Platform users → Routed application: use (evidence: `README.md`)
- Routed application → Business discovery: routes to (evidence: `src/App.jsx`)
- Routed application → Business and branch details: routes to (evidence: `src/App.jsx`)
- Routed application → Join queue: routes to (evidence: `src/App.jsx`)
- Routed application → Ticket tracking: routes to (evidence: `src/App.jsx`)
- Routed application → Customer dashboard: routes to (evidence: `src/App.jsx`)
- Routed application → Service bookings: routes to
- Routed application → Business setup and billing: routes to (evidence: `src/App.jsx`)
- Routed application → Owner management: routes to (evidence: `src/App.jsx`)
- Routed application → Staff workspace: routes to (evidence: `src/App.jsx`)
- Routed application → Admin console: routes to
- Routed application → Authentication and roles: reads user (evidence: `src/App.jsx`)
- Business discovery → Business and branch services: loads listings (evidence: `src/components/Browse/BrowsePage.jsx`)
- Business and branch details → Business and branch services: loads details (evidence: `src/components/BranchDetails/BranchDetailsPage.jsx`)
- Business and branch details → Service bookings: offers booking (evidence: `src/components/BranchDetails/BranchDetailsPage.jsx`)
- Service bookings → Booking service: requests slots (evidence: `src/components/Bookings/BookServiceForm.jsx`)
- Ticket tracking → Ticket service: loads ticket (evidence: `src/components/Ticket/TicketPage.jsx`)
- Ticket tracking → Queue service: loads queue (evidence: `src/components/Ticket/TicketPage.jsx`)
- Customer dashboard → Ticket service: loads tickets (evidence: `src/components/Dashboard/CustomerDashboard.jsx`)
- Customer dashboard → Service bookings: shows bookings
- Business setup and billing → Owner business service: creates business (evidence: `src/components/Business/BusinessForm.jsx`)
- Queue configuration → Queue service: configures queues (evidence: `src/components/QueueSettings/QueueSettingsPage.jsx`)
- Customer reviews → QLess backend: submits reviews
- Business and branch services → API request client: calls (evidence: `src/services/businessService.js`)
- Booking service → API request client: calls (evidence: `src/services/bookingService.js`)
- Queue service → API request client: calls
- API request client → QLess backend: sends requests (evidence: `src/services/api.js`)
- Owner business service → QLess backend: sends requests (evidence: `src/services/ownerBusinessService.js`)