# muntasir-wsx/dakbox-client architecture

> Architecture diagram of the GitHub repository muntasir-wsx/dakbox-client, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/muntasir-wsx/dakbox-client
- Repository: https://github.com/muntasir-wsx/dakbox-client

## Overview

DakBox is a React-based client application for a logistics/courier platform. This repository is the frontend shell: it contains the public marketing site, authentication flow, and three role-based dashboard experiences, while the backend APIs, database, and payment/auth services are external integrations.

1. Application entry and shell  
The app is bootstrapped from `src/main.jsx`, with global styling in `src/index.css` and `src/App.css`. `src/App.jsx` delegates navigation to `src/Router/Router.jsx`, so routing is the central composition point for the whole UI.

2. Route structure and layout boundaries  
The UI is split into three main layout boundaries:
- `MainLayout` for public-facing pages
- `AuthLayout` for sign-in/sign-up flows
- `DashBoardLayout` for authenticated workspace pages  
This makes the architecture easy to diagram as a top-level route switch into distinct shells.

3. Access control and role-based gating  
Protected navigation is enforced through `src/Routes/PrivateRoutes.jsx`, `UserRoute.jsx`, `RiderRoute.jsx`, and `AdminRoute.jsx`. These wrappers form the boundary between public pages and the three dashboard roles: customer/user, rider, and admin.

4. Authentication and session state  
Firebase is initialized in `src/Firebase/Firebase.init.js`, and auth state is centralized in `src/CONTEXT/AuthContext`. `useAuth.jsx` exposes that state to the rest of the app. The readme indicates Firebase Auth is paired with backend JWT-based authorization, so client auth is not just local UI state; it gates secure API access.

5. Backend/data access layer  
`src/Hooks/UseAxios.jsx` and `useAxiosSecure.jsx` provide the HTTP access layer, likely wrapping Axios for normal and authenticated requests. `useRole.jsx` appears to resolve the current user’s role from the backend. This is the main data boundary between the React client and the server-side logistics system.

6. Public marketing and informational site  
The public experience lives under `src/Pages/FullHome`, `AboutUs`, `Coverage`, `BeARider`, and shared components like `Navbar`, `Footer`, `FAQ`, and `DakBoxLogo`. These pages are mostly presentational and pull from local content in `data/` plus animation assets in `animations/`.

7. Customer/user dashboard  
The user-facing operational features are grouped under `src/Pages/DashBoard/MyParcels`, `PaymentHistory`, `PayemtIntegration`, `TrackPackage`, and `SendParcel`. This subsystem handles parcel booking, parcel details, reviews, payment checkout, and shipment tracking.

8. Rider dashboard  
Rider-specific workflows are under `src/Pages/DashBoard/Riders`, including `MyDeliveries` and `MyReviews`. The readme also describes earnings and cash-out behavior, which is reflected in the admin/rider-related pages under `src/Pages/DashBoard/Admin/Riders/*`. This area represents the operational delivery workforce.

9. Admin dashboard  
Administrative control lives in `src/Pages/DashBoard/Admin`, with subareas for managing all parcels, rider approval and status control, make-admin actions, and cash-out requests. `AdminMain` is the admin landing page, while the nested rider management pages separate pending, active, earnings, and cash-out views.

10. Payments and financial flow  
`src/Pages/DashBoard/PayemtIntegration/Payment.jsx` and `PaymentForm.jsx` form the payment boundary. The readme says Stripe is the external gateway, so the frontend’s role is to collect payment data and confirm transactions, while the server handles payment intent and history persistence.

11. Coverage and geospatial UI  
`src/Pages/Coverage/BangladeshMap.jsx`, `Coverage.jsx`, and `SearchBox.jsx` provide the geographic delivery-coverage experience. The app uses React Leaflet to visualize service areas, with warehouse/location data coming from `src/assets/warehouses.json` and related data files.

12. Content, static data, and media assets  
Non-API content is stored locally in `data/` and `src/assets/`, including service descriptions, reviews, division data, warehouse metadata, and animation JSON files. This suggests the public site is partly static/content-driven, while operational dashboard pages are data-driven from the backend.

13. Overall system boundary  
For an architecture diagram, the clearest separation is:
- React client UI and route/layout shell
- Auth/context + API hooks as the client state/data boundary
- External services: Firebase Auth, Stripe, and the Node/Express/MongoDB backend described in the readme  
The frontend orchestrates user experience and authorization, but the business logic for parcels, riders, earnings, analytics, and payments ultimately lives behind API calls.

Main entry points: [`src/Router/Router.jsx`](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Router/Router.jsx) (Router), [`src/Routes/PrivateRoutes.jsx`](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Routes/PrivateRoutes.jsx) (PrivateRoutes), [`src/Layouts/DashBoardLayout/DashBoardLayout.jsx`](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Layouts/DashBoardLayout/DashBoardLayout.jsx) (DashBoardLayout), [`src/Pages/DashBoard/MyParcels/MyParcels.jsx`](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Pages/DashBoard/MyParcels/MyParcels.jsx) (User Ops)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App Shell"]
  node_main(("main.jsx<br/>entry<br/>[main.jsx]"))
  node_app["App<br/>root component<br/>[App.jsx]"]
  node_router["Router<br/>route map<br/>[Router.jsx]"]
end

subgraph group_access["Auth & Access"]
  node_authlayout["AuthLayout<br/>auth shell<br/>[AuthLayout.jsx]"]
  node_privateroutes["PrivateRoutes<br/>guard<br/>[PrivateRoutes.jsx]"]
  node_authprovider["AuthProvider<br/>session provider<br/>[AuthProvider.jsx]"]
  node_authcontext["AuthContext<br/>[AuthContext.jsx]"]
  node_useauth["useAuth<br/>hook<br/>[useAuth.jsx]"]
  node_signinup["Sign In/Up<br/>auth pages<br/>[SignIn.jsx]"]
end

subgraph group_public["Public Site"]
  node_mainlayout["MainLayout<br/>public shell<br/>[MainLayout.jsx]"]
  node_publichome["Home<br/>marketing pages<br/>[Home.jsx]"]
  node_coverage["Coverage<br/>geospatial page<br/>[Coverage.jsx]"]
end

subgraph group_userdash["User Dashboard"]
  node_dashboardlayout["DashBoardLayout<br/>workspace shell"]
  node_userroute["UserRoute<br/>role guard<br/>[UserRoute.jsx]"]
  node_userops["User Ops<br/>customer dashboard<br/>[MyParcels.jsx]"]
end

subgraph group_riderdash["Rider Dashboard"]
  node_riderroute["RiderRoute<br/>role guard<br/>[RiderRoute.jsx]"]
  node_riderops["Rider Ops<br/>delivery dashboard<br/>[MyDeliveries.jsx]"]
end

subgraph group_admindash["Admin Dashboard"]
  node_adminroute["AdminRoute<br/>role guard<br/>[AdminRoute.jsx]"]
  node_adminops["Admin Ops<br/>admin workspace<br/>[AdminMain.jsx]"]
end

subgraph group_shared["Content & Media"]
  node_useaxios["UseAxios<br/>api hook<br/>[UseAxios.jsx]"]
  node_useaxiossecure["useAxiosSecure<br/>api hook<br/>[useAxiosSecure.jsx]"]
  node_userole["useRole<br/>role hook<br/>[useRole.jsx]"]
  node_content["Static Content<br/>local data<br/>[services.json]"]
end

subgraph group_external["External Services"]
  node_firebaseinit["Firebase init<br/>auth bootstrap<br/>[Firebase.init.js]"]
  node_backend[("Backend API<br/>server integration")]
  node_stripe[("Stripe<br/>payment gateway")]
  node_firebaseauth[("Firebase Auth<br/>auth service")]
end

node_main -->|"boots"| node_app
node_app -->|"delegates"| node_router
node_router -->|"public shell"| node_mainlayout
node_router -->|"auth shell"| node_authlayout
node_router -->|"workspace shell"| node_dashboardlayout
node_router -->|"protects"| node_privateroutes
node_privateroutes -->|"branches"| node_userroute
node_privateroutes -->|"branches"| node_riderroute
node_privateroutes -->|"branches"| node_adminroute
node_authprovider -->|"provides"| node_authcontext
node_authcontext -->|"consumed by"| node_useauth
node_authprovider -->|"initializes"| node_firebaseinit
node_firebaseinit -->|"connects"| node_firebaseauth
node_useaxiossecure -->|"calls"| node_backend
node_useaxios -->|"calls"| node_backend
node_userole -->|"resolves"| node_backend
node_router -->|"routes"| node_signinup
node_router -->|"routes"| node_publichome
node_router -->|"routes"| node_coverage
node_router -->|"routes"| node_userops
node_router -->|"routes"| node_riderops
node_router -->|"routes"| node_adminops
node_userops -->|"payments"| node_stripe
node_publichome -->|"renders"| node_content
node_coverage -->|"maps"| node_content
node_dashboardlayout -->|"hosts"| node_userops
node_dashboardlayout -->|"hosts"| node_riderops
node_dashboardlayout -->|"hosts"| node_adminops

click node_main "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/main.jsx"
click node_app "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/App.jsx"
click node_router "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Router/Router.jsx"
click node_mainlayout "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Layouts/MainLayout/MainLayout.jsx"
click node_authlayout "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Layouts/AuthLayout/AuthLayout.jsx"
click node_dashboardlayout "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Layouts/DashBoardLayout/DashBoardLayout.jsx"
click node_privateroutes "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Routes/PrivateRoutes.jsx"
click node_userroute "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Routes/UserRoute.jsx"
click node_riderroute "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Routes/RiderRoute.jsx"
click node_adminroute "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Routes/AdminRoute.jsx"
click node_authprovider "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/CONTEXT/AuthContext/AuthProvider.jsx"
click node_authcontext "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/CONTEXT/AuthContext/AuthContext.jsx"
click node_useauth "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Hooks/useAuth.jsx"
click node_useaxios "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Hooks/UseAxios.jsx"
click node_useaxiossecure "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Hooks/useAxiosSecure.jsx"
click node_userole "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Hooks/useRole.jsx"
click node_firebaseinit "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Firebase/Firebase.init.js"
click node_publichome "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Pages/FullHome/Home/Home.jsx"
click node_coverage "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Pages/Coverage/Coverage.jsx"
click node_signinup "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Pages/AuthPages/SignIn/SignIn.jsx"
click node_userops "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Pages/DashBoard/MyParcels/MyParcels.jsx"
click node_riderops "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Pages/DashBoard/Riders/MyDeliveries/MyDeliveries.jsx"
click node_adminops "https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Pages/DashBoard/Admin/AdminMain/AdminMain.jsx"
click node_content "https://github.com/muntasir-wsx/dakbox-client/blob/main/data/services.json"

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_main,node_app,node_router,node_useaxios,node_useaxiossecure,node_userole,node_content toneBlue
class node_authlayout,node_privateroutes,node_authprovider,node_authcontext,node_useauth,node_signinup,node_firebaseinit,node_backend,node_stripe,node_firebaseauth toneAmber
class node_mainlayout,node_publichome,node_coverage toneMint
class node_dashboardlayout,node_userroute,node_userops toneRose
class node_riderroute,node_riderops toneIndigo
class node_adminroute,node_adminops toneTeal
```

## Components

### App Shell

Entry point, global styling, and route composition.

- [main.jsx](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/main.jsx): entry · React bootstrap entry. · `src/main.jsx`
- [App](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/App.jsx): root component · Top-level UI container. · `src/App.jsx`
- [Router](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Router/Router.jsx): route map · Central route composition point. · `src/Router/Router.jsx`

### Auth & Access

Session state, auth providers, and route guards.

- [AuthLayout](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Layouts/AuthLayout/AuthLayout.jsx): auth shell · Layout for sign-in and sign-up flows. · `src/Layouts/AuthLayout/AuthLayout.jsx`
- [PrivateRoutes](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Routes/PrivateRoutes.jsx): guard · Blocks unauthenticated access. · `src/Routes/PrivateRoutes.jsx`
- [AuthProvider](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/CONTEXT/AuthContext/AuthProvider.jsx): session provider · Supplies auth state to the app. · `src/CONTEXT/AuthContext/AuthProvider.jsx`
- [AuthContext](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/CONTEXT/AuthContext/AuthContext.jsx): context · Central auth state and hooks surface. · `src/CONTEXT/AuthContext/AuthContext.jsx`
- [useAuth](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Hooks/useAuth.jsx): hook · Reads auth session state. · `src/Hooks/useAuth.jsx`
- [Sign In/Up](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Pages/AuthPages/SignIn/SignIn.jsx): auth pages · Authentication entry screens. · `src/Pages/AuthPages/SignIn/SignIn.jsx`

### Public Site

Marketing, informational, and unauthenticated pages.

- [MainLayout](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Layouts/MainLayout/MainLayout.jsx): public shell · Layout for public-facing pages. · `src/Layouts/MainLayout/MainLayout.jsx`
- [Home](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Pages/FullHome/Home/Home.jsx): marketing pages · Public landing and informational experience. · `src/Pages/FullHome/Home/Home.jsx`
- [Coverage](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Pages/Coverage/Coverage.jsx): geospatial page · Service-area and warehouse coverage UI. · `src/Pages/Coverage/Coverage.jsx`

### User Dashboard

Customer parcel and payment workflows.

- [DashBoardLayout](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Layouts/DashBoardLayout/DashBoardLayout.jsx): workspace shell · Layout for authenticated dashboard pages. · `src/Layouts/DashBoardLayout/DashBoardLayout.jsx`
- [UserRoute](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Routes/UserRoute.jsx): role guard · Customer role boundary. · `src/Routes/UserRoute.jsx`
- [User Ops](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Pages/DashBoard/MyParcels/MyParcels.jsx): customer dashboard · Parcel booking, details, tracking, history, and payment. · `src/Pages/DashBoard/MyParcels/MyParcels.jsx`

### Rider Dashboard

Delivery-workforce workflows.

- [RiderRoute](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Routes/RiderRoute.jsx): role guard · Rider role boundary. · `src/Routes/RiderRoute.jsx`
- [Rider Ops](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Pages/DashBoard/Riders/MyDeliveries/MyDeliveries.jsx): delivery dashboard · Delivery and review workflow. · `src/Pages/DashBoard/Riders/MyDeliveries/MyDeliveries.jsx`

### Admin Dashboard

Operational control and rider management.

- [AdminRoute](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Routes/AdminRoute.jsx): role guard · Admin role boundary. · `src/Routes/AdminRoute.jsx`
- [Admin Ops](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Pages/DashBoard/Admin/AdminMain/AdminMain.jsx): admin workspace · Parcel oversight, rider approvals, and cash-out control. · `src/Pages/DashBoard/Admin/AdminMain/AdminMain.jsx`

### Content & Media

Local static content and asset sources.

- [UseAxios](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Hooks/UseAxios.jsx): api hook · General HTTP client wrapper. · `src/Hooks/UseAxios.jsx`
- [useAxiosSecure](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Hooks/useAxiosSecure.jsx): api hook · Authenticated HTTP client wrapper. · `src/Hooks/useAxiosSecure.jsx`
- [useRole](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Hooks/useRole.jsx): role hook · Resolves current user role from backend. · `src/Hooks/useRole.jsx`
- [Static Content](https://github.com/muntasir-wsx/dakbox-client/blob/main/data/services.json): local data · Local content, reviews, services, and geography data. · `data/services.json`

### External Services

Third-party and server-side integrations.

- [Firebase init](https://github.com/muntasir-wsx/dakbox-client/blob/main/src/Firebase/Firebase.init.js): auth bootstrap · Initializes Firebase auth client. · `src/Firebase/Firebase.init.js`
- **Backend API**: server integration · External logistics and authorization API.
- **Stripe**: payment gateway · External payment processor.
- **Firebase Auth**: auth service · External identity provider.

## Connections

- main.jsx → App: boots · React entry renders the app root.
- App → Router: delegates · App hands navigation to the router.
- Router → MainLayout: public shell · Routes into the public site layout.
- Router → AuthLayout: auth shell · Routes into sign-in/sign-up flow.
- Router → DashBoardLayout: workspace shell · Routes into authenticated dashboard pages.
- Router → PrivateRoutes: protects · Secures authenticated sections.
- PrivateRoutes → UserRoute: branches · Selects customer role access.
- PrivateRoutes → RiderRoute: branches · Selects rider role access.
- PrivateRoutes → AdminRoute: branches · Selects admin role access.
- AuthProvider → AuthContext: provides · Supplies shared auth state.
- AuthContext → useAuth: consumed by · Hook reads the shared auth context.
- AuthProvider → Firebase init: initializes · Auth provider depends on Firebase setup.
- Firebase init → Firebase Auth: connects · Client auth is backed by Firebase Auth.
- useAxiosSecure → Backend API: calls · Authenticated API requests reach the backend.
- UseAxios → Backend API: calls · General data requests reach the backend.
- useRole → Backend API: resolves · Role lookup comes from server data.
- Router → Sign In/Up: routes · Public auth screens are composed under routing.
- Router → Home: routes · Public marketing pages are composed under routing.
- Router → Coverage: routes · Coverage and map pages are exposed publicly.
- Router → User Ops: routes · Customer dashboard pages are composed under routing.
- Router → Rider Ops: routes · Rider dashboard pages are composed under routing.
- Router → Admin Ops: routes · Admin dashboard pages are composed under routing.
- User Ops → Stripe: payments · Checkout flow connects to Stripe-backed payment handling.
- Home → Static Content: renders · Marketing content is driven by local data.
- Coverage → Static Content: maps · Coverage UI uses local warehouse and division data.
- DashBoardLayout → User Ops: hosts · Workspace shell contains customer workflows.
- DashBoardLayout → Rider Ops: hosts · Workspace shell contains rider workflows.
- DashBoardLayout → Admin Ops: hosts · Workspace shell contains admin workflows.