# mahirsiam2004/lumora-client architecture

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

- Interactive diagram: https://gitdiagram.com/mahirsiam2004/lumora-client
- Repository: https://github.com/mahirsiam2004/lumora-client

## Overview

Lumora is a React front end for an event and living-space decoration marketplace. Clients browse and filter packages, inspect a service, submit a booking, pay, and track its status; decorators manage assigned work, while administrators oversee platform operations and live site appearance. Routing and role guards connect users to the relevant dashboard. The README documents booking, payment, and dashboard capabilities, but their page implementations were not sampled; those links are shown at the documented level. The backend is a separately deployed API.

Main entry points: [`src/routes/Routes.jsx`](https://github.com/mahirsiam2004/lumora-client/blob/main/src/routes/Routes.jsx) (Route table), [`src/utilits/axiosInstance.js`](https://github.com/mahirsiam2004/lumora-client/blob/main/src/utilits/axiosInstance.js) (API client), [`src/contexts/AuthContext.jsx`](https://github.com/mahirsiam2004/lumora-client/blob/main/src/contexts/AuthContext.jsx) (Authentication state), [`src/pages/dashboard/admin/AdminDashboard.jsx`](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/admin/AdminDashboard.jsx) (Admin dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_app_entry["App entry<br/>[main.jsx]"]
  node_app_shell["Provider shell<br/>[App.jsx]"]
  node_route_table["Route table<br/>[Routes.jsx]"]
  node_public_shell["Main layout<br/>[MainLayout.jsx]"]
  node_route_guards["Route guards<br/>[PrivateRoute.jsx]"]
end

subgraph group_market["Marketplace Booking"]
  node_service_catalog["Service catalog<br/>[Services.jsx]"]
  node_service_details["Service details<br/>[ServiceDetails.jsx]"]
  node_coverage_map["Coverage map"]
  node_booking["Booking flow<br/>[ServiceDetails.jsx]"]
  node_payment_pages["Payment outcome<br/>[PaymentSuccess.jsx]"]
end

subgraph group_identity["Identity and Settings"]
  node_auth_context["Authentication state<br/>[AuthContext.jsx]"]
  node_settings_context["Theme state"]
end

subgraph group_workspaces["Role Workspaces"]
  node_client_workspace["Client dashboard<br/>[UserDashboard.jsx]"]
  node_client_records["Bookings and profile<br/>[MyBookings.jsx]"]
  node_payment_history["Payment history<br/>[PaymentHistory.jsx]"]
  node_decorator_workspace["Decorator dashboard"]
  node_decorator_projects["Projects and schedule<br/>[MyProjects.jsx]"]
  node_decorator_earnings["Decorator earnings<br/>[Earnings.jsx]"]
  node_admin_workspace["Admin dashboard<br/>[AdminDashboard.jsx]"]
  node_admin_operations["Platform management<br/>[ManageBookings.jsx]"]
  node_admin_services["Service management<br/>[ManageServices.jsx]"]
  node_admin_analytics["Analytics<br/>[Analytics.jsx]"]
  node_admin_settings["Site settings<br/>[SiteSettings.jsx]"]
end

subgraph group_integrations["External Integrations"]
  node_api_client["API client<br/>[axiosInstance.js]"]
  node_backend_api["Backend API"]
  node_firebase["Firebase Auth"]
  node_stripe["Stripe"]
  node_map_tiles["OpenStreetMap tiles"]
end

node_visitor(("Client"))
node_decorator_actor(("Decorator"))
node_admin_actor(("Administrator"))

node_app_entry -->|"renders"| node_app_shell
node_app_shell -->|"provides auth"| node_auth_context
node_app_shell -->|"provides settings"| node_settings_context
node_app_shell -->|"mounts router"| node_route_table
node_route_table -->|"wraps public pages"| node_public_shell
node_route_table -->|"protects routes"| node_route_guards
node_visitor -->|"navigates"| node_route_table
node_decorator_actor -->|"navigates"| node_route_table
node_admin_actor -->|"navigates"| node_route_table
node_route_table -->|"routes to"| node_service_catalog
node_service_catalog -->|"requests services"| node_api_client
node_service_catalog -->|"opens package"| node_service_details
node_service_details -->|"loads service"| node_api_client
node_service_details -->|"collects booking"| node_booking
node_booking -->|"submits booking"| node_api_client
node_booking -.->|"starts checkout"| node_stripe
node_route_table -->|"routes to"| node_payment_pages
node_payment_pages -.->|"confirms payment"| node_stripe
node_route_table -->|"routes to"| node_coverage_map
node_coverage_map -->|"loads tiles"| node_map_tiles
node_route_guards -->|"checks identity"| node_auth_context
node_auth_context -->|"authenticates"| node_firebase
node_auth_context -->|"fetches role"| node_api_client
node_auth_context -->|"registers users"| node_backend_api
node_auth_context -->|"gets token"| node_backend_api
node_settings_context -->|"loads settings"| node_api_client
node_settings_context -->|"applies live theme"| node_admin_settings
node_route_table -->|"routes dashboard"| node_client_workspace
node_client_workspace -->|"offers booking views"| node_client_records
node_client_records -.->|"loads client data"| node_api_client
node_client_workspace -->|"offers payment history"| node_payment_history
node_payment_history -.->|"loads history"| node_api_client
node_route_table -->|"routes dashboard"| node_decorator_workspace
node_decorator_workspace -->|"offers work views"| node_decorator_projects
node_decorator_projects -.->|"loads assignments"| node_api_client
node_decorator_workspace -->|"offers earnings"| node_decorator_earnings
node_decorator_earnings -.->|"loads earnings"| node_api_client
node_route_table -->|"routes dashboard"| node_admin_workspace
node_admin_workspace -->|"offers management"| node_admin_operations
node_admin_operations -.->|"manages bookings"| node_api_client
node_admin_workspace -->|"offers catalog tools"| node_admin_services
node_admin_services -->|"manages services"| node_backend_api
node_admin_workspace -->|"offers analytics"| node_admin_analytics
node_admin_analytics -.->|"loads analytics"| node_api_client
node_admin_workspace -->|"offers theme tools"| node_admin_settings
node_admin_settings -.->|"saves settings"| node_api_client
node_api_client -->|"sends requests"| node_backend_api

click node_app_entry "https://github.com/mahirsiam2004/lumora-client/blob/main/src/main.jsx"
click node_app_shell "https://github.com/mahirsiam2004/lumora-client/blob/main/src/App.jsx"
click node_route_table "https://github.com/mahirsiam2004/lumora-client/blob/main/src/routes/Routes.jsx"
click node_public_shell "https://github.com/mahirsiam2004/lumora-client/blob/main/src/layouts/MainLayout.jsx"
click node_route_guards "https://github.com/mahirsiam2004/lumora-client/blob/main/src/routes/PrivateRoute.jsx"
click node_service_catalog "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/Services.jsx"
click node_service_details "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/ServiceDetails.jsx"
click node_coverage_map "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/ServiceCoverageMap.jsx"
click node_booking "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/ServiceDetails.jsx"
click node_payment_pages "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/PaymentSuccess.jsx"
click node_client_workspace "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/user/UserDashboard.jsx"
click node_client_records "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/user/MyBookings.jsx"
click node_payment_history "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/user/PaymentHistory.jsx"
click node_decorator_workspace "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/decorator/DecoratorDashboard.jsx"
click node_decorator_projects "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/decorator/MyProjects.jsx"
click node_decorator_earnings "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/decorator/Earnings.jsx"
click node_admin_workspace "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/admin/AdminDashboard.jsx"
click node_admin_operations "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/admin/ManageBookings.jsx"
click node_admin_services "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/admin/ManageServices.jsx"
click node_admin_analytics "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/admin/Analytics.jsx"
click node_admin_settings "https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/admin/SiteSettings.jsx"
click node_auth_context "https://github.com/mahirsiam2004/lumora-client/blob/main/src/contexts/AuthContext.jsx"
click node_settings_context "https://github.com/mahirsiam2004/lumora-client/blob/main/src/contexts/SiteSettingsContext.jsx"
click node_api_client "https://github.com/mahirsiam2004/lumora-client/blob/main/src/utilits/axiosInstance.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_entry,node_app_shell,node_route_table,node_public_shell,node_route_guards,node_visitor toneBlue
class node_service_catalog,node_service_details,node_coverage_map,node_booking,node_payment_pages toneAmber
class node_auth_context,node_settings_context toneMint
class node_client_workspace,node_client_records,node_payment_history,node_decorator_workspace,node_decorator_projects,node_decorator_earnings,node_admin_workspace,node_admin_operations,node_admin_services,node_admin_analytics,node_admin_settings toneRose
class node_api_client,node_backend_api,node_firebase,node_stripe,node_map_tiles,node_decorator_actor,node_admin_actor toneIndigo
```

## Components

### Application Shell

- [App entry](https://github.com/mahirsiam2004/lumora-client/blob/main/src/main.jsx): `src/main.jsx`
- [Provider shell](https://github.com/mahirsiam2004/lumora-client/blob/main/src/App.jsx): `src/App.jsx`
- [Route table](https://github.com/mahirsiam2004/lumora-client/blob/main/src/routes/Routes.jsx): `src/routes/Routes.jsx`
- [Main layout](https://github.com/mahirsiam2004/lumora-client/blob/main/src/layouts/MainLayout.jsx): `src/layouts/MainLayout.jsx`
- [Route guards](https://github.com/mahirsiam2004/lumora-client/blob/main/src/routes/PrivateRoute.jsx): `src/routes/PrivateRoute.jsx`

### Marketplace Booking

- [Service catalog](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/Services.jsx): `src/pages/Services.jsx`
- [Service details](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/ServiceDetails.jsx): `src/pages/ServiceDetails.jsx`
- [Coverage map](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/ServiceCoverageMap.jsx): `src/pages/ServiceCoverageMap.jsx`
- [Booking flow](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/ServiceDetails.jsx): `src/pages/ServiceDetails.jsx`
- [Payment outcome](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/PaymentSuccess.jsx): `src/pages/PaymentSuccess.jsx`

### Identity and Settings

- [Authentication state](https://github.com/mahirsiam2004/lumora-client/blob/main/src/contexts/AuthContext.jsx): `src/contexts/AuthContext.jsx`
- [Theme state](https://github.com/mahirsiam2004/lumora-client/blob/main/src/contexts/SiteSettingsContext.jsx): `src/contexts/SiteSettingsContext.jsx`

### Role Workspaces

- [Client dashboard](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/user/UserDashboard.jsx): `src/pages/dashboard/user/UserDashboard.jsx`
- [Bookings and profile](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/user/MyBookings.jsx): `src/pages/dashboard/user/MyBookings.jsx`
- [Payment history](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/user/PaymentHistory.jsx): `src/pages/dashboard/user/PaymentHistory.jsx`
- [Decorator dashboard](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/decorator/DecoratorDashboard.jsx): `src/pages/dashboard/decorator/DecoratorDashboard.jsx`
- [Projects and schedule](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/decorator/MyProjects.jsx): `src/pages/dashboard/decorator/MyProjects.jsx`
- [Decorator earnings](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/decorator/Earnings.jsx): `src/pages/dashboard/decorator/Earnings.jsx`
- [Admin dashboard](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/admin/AdminDashboard.jsx): `src/pages/dashboard/admin/AdminDashboard.jsx`
- [Platform management](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/admin/ManageBookings.jsx): `src/pages/dashboard/admin/ManageBookings.jsx`
- [Service management](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/admin/ManageServices.jsx): `src/pages/dashboard/admin/ManageServices.jsx`
- [Analytics](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/admin/Analytics.jsx): `src/pages/dashboard/admin/Analytics.jsx`
- [Site settings](https://github.com/mahirsiam2004/lumora-client/blob/main/src/pages/dashboard/admin/SiteSettings.jsx): `src/pages/dashboard/admin/SiteSettings.jsx`

### External Integrations

- [API client](https://github.com/mahirsiam2004/lumora-client/blob/main/src/utilits/axiosInstance.js): `src/utilits/axiosInstance.js`
- **Backend API**
- **Firebase Auth**
- **Stripe**
- **OpenStreetMap tiles**

### Other components

- **Client**
- **Decorator**
- **Administrator**

## Connections

- App entry → Provider shell: renders
- Provider shell → Authentication state: provides auth
- Provider shell → Theme state: provides settings
- Provider shell → Route table: mounts router
- Route table → Main layout: wraps public pages
- Route table → Route guards: protects routes
- Client → Route table: navigates
- Decorator → Route table: navigates
- Administrator → Route table: navigates
- Route table → Service catalog: routes to
- Service catalog → API client: requests services
- Service catalog → Service details: opens package
- Service details → API client: loads service
- Service details → Booking flow: collects booking
- Booking flow → API client: submits booking
- Booking flow → Stripe: starts checkout
- Route table → Payment outcome: routes to
- Payment outcome → Stripe: confirms payment
- Route table → Coverage map: routes to
- Coverage map → OpenStreetMap tiles: loads tiles
- Route guards → Authentication state: checks identity
- Authentication state → Firebase Auth: authenticates
- Authentication state → API client: fetches role
- Authentication state → Backend API: registers users
- Authentication state → Backend API: gets token
- Theme state → API client: loads settings
- Theme state → Site settings: applies live theme
- Route table → Client dashboard: routes dashboard
- Client dashboard → Bookings and profile: offers booking views
- Bookings and profile → API client: loads client data
- Client dashboard → Payment history: offers payment history
- Payment history → API client: loads history
- Route table → Decorator dashboard: routes dashboard
- Decorator dashboard → Projects and schedule: offers work views
- Projects and schedule → API client: loads assignments
- Decorator dashboard → Decorator earnings: offers earnings
- Decorator earnings → API client: loads earnings
- Route table → Admin dashboard: routes dashboard
- Admin dashboard → Platform management: offers management
- Platform management → API client: manages bookings
- Admin dashboard → Service management: offers catalog tools
- Service management → Backend API: manages services
- Admin dashboard → Analytics: offers analytics
- Analytics → API client: loads analytics
- Admin dashboard → Site settings: offers theme tools
- Site settings → API client: saves settings
- API client → Backend API: sends requests