How mahirsiam2004/lumora-client works
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: Routes.jsx Route table · axiosInstance.js API client · AuthContext.jsx Authentication state · AdminDashboard.jsx Admin dashboard
Components 31
Application Shell
- App entry
src/main.jsx - Provider shell
src/App.jsx - Route table
src/routes/Routes.jsx - Main layout
src/layouts/MainLayout.jsx - Route guards
src/routes/PrivateRoute.jsx
Marketplace Booking
- Service catalog
src/pages/Services.jsx - Service details
src/pages/ServiceDetails.jsx - Coverage map
src/pages/ServiceCoverageMap.jsx - Booking flow
src/pages/ServiceDetails.jsx - Payment outcome
src/pages/PaymentSuccess.jsx
Identity and Settings
- Authentication state
src/contexts/AuthContext.jsx - Theme state
src/contexts/SiteSettingsContext.jsx
Role Workspaces
- Client dashboard
src/pages/dashboard/user/UserDashboard.jsx - Bookings and profile
src/pages/dashboard/user/MyBookings.jsx - Payment history
src/pages/dashboard/user/PaymentHistory.jsx - Decorator dashboard
src/pages/dashboard/decorator/DecoratorDashboard.jsx - Projects and schedule
src/pages/dashboard/decorator/MyProjects.jsx - Decorator earnings
src/pages/dashboard/decorator/Earnings.jsx - Admin dashboard
src/pages/dashboard/admin/AdminDashboard.jsx - Platform management
src/pages/dashboard/admin/ManageBookings.jsx - Service management
src/pages/dashboard/admin/ManageServices.jsx - Analytics
src/pages/dashboard/admin/Analytics.jsx - Site settings
src/pages/dashboard/admin/SiteSettings.jsx
External Integrations
- API client
src/utilits/axiosInstance.js - Backend API
- Firebase Auth
- Stripe
- OpenStreetMap tiles
Other components
- Client
- Decorator
- Administrator
Connections 47
- 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