How abdullahalsahaf/bonnabondhu works
1. System shape
- This repository is a two-tier full-stack app: a React/Vite frontend in client/ and an Express/Node backend in server/.
- The backend exposes REST endpoints, while the frontend is a single-page application that consumes those endpoints through Axios.
2. Primary runtime boundaries
- server/server.js is the backend entry point and mounts domain routes plus middleware.
- client/src/main.jsx boots the React app, and client/src/App.jsx coordinates page-level routing/layout.
- The app is deployed as a Render web service, with render.yaml defining the deployment path.
3. Frontend shell and navigation
- The UI is organized around a shared application frame in client/src/components/:
- Layout.jsx for overall page structure
- Navbar.jsx and Sidebar.jsx for navigation
- Modal.jsx, Toast.jsx, and StatCard.jsx for common interaction and display patterns
- These components wrap the functional pages so the app behaves like a dashboard rather than a collection of isolated screens.
4. Frontend feature pages
- client/src/pages/ contains the main functional areas:
- Dashboard.jsx for summary status
- Analytics.jsx for chart-based reporting
- Areas.jsx for affected-area CRUD/search
- Priority.jsx for urgency-driven relief handling
- Trucks.jsx for queue-based truck dispatch
- RouteOptimizer.jsx for map-based shortest-path planning
- Login.jsx for authentication
- These pages represent the main user workflows and map directly to backend domains.
5. Client-side state and API access
- client/src/context/AuthContext.jsx manages login state and role/session persistence on the frontend.
- client/src/services/api.js is the shared HTTP boundary for all backend calls, centralizing API access from the pages.
- This creates a clean separation between presentation, user session state, and server communication.
6. Authentication boundary
- Authentication is handled on the backend by server/routes/auth.js and protected by server/middleware/auth.js.
- The README indicates JWT-based auth with role separation for admin and volunteer users.
- This means the architecture has a clear trust boundary: the frontend can initiate login, but authorization is enforced server-side.
7. Domain API modules
- The backend is split into route modules by domain:
- routes/areas.js
- routes/trucks.js
- routes/dispatch.js
- routes/routeOptimizer.js
- routes/analytics.js
- This keeps each feature area isolated and makes the API surface align with the business concepts in the UI.
8. Core in-memory data structures
- The most important architectural characteristic is that the backend stores and processes operational data in memory using custom services in server/services/:
- GraphService.js
- BSTService.js
- MaxHeapService.js
- TruckQueueService.js
- This mirrors the original C++ project’s data-structure-focused design rather than using a database.
9. Operational data flows
- Flood/area records flow through the BST service, which supports sorted traversal, search, add, and delete operations.
- Relief dispatch flow uses the max-heap service to prioritize requests by urgency-related criteria.
- Truck operations use the queue service to preserve FIFO ordering.
- Route planning uses the graph service for weighted shortest-path calculation.
10. Route optimization subsystem
- routes/routeOptimizer.js exposes shortest-path lookup between locations.
- GraphService.js backs this with a weighted graph and Dijkstra-style pathfinding.
- The frontend RouteOptimizer.jsx pairs this with the map UI, so the user sees geographic routing results rather than just raw distances.
11. Analytics and dashboard aggregation
- routes/analytics.js provides backend summaries for charts and dashboard metrics.
- The dashboard and analytics pages consume these aggregates to render operational status, urgency breakdowns, and regional statistics.
- This layer is read-oriented and sits above the underlying data-structure services.
12. Seeded, ephemeral backend state
- server/data/seedData.js provides initial application data.
- Because the project is intentionally in-memory, the backend state is lightweight and resets with process restart unless re-seeded.
- That makes the application architecture simple to run, but also means the server process is the primary state container.
13. External libraries that materially affect architecture
- The frontend uses React + Vite for the SPA shell, Tailwind CSS for styling, Leaflet for map interactions, and Chart.js for analytics visualization.
- The backend is built on Node.js + Express with JWT for auth.
- Axios is the client-to-server transport layer.
14. Diagramming takeaway
- The cleanest architecture diagram is: browser SPA on the left, Express API in the middle, and four in-memory domain services underneath the API.
- The main cross-cutting flow is auth/token issuance, then role-aware requests from the frontend into domain-specific routes, which delegate to the appropriate data-structure service and return operational views back to the UI.
Main entry points: App.jsx App Shell · server.js Server · Layout.jsx Layout · analytics.js Analytics Routes
Components 28
Client SPA
React/Vite frontend and user-facing workflows
- Main · Bootstraps the React application
client/src/main.jsx - App Shell · Top-level app composition and routing
client/src/App.jsx - Layout · Shared page structure and navigation frame
client/src/components/Layout.jsx - Navbar · Top navigation controls
client/src/components/Navbar.jsx - Sidebar · Primary dashboard navigation
client/src/components/Sidebar.jsx - Auth State · Login state and role/session persistence
client/src/context/AuthContext.jsx - API Client · Shared Axios boundary for backend calls
client/src/services/api.js - Dashboard · Operational summary and status overview
client/src/pages/Dashboard.jsx - Analytics · Charts and reporting view
client/src/pages/Analytics.jsx - Areas · Affected-area CRUD and search
client/src/pages/Areas.jsx - Priority · Urgency-driven relief handling
client/src/pages/Priority.jsx - Trucks · Queue-based truck dispatch view
client/src/pages/Trucks.jsx - Route Optimizer · Map-based shortest-path planning
client/src/pages/RouteOptimizer.jsx - Login · Authentication entry screen
client/src/pages/Login.jsx
API Server
Express backend, auth, routes, and in-memory services
- Server · Express application bootstrap and route mounting
server/server.js - Auth Routes · Login and token issuance endpoints
server/routes/auth.js - Auth Middleware · Protected-route and role enforcement
server/middleware/auth.js - Areas Routes · Area management API
server/routes/areas.js - Trucks Routes · Truck workflow API
server/routes/trucks.js - Dispatch Routes · Priority dispatch API
server/routes/dispatch.js - Route API · Shortest-path lookup API
server/routes/routeOptimizer.js - Analytics Routes · Summary and dashboard metrics API
server/routes/analytics.js - BST Service · Sorted area records and search operations
server/services/BSTService.js - Max Heap · Urgency-prioritized relief requests
server/services/MaxHeapService.js - Truck Queue · FIFO truck dispatch ordering
server/services/TruckQueueService.js - Graph Service · Weighted shortest-path planning
server/services/GraphService.js - Seed Data · Initial in-memory application records
server/data/seedData.js
Deployment
Render deployment configuration
- Render Config · Web service deployment definition
render.yaml
Connections 30
- Main → App Shell: boots · Initializes the SPA
- App Shell → Layout: wraps · Composes the shared dashboard frame
- Layout → Navbar: includes · Renders top navigation
- Layout → Sidebar: includes · Renders sidebar navigation
- App Shell → Auth State: uses · Provides session state to pages
- App Shell → API Client: calls · Uses shared HTTP client for server access
- App Shell → Login: routes to · Authentication entry view
- App Shell → Dashboard: routes to · Dashboard workflow
- App Shell → Analytics: routes to · Analytics workflow
- App Shell → Areas: routes to · Area management workflow
- App Shell → Priority: routes to · Priority relief workflow
- App Shell → Trucks: routes to · Truck dispatch workflow
- App Shell → Route Optimizer: routes to · Route planning workflow
- API Client → Server: http · Frontend API requests reach the backend
- Login → Auth Routes: auth · Submits credentials and receives token
- Server → Auth Routes: mounts · Registers authentication endpoints
- Server → Areas Routes: mounts · Registers area endpoints
- Server → Trucks Routes: mounts · Registers truck endpoints
- Server → Dispatch Routes: mounts · Registers dispatch endpoints
- Server → Route API: mounts · Registers route-optimization endpoints
- Server → Analytics Routes: mounts · Registers analytics endpoints
- Auth Routes → Auth Middleware: guards · Authorization checks protect server operations
- Areas Routes → BST Service: delegates · Area CRUD/search uses the BST service
- Dispatch Routes → Max Heap: delegates · Priority relief requests use the heap service
- Trucks Routes → Truck Queue: delegates · Truck dispatch uses FIFO queue ordering
- Route API → Graph Service: delegates · Route lookup uses weighted graph pathfinding
- Analytics Routes → BST Service: reads · Analytics summarize area records
- Analytics Routes → Max Heap: reads · Analytics summarize priority demand
- Server → Seed Data: loads · Bootstraps in-memory state from seed records
- Render Config → Server: deploys · Render starts the backend service