# nahidruhan/spread-fast-client architecture

> Architecture diagram of the GitHub repository nahidruhan/spread-fast-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/nahidruhan/spread-fast-client
- Repository: https://github.com/nahidruhan/spread-fast-client

## Overview

1. **What this repo is**
   - This is the **client-side SPA** for Spread Fast, a logistics/courier platform.
   - It is a **React + Vite** application deployed as a static frontend, with a separate backend API described in the README but not included in this repo.

2. **App bootstrap and runtime boundaries**
   - `src/main.jsx` is the entry point and wires together the global app shell.
   - The app uses `src/index.css` plus the Vite build pipeline, and is hosted via Firebase Hosting config (`firebase.json`, `.firebaserc`).
   - Static content in `public/` is served directly by the hosting layer.

3. **Authentication and user identity**
   - Authentication is centralized in `src/context/authcontext` and `src/context/authprovider`, with Firebase initialized in `src/firebase/firebase.init.js`.
   - `useAuth.jsx` exposes the current user/session state to the rest of the app.
   - The auth layer is the main boundary between anonymous users and protected parcel/rider/admin functionality.

4. **Routing and access control**
   - `src/routes/Router.jsx` defines the client navigation map.
   - Route guards are split by role:
     - `PrivateRoute.jsx` for logged-in users
     - `AdminRoute.jsx` for admin-only screens
     - `RiderRoute.jsx` for rider-only screens
   - `Forbidden.jsx` and `components/error/*` handle access-denied and error states.

5. **Layout hierarchy**
   - The app is organized around three top-level shells:
     - `RootLayout.jsx` for the public-facing site
     - `AuthLayout.jsx` for login/register screens
     - `DashboardLayout.jsx` for authenticated dashboard pages
   - Shared chrome lives in `src/pages/shared` and `src/components`, especially `Navbar`, `Sidebar`, `Footer`, `Logo`, `Loading`, and `Border`.

6. **Public/customer experience**
   - The home/marketing side is under `src/pages/home`, with sections for banner, services, how-it-works, features, FAQ, collaboration, and reviews.
   - Informational pages like `AboutUs` and `Coverage` support the customer discovery flow.
   - `SendParcel.jsx` is the key customer transaction entry point for booking a parcel.

7. **Parcel lifecycle and customer dashboard flows**
   - Customer parcel management is in `src/pages/dashboard/my-parcels`, including `MyParcels.jsx` and `Tracking.jsx`.
   - Payment-related screens are isolated in `src/pages/dashboard/payment`, with explicit success and cancellation return pages.
   - `PaymentHistory.jsx` shows completed transactions and receipt-like history, which implies a backend-backed payment/order record.

8. **Rider operations**
   - Rider-specific UI lives in `src/pages/rider` and `src/pages/dashboard/rider`.
   - These screens are designed around delivery execution: accepting work, updating delivery status, and managing active jobs.
   - The README indicates rider availability/work status is part of the workflow, so the navbar/dashboard likely serves as the control surface for dispatch eligibility.

9. **Admin operations**
   - Administrative parcel oversight is in `AllParcels.jsx` and `PendingParcel.jsx`.
   - User moderation is handled in `UserManage.jsx`.
   - The admin area is the operational control plane for approving riders, managing users, and moving parcels through hub/origin/destination states.

10. **Data access and server interaction**
   - `useAxiosSecure.jsx` is the main client-side data access abstraction for authenticated API calls to the backend.
   - `useRole.jsx` likely resolves the current user’s role for routing and UI gating.
   - From the README, the frontend talks to a separate **Node/Express + MongoDB** backend and uses **Stripe** for payments; Firebase Auth tokens are used to secure requests.

11. **Static data and local content**
   - The app includes local JSON datasets such as `public/reviews.json`, `public/serviceCenters.json`, and `src/assets/warehouses.json`.
   - These files support location/coverage and testimonial content without requiring runtime API calls.
   - Visual assets are organized under `src/assets`, including banners and brand imagery.

12. **Error, loading, and empty-state handling**
   - `Loading.jsx` provides a shared loading state across async screens.
   - Error boundaries/pages are split into reusable error and forbidden views, which keeps route failures and authorization failures distinct.
   - This suggests the app is designed to handle protected async dashboards gracefully rather than only static marketing pages.

13. **Architecture summary for diagramming**
   - A good diagram would show:
     - **Public SPA shell** → marketing pages
     - **Auth layer** → Firebase login/register/social auth
     - **Role-gated dashboard** → customer, rider, admin sub-flows
     - **Secure API boundary** → `useAxiosSecure` to backend services
     - **Payment boundary** → Stripe checkout with success/cancel redirects
     - **Static assets/data** → hosted JSON and media files consumed directly by the client

Main entry points: [`src/hooks/useAxiosSecure.jsx`](https://github.com/nahidruhan/spread-fast-client/blob/main/src/hooks/useAxiosSecure.jsx) (useAxiosSecure), [`src/routes/Router.jsx`](https://github.com/nahidruhan/spread-fast-client/blob/main/src/routes/Router.jsx) (Router), [`src/pages/shared/navbar/Navbar.jsx`](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/shared/navbar/Navbar.jsx) (Navbar), [`src/pages/dashboard/payment/Payment.jsx`](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/payment/Payment.jsx) (Payment)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_public["Public SPA"]
  node_n_root_layout["Root shell<br/>layout<br/>[RootLayout.jsx]"]
  node_n_home["Home<br/>page<br/>[Home.jsx]"]
  node_n_send_parcel["Send parcel<br/>transaction<br/>[SendParcel.jsx]"]
  node_n_about["About us<br/>page<br/>[AboutUs.jsx]"]
  node_n_coverage["Coverage<br/>page<br/>[Coverage.jsx]"]
end

subgraph group_group_auth["Auth & Access"]
  node_n_auth_layout["Auth shell<br/>layout<br/>[AuthLayout.jsx]"]
  node_n_router["Router<br/>navigation<br/>[Router.jsx]"]
  node_n_private_route{{"Private guard<br/>route-guard<br/>[PrivateRoute.jsx]"}}
  node_n_admin_route{{"Admin guard<br/>route-guard<br/>[AdminRoute.jsx]"}}
  node_n_rider_route{{"Rider guard<br/>route-guard<br/>[RiderRoute.jsx]"}}
  node_n_auth_context[("Auth state<br/>context<br/>[AuthContext.jsx]")]
  node_n_auth_provider["Auth provider<br/>[AuthProvider.jsx]"]
  node_n_firebase["Firebase init<br/>auth-sdk<br/>[firebase.init.js]"]
  node_n_use_auth["useAuth<br/>hook<br/>[useAuth.jsx]"]
  node_n_use_role["useRole<br/>hook<br/>[useRole.jsx]"]
end

subgraph group_group_dashboard["Role Dashboards"]
  node_n_dash_layout["Dashboard shell<br/>layout"]
  node_n_my_parcels["My parcels<br/>customer dashboard<br/>[MyParcels.jsx]"]
  node_n_tracking["Tracking<br/>shipment view<br/>[Tracking.jsx]"]
  node_n_payment["Payment<br/>checkout<br/>[Payment.jsx]"]
  node_n_pay_success["Payment success<br/>return page<br/>[PaymentSuccess.jsx]"]
  node_n_pay_cancel["Payment cancel<br/>return page"]
  node_n_payment_history["Payment history<br/>ledger<br/>[PaymentHistory.jsx]"]
  node_n_rider_dashboard["Rider ops<br/>rider dashboard<br/>[RiderDashboard.jsx]"]
  node_n_rider_page["Rider page<br/>rider screen<br/>[Rider.jsx]"]
  node_n_all_parcels["All parcels<br/>admin console<br/>[AllParcels.jsx]"]
  node_n_pending_parcel["Pending parcels<br/>admin console<br/>[PendingParcel.jsx]"]
  node_n_user_manage["User manage<br/>admin console<br/>[UserManage.jsx]"]
end

subgraph group_group_shared["Shared UI"]
  node_n_main["App entry<br/>bootstrap<br/>[main.jsx]"]
  node_n_use_secure["useAxiosSecure<br/>api-client<br/>[useAxiosSecure.jsx]"]
  node_n_navbar["Navbar<br/>shared chrome<br/>[Navbar.jsx]"]
  node_n_sidebar["Sidebar<br/>shared chrome<br/>[Sidebar.jsx]"]
  node_n_footer["Footer<br/>shared chrome<br/>[Footer.jsx]"]
  node_n_loading(("Loading<br/>state<br/>[Loading.jsx]"))
  node_n_forbidden{{"Forbidden<br/>access error<br/>[Forbidden.jsx]"}}
end

subgraph group_group_data["Static Data"]
end

node_n_main -->|"boots"| node_n_router
node_n_router -->|"public shell"| node_n_root_layout
node_n_router -->|"auth shell"| node_n_auth_layout
node_n_router -->|"dashboard shell"| node_n_dash_layout
node_n_router -->|"gates"| node_n_private_route
node_n_router -->|"gates"| node_n_admin_route
node_n_router -->|"gates"| node_n_rider_route
node_n_auth_provider -->|"provides"| node_n_auth_context
node_n_auth_context -->|"reads"| node_n_use_auth
node_n_auth_context -->|"reads"| node_n_use_role
node_n_firebase -->|"auth backend"| node_n_auth_provider
node_n_use_secure -->|"tokens"| node_n_firebase
node_n_root_layout -->|"uses"| node_n_navbar
node_n_root_layout -->|"uses"| node_n_footer
node_n_dash_layout -->|"uses"| node_n_sidebar
node_n_dash_layout -->|"uses"| node_n_loading
node_n_private_route -->|"blocks"| node_n_forbidden
node_n_admin_route -->|"blocks"| node_n_forbidden
node_n_rider_route -->|"blocks"| node_n_forbidden
node_n_home -->|"uses"| node_n_navbar
node_n_home -->|"uses"| node_n_footer
node_n_send_parcel -->|"api"| node_n_use_secure
node_n_send_parcel -->|"state"| node_n_loading
node_n_my_parcels -->|"api"| node_n_use_secure
node_n_tracking -->|"api"| node_n_use_secure
node_n_payment -->|"api"| node_n_use_secure
node_n_payment -->|"redirect"| node_n_pay_success
node_n_payment -->|"redirect"| node_n_pay_cancel
node_n_payment_history -->|"api"| node_n_use_secure
node_n_rider_dashboard -->|"api"| node_n_use_secure
node_n_rider_page -->|"api"| node_n_use_secure
node_n_all_parcels -->|"api"| node_n_use_secure
node_n_pending_parcel -->|"api"| node_n_use_secure
node_n_user_manage -->|"api"| node_n_use_secure
node_n_navbar -->|"session"| node_n_use_auth
node_n_navbar -->|"role"| node_n_use_role
node_n_sidebar -->|"role"| node_n_use_role

click node_n_main "https://github.com/nahidruhan/spread-fast-client/blob/main/src/main.jsx"
click node_n_root_layout "https://github.com/nahidruhan/spread-fast-client/blob/main/src/layouts/RootLayout.jsx"
click node_n_auth_layout "https://github.com/nahidruhan/spread-fast-client/blob/main/src/layouts/AuthLayout.jsx"
click node_n_dash_layout "https://github.com/nahidruhan/spread-fast-client/blob/main/src/layouts/DashboardLayout.jsx"
click node_n_router "https://github.com/nahidruhan/spread-fast-client/blob/main/src/routes/Router.jsx"
click node_n_private_route "https://github.com/nahidruhan/spread-fast-client/blob/main/src/routes/PrivateRoute.jsx"
click node_n_admin_route "https://github.com/nahidruhan/spread-fast-client/blob/main/src/routes/AdminRoute.jsx"
click node_n_rider_route "https://github.com/nahidruhan/spread-fast-client/blob/main/src/routes/RiderRoute.jsx"
click node_n_auth_context "https://github.com/nahidruhan/spread-fast-client/blob/main/src/context/authcontext/AuthContext.jsx"
click node_n_auth_provider "https://github.com/nahidruhan/spread-fast-client/blob/main/src/context/authprovider/AuthProvider.jsx"
click node_n_firebase "https://github.com/nahidruhan/spread-fast-client/blob/main/src/firebase/firebase.init.js"
click node_n_use_auth "https://github.com/nahidruhan/spread-fast-client/blob/main/src/hooks/useAuth.jsx"
click node_n_use_role "https://github.com/nahidruhan/spread-fast-client/blob/main/src/hooks/useRole.jsx"
click node_n_use_secure "https://github.com/nahidruhan/spread-fast-client/blob/main/src/hooks/useAxiosSecure.jsx"
click node_n_home "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/home/home/Home.jsx"
click node_n_send_parcel "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/send-parcel/SendParcel.jsx"
click node_n_about "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/about-us/about-us/AboutUs.jsx"
click node_n_coverage "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/coverage/coverage/Coverage.jsx"
click node_n_my_parcels "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/my-parcels/MyParcels.jsx"
click node_n_tracking "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/my-parcels/Tracking.jsx"
click node_n_payment "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/payment/Payment.jsx"
click node_n_pay_success "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/payment/PaymentSuccess.jsx"
click node_n_pay_cancel "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/payment/PaymentCancelled.jsx"
click node_n_payment_history "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/payment-history/PaymentHistory.jsx"
click node_n_rider_dashboard "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/rider/RiderDashboard.jsx"
click node_n_rider_page "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/rider/rider/Rider.jsx"
click node_n_all_parcels "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/all-parcel/AllParcels.jsx"
click node_n_pending_parcel "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/pending-parcel/PendingParcel.jsx"
click node_n_user_manage "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/user-management/UserManage.jsx"
click node_n_navbar "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/shared/navbar/Navbar.jsx"
click node_n_sidebar "https://github.com/nahidruhan/spread-fast-client/blob/main/src/components/sidebar/Sidebar.jsx"
click node_n_footer "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/shared/footer/Footer.jsx"
click node_n_loading "https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/shared/loading/Loading.jsx"
click node_n_forbidden "https://github.com/nahidruhan/spread-fast-client/blob/main/src/components/forbidden/Forbidden.jsx"

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_n_root_layout,node_n_home,node_n_send_parcel,node_n_about,node_n_coverage toneBlue
class node_n_auth_layout,node_n_router,node_n_private_route,node_n_admin_route,node_n_rider_route,node_n_auth_context,node_n_auth_provider,node_n_firebase,node_n_use_auth,node_n_use_role toneAmber
class node_n_dash_layout,node_n_my_parcels,node_n_tracking,node_n_payment,node_n_pay_success,node_n_pay_cancel,node_n_payment_history,node_n_rider_dashboard,node_n_rider_page,node_n_all_parcels,node_n_pending_parcel,node_n_user_manage toneMint
class node_n_main,node_n_use_secure,node_n_navbar,node_n_sidebar,node_n_footer,node_n_loading,node_n_forbidden toneRose
```

## Components

### Public SPA

Marketing and customer-facing pages

- [Root shell](https://github.com/nahidruhan/spread-fast-client/blob/main/src/layouts/RootLayout.jsx): layout · Public-facing application shell · `src/layouts/RootLayout.jsx`
- [Home](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/home/home/Home.jsx): page · Marketing landing page · `src/pages/home/home/Home.jsx`
- [Send parcel](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/send-parcel/SendParcel.jsx): transaction · Customer parcel booking entry point · `src/pages/send-parcel/SendParcel.jsx`
- [About us](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/about-us/about-us/AboutUs.jsx): page · Company and service overview · `src/pages/about-us/about-us/AboutUs.jsx`
- [Coverage](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/coverage/coverage/Coverage.jsx): page · Service area and coverage discovery · `src/pages/coverage/coverage/Coverage.jsx`

### Auth & Access

Identity, route guards, and role resolution

- [Auth shell](https://github.com/nahidruhan/spread-fast-client/blob/main/src/layouts/AuthLayout.jsx): layout · Login and registration shell · `src/layouts/AuthLayout.jsx`
- [Router](https://github.com/nahidruhan/spread-fast-client/blob/main/src/routes/Router.jsx): navigation · Client route map and page composition · `src/routes/Router.jsx`
- [Private guard](https://github.com/nahidruhan/spread-fast-client/blob/main/src/routes/PrivateRoute.jsx): route-guard · Protects authenticated screens · `src/routes/PrivateRoute.jsx`
- [Admin guard](https://github.com/nahidruhan/spread-fast-client/blob/main/src/routes/AdminRoute.jsx): route-guard · Restricts admin-only screens · `src/routes/AdminRoute.jsx`
- [Rider guard](https://github.com/nahidruhan/spread-fast-client/blob/main/src/routes/RiderRoute.jsx): route-guard · Restricts rider-only screens · `src/routes/RiderRoute.jsx`
- [Auth state](https://github.com/nahidruhan/spread-fast-client/blob/main/src/context/authcontext/AuthContext.jsx): context · Central session and identity state · `src/context/authcontext/AuthContext.jsx`
- [Auth provider](https://github.com/nahidruhan/spread-fast-client/blob/main/src/context/authprovider/AuthProvider.jsx): provider · Supplies auth state to the app · `src/context/authprovider/AuthProvider.jsx`
- [Firebase init](https://github.com/nahidruhan/spread-fast-client/blob/main/src/firebase/firebase.init.js): auth-sdk · Firebase configuration and auth initialization · `src/firebase/firebase.init.js`
- [useAuth](https://github.com/nahidruhan/spread-fast-client/blob/main/src/hooks/useAuth.jsx): hook · Reads the current user/session · `src/hooks/useAuth.jsx`
- [useRole](https://github.com/nahidruhan/spread-fast-client/blob/main/src/hooks/useRole.jsx): hook · Resolves user role for gating and UI · `src/hooks/useRole.jsx`

### Role Dashboards

Authenticated customer, rider, and admin operations

- [Dashboard shell](https://github.com/nahidruhan/spread-fast-client/blob/main/src/layouts/DashboardLayout.jsx): layout · Authenticated dashboard shell · `src/layouts/DashboardLayout.jsx`
- [My parcels](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/my-parcels/MyParcels.jsx): customer dashboard · Customer parcel list and management · `src/pages/dashboard/my-parcels/MyParcels.jsx`
- [Tracking](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/my-parcels/Tracking.jsx): shipment view · Parcel tracking details · `src/pages/dashboard/my-parcels/Tracking.jsx`
- [Payment](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/payment/Payment.jsx): checkout · Payment flow for parcel orders · `src/pages/dashboard/payment/Payment.jsx`
- [Payment success](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/payment/PaymentSuccess.jsx): return page · Successful payment return screen · `src/pages/dashboard/payment/PaymentSuccess.jsx`
- [Payment cancel](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/payment/PaymentCancelled.jsx): return page · Cancelled payment return screen · `src/pages/dashboard/payment/PaymentCancelled.jsx`
- [Payment history](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/payment-history/PaymentHistory.jsx): ledger · Completed transaction records · `src/pages/dashboard/payment-history/PaymentHistory.jsx`
- [Rider ops](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/rider/RiderDashboard.jsx): rider dashboard · Rider work queue and delivery execution · `src/pages/dashboard/rider/RiderDashboard.jsx`
- [Rider page](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/rider/rider/Rider.jsx): rider screen · Rider-facing operational UI · `src/pages/rider/rider/Rider.jsx`
- [All parcels](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/all-parcel/AllParcels.jsx): admin console · Admin parcel oversight · `src/pages/dashboard/all-parcel/AllParcels.jsx`
- [Pending parcels](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/pending-parcel/PendingParcel.jsx): admin console · Admin review and approval queue · `src/pages/dashboard/pending-parcel/PendingParcel.jsx`
- [User manage](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/dashboard/user-management/UserManage.jsx): admin console · User moderation and role administration · `src/pages/dashboard/user-management/UserManage.jsx`

### Shared UI

Reusable chrome, states, and error surfaces

- [App entry](https://github.com/nahidruhan/spread-fast-client/blob/main/src/main.jsx): bootstrap · Vite/React bootstrap and global app wiring · `src/main.jsx`
- [useAxiosSecure](https://github.com/nahidruhan/spread-fast-client/blob/main/src/hooks/useAxiosSecure.jsx): api-client · Authenticated API access to backend services · `src/hooks/useAxiosSecure.jsx`
- [Navbar](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/shared/navbar/Navbar.jsx): shared chrome · Global navigation and account controls · `src/pages/shared/navbar/Navbar.jsx`
- [Sidebar](https://github.com/nahidruhan/spread-fast-client/blob/main/src/components/sidebar/Sidebar.jsx): shared chrome · Dashboard navigation shell · `src/components/sidebar/Sidebar.jsx`
- [Footer](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/shared/footer/Footer.jsx): shared chrome · Site footer · `src/pages/shared/footer/Footer.jsx`
- [Loading](https://github.com/nahidruhan/spread-fast-client/blob/main/src/pages/shared/loading/Loading.jsx): state · Shared async loading state · `src/pages/shared/loading/Loading.jsx`
- [Forbidden](https://github.com/nahidruhan/spread-fast-client/blob/main/src/components/forbidden/Forbidden.jsx): access error · Access denied screen · `src/components/forbidden/Forbidden.jsx`

## Connections

- App entry → Router: boots · Application entry mounts routed app
- Router → Root shell: public shell · Public pages render through the root layout
- Router → Auth shell: auth shell · Authentication pages render through the auth layout
- Router → Dashboard shell: dashboard shell · Protected pages render through the dashboard layout
- Router → Private guard: gates · Authenticated routes are wrapped by the private guard
- Router → Admin guard: gates · Admin routes are wrapped by the admin guard
- Router → Rider guard: gates · Rider routes are wrapped by the rider guard
- Auth provider → Auth state: provides · Auth provider supplies shared identity state
- Auth state → useAuth: reads · Hook exposes current session state
- Auth state → useRole: reads · Role hook derives authorization state
- Firebase init → Auth provider: auth backend · Firebase initialization supports sign-in and session handling
- useAxiosSecure → Firebase init: tokens · Secure API client relies on authenticated identity
- Root shell → Navbar: uses · Public shell includes global navigation
- Root shell → Footer: uses · Public shell includes footer
- Dashboard shell → Sidebar: uses · Dashboard shell includes sidebar navigation
- Dashboard shell → Loading: uses · Dashboard surfaces shared loading state
- Private guard → Forbidden: blocks · Unauthorized access routes to forbidden screen
- Admin guard → Forbidden: blocks · Admin-only access failures land on forbidden screen
- Rider guard → Forbidden: blocks · Rider-only access failures land on forbidden screen
- Home → Navbar: uses · Marketing pages share the top navigation
- Home → Footer: uses · Marketing pages share the footer
- Send parcel → useAxiosSecure: api · Parcel booking uses authenticated backend calls
- Send parcel → Loading: state · Booking flow uses shared loading feedback
- My parcels → useAxiosSecure: api · Customer parcel data comes from secure API calls
- Tracking → useAxiosSecure: api · Tracking reads parcel state from backend
- Payment → useAxiosSecure: api · Payment flow initiates backend-side checkout work
- Payment → Payment success: redirect · Successful payments return to confirmation page
- Payment → Payment cancel: redirect · Cancelled payments return to cancel page
- Payment history → useAxiosSecure: api · Payment history comes from backend records
- Rider ops → useAxiosSecure: api · Rider operations sync with backend dispatch data
- Rider page → useAxiosSecure: api · Rider screen uses secure dispatch endpoints
- All parcels → useAxiosSecure: api · Admin parcel oversight uses secure data access
- Pending parcels → useAxiosSecure: api · Pending review queue is backend-driven
- User manage → useAxiosSecure: api · User moderation uses secure admin endpoints
- Navbar → useAuth: session · Navbar reflects login state and user identity
- Navbar → useRole: role · Navbar adapts to user role
- Sidebar → useRole: role · Sidebar navigation varies by role