# namhuynh1234kk-blip/web-nail architecture

> Architecture diagram of the GitHub repository namhuynh1234kk-blip/web-nail, 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/namhuynh1234kk-blip/web-nail
- Repository: https://github.com/namhuynh1234kk-blip/web-nail

## Overview

Lumé is a spa and beauty-service storefront with product sales and role-based customer and staff portals. The main visitor workflow is browsing promotions or services, viewing an offering, then opening a booking or purchase flow; members can also access account, appointment, and rewards features. App.tsx coordinates the visible experience, while AuthContext.tsx owns client-side user, appointment, order, and reward state. The tree documents additional admin, sales, staff, and accountant portals; their internal wiring is not fully shown, so those links are kept conservative. The server excerpt shows appointment and product APIs backed by database read/write helpers, but does not establish which UI calls them.

Main entry points: [`src/App.tsx`](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/App.tsx) (Lumé storefront), [`src/context/AuthContext.tsx`](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/context/AuthContext.tsx) (Account & orders), [`src/components/ServiceDetailModal.tsx`](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/ServiceDetailModal.tsx) (Offering details), [`src/components/BookingModal.tsx`](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/BookingModal.tsx) (Booking form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_webapp["Lumé storefront<br/>[App.tsx]"]
  node_header["Navigation<br/>[Header.tsx]"]
  node_promos["Promotions"]
  node_best["Best sellers"]
  node_services["Service catalog"]
  node_service_data["Service data<br/>[servicesData.ts]"]
  node_reviews["Reviews<br/>[ReviewsSection.tsx]"]
end

subgraph group_booking["Bookings &amp; Commerce"]
  node_service_detail["Offering details"]
  node_booking_modal["Booking form<br/>[BookingModal.tsx]"]
  node_purchase_modal["Product purchase"]
  node_lookup["Appointment lookup"]
end

subgraph group_members["Member Operations"]
  node_auth_modal["Authentication<br/>[AuthModal.tsx]"]
  node_customer_portal["Customer portal"]
  node_admin_portal["Admin portal"]
  node_staff_portal["Staff portal"]
  node_sales_portal["Sales portal"]
  node_accountant_portal["Accountant portal"]
end

subgraph group_runtime["Runtime &amp; State"]
  node_main["React entry<br/>[main.tsx]"]
  node_auth_state["Account &amp; orders<br/>[AuthContext.tsx]"]
  node_language["Language settings"]
  node_server["API server<br/>[server.ts]"]
end

node_visitor(("Visitor"))
node_email["Email service"]

node_visitor -->|"opens"| node_main
node_main -->|"renders"| node_webapp
node_webapp -->|"renders"| node_header
node_webapp -->|"renders"| node_promos
node_webapp -->|"renders"| node_best
node_webapp -->|"renders"| node_service_detail
node_webapp -->|"opens"| node_booking_modal
node_webapp -->|"opens"| node_purchase_modal
node_webapp -->|"renders"| node_lookup
node_webapp -->|"renders"| node_auth_modal
node_webapp -->|"reads state"| node_auth_state
node_webapp -->|"provides context"| node_language
node_visitor -->|"browses"| node_services
node_services -->|"reads"| node_service_data
node_best -->|"selects offering"| node_service_detail
node_service_detail -->|"selects booking"| node_booking_modal
node_service_detail -->|"selects purchase"| node_purchase_modal
node_booking_modal -->|"adds appointment"| node_auth_state
node_purchase_modal -->|"adds order"| node_auth_state
node_lookup -->|"checks appointments"| node_auth_state
node_auth_modal -->|"authenticates"| node_auth_state
node_customer_portal -->|"reads account data"| node_auth_state
node_admin_portal -->|"manages records"| node_auth_state
node_staff_portal -->|"updates appointments"| node_auth_state
node_sales_portal -->|"updates orders"| node_auth_state
node_accountant_portal -->|"updates orders"| node_auth_state
node_reviews -->|"accepts reviews"| node_visitor
node_visitor -.->|"requests API"| node_server
node_server -.->|"sends mail"| node_email

click node_webapp "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/App.tsx"
click node_main "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/main.tsx"
click node_header "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/Header.tsx"
click node_promos "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/HeroDealsBanners.tsx"
click node_best "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/BestSellersSection.tsx"
click node_services "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/ServicesSection.tsx"
click node_service_data "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/data/servicesData.ts"
click node_reviews "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/ReviewsSection.tsx"
click node_service_detail "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/ServiceDetailModal.tsx"
click node_booking_modal "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/BookingModal.tsx"
click node_purchase_modal "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/ProductPurchaseModal.tsx"
click node_lookup "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/AppointmentLookupModal.tsx"
click node_auth_modal "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/AuthModal.tsx"
click node_customer_portal "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/CustomerPortalModal.tsx"
click node_admin_portal "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/AdminPortalModal.tsx"
click node_staff_portal "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/StaffPortalModal.tsx"
click node_sales_portal "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/SalesPortalModal.tsx"
click node_accountant_portal "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/AccountantPortalModal.tsx"
click node_auth_state "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/context/AuthContext.tsx"
click node_language "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/context/LanguageContext.tsx"
click node_server "https://github.com/namhuynh1234kk-blip/web-nail/blob/main/server.ts"

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_webapp,node_header,node_promos,node_best,node_services,node_service_data,node_reviews toneBlue
class node_service_detail,node_booking_modal,node_purchase_modal,node_lookup toneAmber
class node_auth_modal,node_customer_portal,node_admin_portal,node_staff_portal,node_sales_portal,node_accountant_portal toneMint
class node_main,node_auth_state,node_language,node_server toneRose
class node_visitor,node_email toneIndigo
```

## Components

### Storefront

- [Lumé storefront](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/Header.tsx): `src/components/Header.tsx`
- [Promotions](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/HeroDealsBanners.tsx): `src/components/HeroDealsBanners.tsx`
- [Best sellers](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/BestSellersSection.tsx): `src/components/BestSellersSection.tsx`
- [Service catalog](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/ServicesSection.tsx): `src/components/ServicesSection.tsx`
- [Service data](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/data/servicesData.ts): `src/data/servicesData.ts`
- [Reviews](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/ReviewsSection.tsx): `src/components/ReviewsSection.tsx`

### Bookings & Commerce

- [Offering details](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/ServiceDetailModal.tsx): `src/components/ServiceDetailModal.tsx`
- [Booking form](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/BookingModal.tsx): `src/components/BookingModal.tsx`
- [Product purchase](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/ProductPurchaseModal.tsx): `src/components/ProductPurchaseModal.tsx`
- [Appointment lookup](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/AppointmentLookupModal.tsx): `src/components/AppointmentLookupModal.tsx`

### Member Operations

- [Authentication](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/AuthModal.tsx): `src/components/AuthModal.tsx`
- [Customer portal](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/CustomerPortalModal.tsx): `src/components/CustomerPortalModal.tsx`
- [Admin portal](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/AdminPortalModal.tsx): `src/components/AdminPortalModal.tsx`
- [Staff portal](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/StaffPortalModal.tsx): `src/components/StaffPortalModal.tsx`
- [Sales portal](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/SalesPortalModal.tsx): `src/components/SalesPortalModal.tsx`
- [Accountant portal](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/components/AccountantPortalModal.tsx): `src/components/AccountantPortalModal.tsx`

### Runtime & State

- [React entry](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/main.tsx): `src/main.tsx`
- [Account & orders](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`
- [Language settings](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/src/context/LanguageContext.tsx): `src/context/LanguageContext.tsx`
- [API server](https://github.com/namhuynh1234kk-blip/web-nail/blob/main/server.ts): `server.ts`

### Other components

- **Visitor**
- **Email service**

## Connections

- Visitor → React entry: opens
- React entry → Lumé storefront: renders
- Lumé storefront → Navigation: renders
- Lumé storefront → Promotions: renders
- Lumé storefront → Best sellers: renders
- Lumé storefront → Offering details: renders
- Lumé storefront → Booking form: opens
- Lumé storefront → Product purchase: opens
- Lumé storefront → Appointment lookup: renders
- Lumé storefront → Authentication: renders
- Lumé storefront → Account & orders: reads state
- Lumé storefront → Language settings: provides context
- Visitor → Service catalog: browses
- Service catalog → Service data: reads
- Best sellers → Offering details: selects offering
- Offering details → Booking form: selects booking
- Offering details → Product purchase: selects purchase
- Booking form → Account & orders: adds appointment
- Product purchase → Account & orders: adds order
- Appointment lookup → Account & orders: checks appointments
- Authentication → Account & orders: authenticates
- Customer portal → Account & orders: reads account data
- Admin portal → Account & orders: manages records
- Staff portal → Account & orders: updates appointments
- Sales portal → Account & orders: updates orders
- Accountant portal → Account & orders: updates orders
- Reviews → Visitor: accepts reviews
- Visitor → API server: requests API
- API server → Email service: sends mail