# sumonkhan0077/home-deco-client- architecture
> Architecture diagram of the GitHub repository sumonkhan0077/home-deco-client-, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-28). It is an AI-made overview: check details against the source.
- Interactive diagram: https://gitdiagram.com/sumonkhan0077/home-deco-client-
- Repository: https://github.com/sumonkhan0077/home-deco-client-
## Overview
DecorNest is a React/Vite single-page frontend for a service marketplace, with a separate Express/MongoDB backend. The client repo is organized around route layouts, role-based dashboards, authentication state, and reusable UI sections rather than a single flat page structure.
1. **Top-level app shell**
- `src/main.jsx`, `src/App.jsx`, and `src/index.css` bootstrap the app and global styling.
- `App.css` and page-specific CSS like `src/Pages/Home/home.css` provide feature-local styling on top of Tailwind/DaisyUI.
2. **Route and layout boundaries**
- `src/Routes/Routes.jsx` is the central route map.
- `MainLayout` wraps the public marketing/catalog experience.
- `AuthLayout` isolates login/register flows.
- `DashboardLayout` wraps authenticated dashboard pages and likely provides the shared sidebar/header chrome for user, decorator, and admin views.
3. **Access control model**
- Route guards are separated into `PrivateRoute`, `AdminRoute`, and `DecoratorRoute`.
- This creates three permission tiers: public, authenticated user, and role-restricted dashboard access.
- `Forbidden` and `AppNotFound`/`ErrorPage404` represent denied-access and missing-route boundaries.
4. **Authentication and identity**
- `src/Contexts/AuthContext` and `src/Hooks/useAuth.jsx` centralize signed-in user state.
- `src/Firebase/firebase.config.js` indicates Firebase is part of the auth layer on the client.
- The README also describes JWT in HTTP-only cookies, so the auth flow is effectively hybrid: Firebase/user sign-in on the client, then secure server session/token usage for protected API calls.
5. **Secure API access**
- `src/Hooks/useAxiosSecure.jsx` is the main backend access boundary for authenticated requests.
- The app relies on secure API calls for dashboard data, bookings, role checks, and CRUD operations.
- TanStack React Query is called out in the README as the data-fetching/cache layer, so most server state is likely fetched, cached, and invalidated through that path.
6. **Public marketplace experience**
- `Home`, `Services`, `ServiceDetails`, `Coverage`, `AboutUs`, `Contract`, and `BeADecorator` form the customer-facing funnel.
- `Services` includes search/filtering by category and budget, plus pagination.
- `ServiceDetails` presents the selected service and is the likely entry point to booking/payment.
7. **Home page composition**
- The home screen is assembled from small sections under `src/Pages/Home/Shared/`.
- These include hero/header content, category tiles, featured/top cards, top eventors, FAQs, newsletter signup, and a map/location display.
- `public/data.json`, `public/location.json`, and `public/review.json` appear to support static display content for these sections.
8. **Dashboard domain split**
- The dashboard is partitioned by persona and responsibility:
- **User**: `MyBookings`, `MyProfile`, `PaymentHistory`
- **Decorator**: `AssignedTasks`, `TodayTasks`, `ServicesHistory`, `EarningsSummary`
- **Admin**: `ManageBookings`, `ManageDecorators`, `ManageServices`, `UsersManagement`, `Analytics`, `RevenueMonitoring`, `DashboardHome`
- This separation mirrors the backend authorization model and makes each dashboard view a bounded UI surface.
9. **Service management workflow**
- Admin service CRUD lives under `ManageServices` with create/update subpages.
- The service catalog is a core domain entity used by both the public marketplace and the admin panel.
- Search/filter pages and admin CRUD pages likely target the same backend collection, but with different permissions and UI affordances.
10. **Decorator application and assignment flow**
- `BeADecorator` is the public entry point for applying to become a decorator.
- Admin pages such as `ManageDecorators` and `AssignDecorator` handle review/accept/reject and task assignment.
- This establishes a workflow from public application to approved role to assigned work inside the dashboard.
11. **Payments and booking lifecycle**
- `MyBookings` includes `PaymentSuccess` and `PaymentCancelled`, which indicates a payment redirect/return flow.
- The README describes Stripe-based checkout and webhook-confirmed payments.
- After successful payment, booking status and payment history are updated and then reflected in the user/decorator/admin dashboards.
12. **Shared UI and utility layer**
- Reusable visual primitives live in `src/Components` such as `Navbar`, `Footer`, `Logo`, `Loading`, `Forbidden`, and 404 handling.
- `src/Utility` contains cross-cutting interaction helpers like animated sections, smooth scroll, and a scroll progress button.
- These sit below the page layer and are reused across public and protected screens.
13. **Infrastructure and deployment hints**
- `public/_redirects` suggests deployment on a static host like Netlify with client-side routing support.
- The architecture is frontend-heavy in this repo, but it is designed to integrate with a separate REST API backend for MongoDB, auth, bookings, decorators, services, analytics, and Stripe payment processing.
Overall, the diagram should show three main areas: a public marketplace, a role-protected dashboard, and a shared auth/data-access layer connecting the client to the external backend and payment services.
Main entry points: [`src/Routes/Routes.jsx`](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Routes/Routes.jsx) (Route map), [`src/Layouts/DashboardLayout/DashboardLayout.jsx`](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Layouts/DashboardLayout/DashboardLayout.jsx) (Dashboard layout), [`src/Hooks/useAxiosSecure.jsx`](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Hooks/useAxiosSecure.jsx) (Secure API), [`src/Hooks/useAuth.jsx`](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Hooks/useAuth.jsx) (Auth hook)
## Diagram (Mermaid)
```mermaid
flowchart TD
subgraph group_group_core["Core shell"]
node_node_main["Entry point
react bootstrap
[main.jsx]"]
node_node_app["App shell
app root
[App.jsx]"]
node_node_routes["Route map
route config
[Routes.jsx]"]
node_node_authctx["Auth state
context
[AuthProvider.jsx]"]
node_node_useauth["Auth hook
[useAuth.jsx]"]
node_node_secureapi["Secure API
axios hook
[useAxiosSecure.jsx]"]
node_node_public_layout["Main layout
[MainLayouts.jsx]"]
node_node_auth_layout["Auth layout
[AuthLayout.jsx]"]
node_node_dash_layout["Dashboard layout"]
node_node_private_route["Private gate
route guard
[PrivateRoute.jsx]"]
node_node_role_routes["Role gates
route guards
[AdminRoute.jsx]"]
end
subgraph group_group_public["Public marketplace"]
node_node_home["Home page
public page
[Home.jsx]"]
node_node_services["Services catalog
catalog page
[Services.jsx]"]
node_node_service_details["Service details
detail page
[ServiceDetails.jsx]"]
node_node_public_funnel["Public funnel
marketing pages"]
node_node_home_sections["Home sections
section components
[Header.jsx]"]
end
subgraph group_group_dashboard["Dashboard"]
node_node_dashboard_user["User views
dashboard section
[MyBookings.jsx]"]
node_node_dashboard_decorator["Decorator views
dashboard section
[AssignedTasks.jsx]"]
node_node_dashboard_admin["Admin console
dashboard section
[ManageBookings.jsx]"]
node_node_manage_services["Service admin
crud screens
[ManageServices.jsx]"]
node_node_payment_flow["Payment flow
checkout return
[PaymentSuccess.jsx]"]
end
subgraph group_group_shared["Shared UI"]
node_node_shared_ui["Shared UI
components
[Navbar.jsx]"]
node_node_utilities["Utilities
ui helpers
[SmoothScroll.jsx]"]
end
subgraph group_group_external["External services"]
node_node_backend[("Backend API
express/mongo api")]
node_node_firebase["Firebase auth
client auth config
[firebase.config.js]"]
node_node_stripe[("Stripe checkout
payment service")]
end
node_node_main -->|"boots"| node_node_app
node_node_app -->|"mounts"| node_node_routes
node_node_routes -->|"public shell"| node_node_public_layout
node_node_routes -->|"auth shell"| node_node_auth_layout
node_node_routes -->|"dashboard shell"| node_node_dash_layout
node_node_routes -->|"guards"| node_node_private_route
node_node_routes -->|"guards"| node_node_role_routes
node_node_routes -->|"maps"| node_node_public_funnel
node_node_public_layout -->|"reuses"| node_node_shared_ui
node_node_public_layout -->|"hosts"| node_node_home
node_node_home -->|"composes"| node_node_home_sections
node_node_home_sections -->|"uses"| node_node_utilities
node_node_home -->|"links"| node_node_services
node_node_services -->|"drills into"| node_node_service_details
node_node_service_details -->|"initiates"| node_node_payment_flow
node_node_dash_layout -->|"hosts"| node_node_dashboard_user
node_node_dash_layout -->|"hosts"| node_node_dashboard_decorator
node_node_dash_layout -->|"hosts"| node_node_dashboard_admin
node_node_dashboard_admin -->|"includes"| node_node_manage_services
node_node_authctx -->|"consumed by"| node_node_useauth
node_node_useauth -->|"authorizes"| node_node_private_route
node_node_useauth -->|"authorizes"| node_node_role_routes
node_node_secureapi -->|"calls"| node_node_backend
node_node_authctx -->|"integrates"| node_node_firebase
node_node_payment_flow -->|"redirects to"| node_node_stripe
node_node_dashboard_user -->|"fetches"| node_node_secureapi
node_node_dashboard_decorator -->|"fetches"| node_node_secureapi
node_node_dashboard_admin -->|"fetches"| node_node_secureapi
click node_node_main "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/main.jsx"
click node_node_app "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/App.jsx"
click node_node_routes "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Routes/Routes.jsx"
click node_node_authctx "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Contexts/AuthContext/AuthProvider.jsx"
click node_node_useauth "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Hooks/useAuth.jsx"
click node_node_secureapi "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Hooks/useAxiosSecure.jsx"
click node_node_public_layout "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Layouts/MainLayout/MainLayouts.jsx"
click node_node_auth_layout "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Layouts/AuthLayouts/AuthLayout.jsx"
click node_node_dash_layout "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Layouts/DashboardLayout/DashboardLayout.jsx"
click node_node_private_route "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Routes/PrivateRoute.jsx"
click node_node_role_routes "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Routes/AdminRoute.jsx"
click node_node_home "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Home/Home.jsx"
click node_node_services "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Services/Services.jsx"
click node_node_service_details "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/ServiceDetails/ServiceDetails.jsx"
click node_node_dashboard_user "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Dashboard/MyBookings/MyBookings.jsx"
click node_node_dashboard_decorator "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Dashboard/AssignedTasks/AssignedTasks.jsx"
click node_node_dashboard_admin "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Dashboard/ManageBookings/ManageBookings.jsx"
click node_node_manage_services "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Dashboard/Manageservices/ManageServices.jsx"
click node_node_payment_flow "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Dashboard/MyBookings/PaymentSuccess.jsx"
click node_node_shared_ui "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Components/Navbar/Navbar.jsx"
click node_node_home_sections "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Home/Shared/Header/Header.jsx"
click node_node_utilities "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Utility/SmoothScroll.jsx"
click node_node_firebase "https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Firebase/firebase.config.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_node_main,node_node_app,node_node_routes,node_node_authctx,node_node_useauth,node_node_secureapi,node_node_public_layout,node_node_auth_layout,node_node_dash_layout,node_node_private_route,node_node_role_routes toneBlue
class node_node_home,node_node_services,node_node_service_details,node_node_public_funnel,node_node_home_sections toneAmber
class node_node_dashboard_user,node_node_dashboard_decorator,node_node_dashboard_admin,node_node_manage_services,node_node_payment_flow toneMint
class node_node_shared_ui,node_node_utilities toneRose
class node_node_backend,node_node_firebase,node_node_stripe toneIndigo
```
## Components
### Core shell
App bootstrap, routing, shared layouts, and cross-cutting auth/data access.
- [Entry point](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/main.jsx): react bootstrap · Vite app startup and global wiring. · `src/main.jsx`
- [App shell](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/App.jsx): app root · Top-level composition and route mounting. · `src/App.jsx`
- [Route map](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Routes/Routes.jsx): route config · Central route definitions and layout wiring. · `src/Routes/Routes.jsx`
- [Auth state](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Contexts/AuthContext/AuthProvider.jsx): context · Signed-in user state and auth provider. · `src/Contexts/AuthContext/AuthProvider.jsx`
- [Auth hook](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Hooks/useAuth.jsx): hook · Convenient access to auth context. · `src/Hooks/useAuth.jsx`
- [Secure API](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Hooks/useAxiosSecure.jsx): axios hook · Authenticated backend request boundary. · `src/Hooks/useAxiosSecure.jsx`
- [Main layout](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Layouts/MainLayout/MainLayouts.jsx): layout · Shell for public marketplace pages. · `src/Layouts/MainLayout/MainLayouts.jsx`
- [Auth layout](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Layouts/AuthLayouts/AuthLayout.jsx): layout · Container for login and register flows. · `src/Layouts/AuthLayouts/AuthLayout.jsx`
- [Dashboard layout](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Layouts/DashboardLayout/DashboardLayout.jsx): layout · Shared chrome for protected dashboard views. · `src/Layouts/DashboardLayout/DashboardLayout.jsx`
- [Private gate](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Routes/PrivateRoute.jsx): route guard · Requires authentication for access. · `src/Routes/PrivateRoute.jsx`
- [Role gates](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Routes/AdminRoute.jsx): route guards · Admin and decorator access control. · `src/Routes/AdminRoute.jsx`
### Public marketplace
Public-facing pages and home experience.
- [Home page](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Home/Home.jsx): public page · Landing page assembled from reusable sections. · `src/Pages/Home/Home.jsx`
- [Services catalog](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Services/Services.jsx): catalog page · Searchable and paginated service listing. · `src/Pages/Services/Services.jsx`
- [Service details](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/ServiceDetails/ServiceDetails.jsx): detail page · Selected service view and booking entry. · `src/Pages/ServiceDetails/ServiceDetails.jsx`
- **Public funnel**: marketing pages · About, coverage, contract, and decorator application pages.
- [Home sections](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Home/Shared/Header/Header.jsx): section components · Hero, category, top cards, eventers, FAQs, newsletter, and map. · `src/Pages/Home/Shared/Header/Header.jsx`
### Dashboard
Role-protected user, decorator, and admin workflows.
- [User views](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Dashboard/MyBookings/MyBookings.jsx): dashboard section · Bookings, profile, and payment history. · `src/Pages/Dashboard/MyBookings/MyBookings.jsx`
- [Decorator views](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Dashboard/AssignedTasks/AssignedTasks.jsx): dashboard section · Assigned work, task list, services history, and earnings. · `src/Pages/Dashboard/AssignedTasks/AssignedTasks.jsx`
- [Admin console](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Dashboard/ManageBookings/ManageBookings.jsx): dashboard section · Bookings, decorators, services, users, analytics, and revenue. · `src/Pages/Dashboard/ManageBookings/ManageBookings.jsx`
- [Service admin](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Dashboard/Manageservices/ManageServices.jsx): crud screens · Create and update service management flows. · `src/Pages/Dashboard/Manageservices/ManageServices.jsx`
- [Payment flow](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Pages/Dashboard/MyBookings/PaymentSuccess.jsx): checkout return · Success and cancellation return pages for booking payments. · `src/Pages/Dashboard/MyBookings/PaymentSuccess.jsx`
### Shared UI
Reusable components, utilities, and static assets.
- [Shared UI](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Components/Navbar/Navbar.jsx): components · Navbar, footer, logo, loading, forbidden, and 404 UI. · `src/Components/Navbar/Navbar.jsx`
- [Utilities](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Utility/SmoothScroll.jsx): ui helpers · Animated sections, smooth scroll, and scroll progress button. · `src/Utility/SmoothScroll.jsx`
### External services
Backend, auth, and payment systems integrated by the client.
- **Backend API**: express/mongo api · Separate server for bookings, services, decorators, users, and analytics.
- [Firebase auth](https://github.com/sumonkhan0077/home-deco-client-/blob/main/src/Firebase/firebase.config.js): client auth config · Firebase configuration used by the client auth layer. · `src/Firebase/firebase.config.js`
- **Stripe checkout**: payment service · External payment provider for booking checkout.
## Connections
- Entry point → App shell: boots · Application entry renders the root app.
- App shell → Route map: mounts · Root app delegates navigation to the route map.
- Route map → Main layout: public shell · Public routes render inside the main layout.
- Route map → Auth layout: auth shell · Auth routes render inside the auth layout.
- Route map → Dashboard layout: dashboard shell · Protected dashboard routes use the dashboard layout.
- Route map → Private gate: guards · Authenticated routes are protected by the private gate.
- Route map → Role gates: guards · Role-restricted routes are protected by admin/decorator gates.
- Route map → Public funnel: maps · Public marketing and application pages are routed here.
- Main layout → Shared UI: reuses · Shared chrome is composed from reusable UI components.
- Main layout → Home page: hosts · Public layout contains the home page.
- Home page → Home sections: composes · Home page is assembled from smaller sections.
- Home sections → Utilities: uses · Sections rely on shared scroll and animation helpers.
- Home page → Services catalog: links · Users flow from landing into catalog browsing.
- Services catalog → Service details: drills into · Catalog items open detailed service pages.
- Service details → Payment flow: initiates · Service detail view leads into booking payment flow.
- Dashboard layout → User views: hosts · User dashboard views render in the shared dashboard shell.
- Dashboard layout → Decorator views: hosts · Decorator dashboard views render in the shared dashboard shell.
- Dashboard layout → Admin console: hosts · Admin dashboard views render in the shared dashboard shell.
- Admin console → Service admin: includes · Service CRUD is a dedicated admin workflow.
- Auth state → Auth hook: consumed by · Auth hook exposes the context to the app.
- Auth hook → Private gate: authorizes · Route guards depend on signed-in user state.
- Auth hook → Role gates: authorizes · Role-based routes inspect identity and permissions.
- Secure API → Backend API: calls · Secure hook is the main bridge to the backend API.
- Auth state → Firebase auth: integrates · Client auth state is backed by Firebase configuration.
- Payment flow → Stripe checkout: redirects to · Payment return flow reflects Stripe checkout outcomes.
- User views → Secure API: fetches · User dashboard data is loaded through authenticated API calls.
- Decorator views → Secure API: fetches · Decorator task and earnings data use secure requests.
- Admin console → Secure API: fetches · Admin management screens depend on secure API access.