How sumonkhan0077/home-deco-client- works
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: Routes.jsx Route map · DashboardLayout.jsx Dashboard layout · useAxiosSecure.jsx Secure API · useAuth.jsx Auth hook
Components 26
Core shell
App bootstrap, routing, shared layouts, and cross-cutting auth/data access.
- Entry point · Vite app startup and global wiring.
src/main.jsx - App shell · Top-level composition and route mounting.
src/App.jsx - Route map · Central route definitions and layout wiring.
src/Routes/Routes.jsx - Auth state · Signed-in user state and auth provider.
src/Contexts/AuthContext/AuthProvider.jsx - Auth hook · Convenient access to auth context.
src/Hooks/useAuth.jsx - Secure API · Authenticated backend request boundary.
src/Hooks/useAxiosSecure.jsx - Main layout · Shell for public marketplace pages.
src/Layouts/MainLayout/MainLayouts.jsx - Auth layout · Container for login and register flows.
src/Layouts/AuthLayouts/AuthLayout.jsx - Dashboard layout · Shared chrome for protected dashboard views.
src/Layouts/DashboardLayout/DashboardLayout.jsx - Private gate · Requires authentication for access.
src/Routes/PrivateRoute.jsx - Role gates · Admin and decorator access control.
src/Routes/AdminRoute.jsx
Public marketplace
Public-facing pages and home experience.
- Home page · Landing page assembled from reusable sections.
src/Pages/Home/Home.jsx - Services catalog · Searchable and paginated service listing.
src/Pages/Services/Services.jsx - Service details · Selected service view and booking entry.
src/Pages/ServiceDetails/ServiceDetails.jsx - Public funnel · About, coverage, contract, and decorator application pages.
- Home sections · 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 · Bookings, profile, and payment history.
src/Pages/Dashboard/MyBookings/MyBookings.jsx - Decorator views · Assigned work, task list, services history, and earnings.
src/Pages/Dashboard/AssignedTasks/AssignedTasks.jsx - Admin console · Bookings, decorators, services, users, analytics, and revenue.
src/Pages/Dashboard/ManageBookings/ManageBookings.jsx - Service admin · Create and update service management flows.
src/Pages/Dashboard/Manageservices/ManageServices.jsx - Payment flow · Success and cancellation return pages for booking payments.
src/Pages/Dashboard/MyBookings/PaymentSuccess.jsx
Shared UI
Reusable components, utilities, and static assets.
External services
Backend, auth, and payment systems integrated by the client.
- Backend API · Separate server for bookings, services, decorators, users, and analytics.
- Firebase auth · Firebase configuration used by the client auth layer.
src/Firebase/firebase.config.js - Stripe checkout · External payment provider for booking checkout.
Connections 28
- 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.