muntasir-wsx/dakbox-client

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.