How namhuynh1234kk-blip/web-nail works
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: App.tsx Lumé storefront · AuthContext.tsx Account & orders · ServiceDetailModal.tsx Offering details · BookingModal.tsx Booking form
Components 23
Storefront
- Lumé storefront
src/App.tsx - Navigation
src/components/Header.tsx - Promotions
src/components/HeroDealsBanners.tsx - Best sellers
src/components/BestSellersSection.tsx - Service catalog
src/components/ServicesSection.tsx - Service data
src/data/servicesData.ts - Reviews
src/components/ReviewsSection.tsx
Bookings & Commerce
- Offering details
src/components/ServiceDetailModal.tsx - Booking form
src/components/BookingModal.tsx - Product purchase
src/components/ProductPurchaseModal.tsx - Appointment lookup
src/components/AppointmentLookupModal.tsx
Member Operations
- Authentication
src/components/AuthModal.tsx - Customer portal
src/components/CustomerPortalModal.tsx - Admin portal
src/components/AdminPortalModal.tsx - Staff portal
src/components/StaffPortalModal.tsx - Sales portal
src/components/SalesPortalModal.tsx - Accountant portal
src/components/AccountantPortalModal.tsx
Runtime & State
- React entry
src/main.tsx - Account & orders
src/context/AuthContext.tsx - Language settings
src/context/LanguageContext.tsx - API server
server.ts
Other components
- Visitor
- Email service
Connections 29
- 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