# shahadat-hossain99/bloodsync-client architecture

> Architecture diagram of the GitHub repository shahadat-hossain99/bloodsync-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/shahadat-hossain99/bloodsync-client
- Repository: https://github.com/shahadat-hossain99/bloodsync-client

## Overview

1. This is a Next.js App Router application, so the architecture is split around route segments in `src/app`, with page files defining routes and colocated client components handling interactivity. The top-level app shell is in `src/app/layout.js`, with global styles in `src/app/globals.css`.

2. The product domain is a blood-donation platform. The main user-facing surfaces are:
   - a public marketing/home area,
   - public donation request browsing and detail pages,
   - authentication pages,
   - a role-based dashboard for donors, volunteers, and admins,
   - supporting informational pages under `resources`.

3. The public/home subsystem is composed of reusable sections in `src/components/home` such as the hero/banner, “how it works”, “why choose us”, contact, and marquee/ticker widgets. These are assembled into the homepage and likely drive the main acquisition flow from awareness into registration or donation-request browsing.

4. The donation-request subsystem is one of the core data flows. It appears in both public and authenticated areas:
   - `src/app/donation-requests` for public listing/detail viewing,
   - `src/app/dashboard/create-donation-request` for creating requests,
   - `src/app/dashboard/my-donation-requests` for user-owned requests,
   - `src/app/dashboard/edit-donation-request/[id]` for editing,
   - `src/app/dashboard/all-blood-donation-request` for broader administrative/ops visibility.
   This suggests a shared underlying request model exposed through both public and dashboard experiences.

5. Authentication is a distinct boundary. The app has sign-in/register pages plus a catch-all auth API route at `src/app/api/auth/[...all]/route.js`. Supporting auth code lives in `src/lib/auth.js`, `src/lib/auth-client.js`, `src/lib/core/session.js`, and `src/lib/core/server.js`, with `src/context/AuthContext.jsx` likely propagating the current session/user through the client tree. The presence of `unauthorized`, `forbidden`, and role-specific dashboard layouts indicates authorization is enforced both in routing and UI composition.

6. The dashboard is role segmented. There is a shared dashboard shell in `src/app/dashboard/layout.jsx` plus role-specific sublayouts for `admin`, `donor`, and `volunteer`. Shared dashboard chrome is implemented in `src/components/dashboard/DashboardHeader.jsx` and `DashboardSidebar.jsx`, while individual dashboard pages handle role-specific views like profile, requests, and user management.

7. Data access is split between server-side action modules and client-friendly API wrappers. The `src/lib/action/*` files suggest server actions or server-only business logic for donations, requests, search, and users. In parallel, `src/lib/api/*` contains API-facing helpers for donation requests and users. This separation implies a backend boundary where pages and client components call into a thin data layer rather than embedding fetching logic directly.

8. Search is a dedicated subsystem (`src/app/search` plus `src/lib/action/search.action.js`). That implies cross-entity lookup over at least donation requests and/or users, and it likely feeds the discovery flow for public users and dashboard operators.

9. Geographic metadata is bundled locally in `public/geoInfo` with districts, divisions, and upazilas JSON files. The hook `src/hooks/useGeoData.js` probably loads and normalizes this data for forms such as registration, profile, or donation-request creation, making geography selection a client-side data dependency rather than a remote service call.

10. Shared UI and infrastructure components are centralized:
   - `src/components/shared/Navbar` and `Footer` for the public shell,
   - `src/components/Breadcrumb.jsx` and `src/components/seo/ClientMetadata.jsx` for navigation/metadata,
   - `src/lib/imageUpload.js` for upload handling,
   - `src/lib/marquee.js` for ticker content.
   This keeps presentation concerns separate from route-specific business logic.

11. The app also includes informational/legal pages under `src/app/resources` plus `privacy-policy`, `terms`, and `faq`, which are isolated content routes rather than part of the transactional dashboard flow.

12. Overall, the main architecture boundary is: public marketing and browsing on one side, authenticated role-based operations on the other, with shared domain services in `src/lib` and shared UI in `src/components`. The data model revolves around users, authentication/session state, donation requests, search, and location metadata.

Main entry points: [`src/app/dashboard/layout.jsx`](https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/app/dashboard/layout.jsx) (Dashboard shell), [`src/lib/action/donation.action.js`](https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/lib/action/donation.action.js) (Request services), [`src/app/page.js`](https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/app/page.js) (Home), [`src/lib/imageUpload.js`](https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/lib/imageUpload.js) (Media & geo)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App routes"]
  node_root["App shell<br/>next layout<br/>[layout.js]"]
  node_home["Home<br/>marketing route<br/>[page.js]"]
  node_auth_routes["Auth pages<br/>auth routes"]
  node_donation_public["Public requests<br/>listing route"]
  node_donation_detail["Request details<br/>detail route"]
  node_dashboard_shell["Dashboard shell<br/>dashboard layout<br/>[layout.jsx]"]
  node_dashboard_admin["Admin area<br/>role dashboard"]
  node_dashboard_donor["Donor area<br/>role dashboard"]
  node_dashboard_volunteer["Volunteer area<br/>role dashboard"]
  node_dashboard_requests["Request ops<br/>dashboard routes"]
  node_dashboard_profile["Profile<br/>dashboard route"]
  node_resources["Resources<br/>content routes"]
  node_search["Search<br/>discovery route"]
  node_funding["Funding<br/>public route"]
end

subgraph group_ui["Shared UI"]
  node_navbar["Navbar<br/>public chrome<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>public chrome<br/>[Footer.jsx]"]
  node_dashboard_ui["Dash chrome<br/>dashboard chrome"]
  node_home_sections["Home sections<br/>marketing components"]
end

subgraph group_domain["Domain services"]
  node_auth_core["Auth core<br/>auth/session<br/>[auth.js]"]
  node_request_services["Request services<br/>domain actions<br/>[donation.action.js]"]
  node_search_service["Search service<br/>domain action<br/>[search.action.js]"]
  node_user_services["User services<br/>domain actions<br/>[users.js]"]
  node_upload_geo["Media & geo<br/>support services<br/>[imageUpload.js]"]
end

subgraph group_data["Local data"]
  node_geo_data[("Geo JSON<br/>local data")]
end

node_root -->|"wraps"| node_navbar
node_root -->|"wraps"| node_footer
node_home -->|"assembles"| node_home_sections
node_home -->|"uses"| node_navbar
node_home -->|"uses"| node_footer
node_auth_routes -->|"uses"| node_auth_core
node_donation_public -->|"reads"| node_request_services
node_donation_detail -->|"reads"| node_request_services
node_dashboard_shell -->|"wraps"| node_dashboard_ui
node_dashboard_admin -->|"extends"| node_dashboard_shell
node_dashboard_donor -->|"extends"| node_dashboard_shell
node_dashboard_volunteer -->|"extends"| node_dashboard_shell
node_dashboard_requests -->|"writes"| node_request_services
node_dashboard_profile -->|"reads"| node_user_services
node_dashboard_profile -->|"uses"| node_upload_geo
node_search -->|"drives"| node_search_service
node_resources -->|"shares"| node_footer
node_funding -->|"uses"| node_navbar
node_request_services -.->|"relates to"| node_user_services
node_auth_core -.->|"supplies identity"| node_user_services
node_upload_geo -->|"loads"| node_geo_data
node_dashboard_requests -.->|"uses"| node_upload_geo
node_auth_routes -.->|"guards"| node_dashboard_shell
node_search_service -.->|"queries"| node_request_services

click node_root "https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/app/layout.js"
click node_home "https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/app/page.js"
click node_auth_routes "https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/auth"
click node_donation_public "https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/donation-requests"
click node_donation_detail "https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/donation-requests/[id]"
click node_dashboard_shell "https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/app/dashboard/layout.jsx"
click node_dashboard_admin "https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/dashboard/admin"
click node_dashboard_donor "https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/dashboard/donor"
click node_dashboard_volunteer "https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/dashboard/volunteer"
click node_dashboard_requests "https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/dashboard/create-donation-request"
click node_dashboard_profile "https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/dashboard/profile"
click node_resources "https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/resources"
click node_search "https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/search"
click node_funding "https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/funding"
click node_navbar "https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/components/shared/Navbar/Navbar.jsx"
click node_footer "https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/components/shared/Footer/Footer.jsx"
click node_dashboard_ui "https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/components/dashboard/DashboardHeader.jsx"
click node_home_sections "https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/components/home"
click node_auth_core "https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/lib/auth.js"
click node_request_services "https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/lib/action/donation.action.js"
click node_search_service "https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/lib/action/search.action.js"
click node_user_services "https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/lib/action/users.js"
click node_upload_geo "https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/lib/imageUpload.js"
click node_geo_data "https://github.com/shahadat-hossain99/bloodsync-client/tree/main/public/geoInfo"

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_root,node_home,node_auth_routes,node_donation_public,node_donation_detail,node_dashboard_shell,node_dashboard_admin,node_dashboard_donor,node_dashboard_volunteer,node_dashboard_requests,node_dashboard_profile,node_resources,node_search,node_funding toneBlue
class node_navbar,node_footer,node_dashboard_ui,node_home_sections toneAmber
class node_auth_core,node_request_services,node_search_service,node_user_services,node_upload_geo toneMint
class node_geo_data toneRose
```

## Components

### App routes

Next.js App Router surfaces and route segments

- [App shell](https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/app/layout.js): next layout · Global app wrapper and route chrome · `src/app/layout.js`
- [Home](https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/app/page.js): marketing route · Public landing page and acquisition entry · `src/app/page.js`
- [Auth pages](https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/auth): auth routes · Sign-in and registration screens · `src/app/auth`
- [Public requests](https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/donation-requests): listing route · Browse public donation requests · `src/app/donation-requests`
- [Request details](https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/donation-requests/[id]): detail route · Public donation request detail view · `src/app/donation-requests/[id]`
- [Dashboard shell](https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/app/dashboard/layout.jsx): dashboard layout · Shared authenticated dashboard frame · `src/app/dashboard/layout.jsx`
- [Admin area](https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/dashboard/admin): role dashboard · Admin-specific dashboard segment · `src/app/dashboard/admin`
- [Donor area](https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/dashboard/donor): role dashboard · Donor-specific dashboard segment · `src/app/dashboard/donor`
- [Volunteer area](https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/dashboard/volunteer): role dashboard · Volunteer-specific dashboard segment · `src/app/dashboard/volunteer`
- [Request ops](https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/dashboard/create-donation-request): dashboard routes · Create, edit, and manage donation requests · `src/app/dashboard/create-donation-request`
- [Profile](https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/dashboard/profile): dashboard route · User profile and account view · `src/app/dashboard/profile`
- [Resources](https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/resources): content routes · Informational and legal pages · `src/app/resources`
- [Search](https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/search): discovery route · Cross-entity search surface · `src/app/search`
- [Funding](https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/app/funding): public route · Public funding/donation support page · `src/app/funding`

### Shared UI

Reusable presentation components across routes

- [Navbar](https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/components/shared/Navbar/Navbar.jsx): public chrome · Top-level navigation and user menu · `src/components/shared/Navbar/Navbar.jsx`
- [Footer](https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/components/shared/Footer/Footer.jsx): public chrome · Site-wide footer content · `src/components/shared/Footer/Footer.jsx`
- [Dash chrome](https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/components/dashboard/DashboardHeader.jsx): dashboard chrome · Dashboard header and sidebar navigation · `src/components/dashboard/DashboardHeader.jsx`
- [Home sections](https://github.com/shahadat-hossain99/bloodsync-client/tree/main/src/components/home): marketing components · Hero, benefits, how-it-works, contact, ticker widgets · `src/components/home`

### Domain services

Client/server helpers and cross-cutting business logic

- [Auth core](https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/lib/auth.js): auth/session · Auth client, session, and server helpers · `src/lib/auth.js`
- [Request services](https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/lib/action/donation.action.js): domain actions · Donation request business logic and API helpers · `src/lib/action/donation.action.js`
- [Search service](https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/lib/action/search.action.js): domain action · Search logic over app entities · `src/lib/action/search.action.js`
- [User services](https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/lib/action/users.js): domain actions · User-facing data access and profile helpers · `src/lib/action/users.js`
- [Media & geo](https://github.com/shahadat-hossain99/bloodsync-client/blob/main/src/lib/imageUpload.js): support services · Image upload helpers and local geographic metadata · `src/lib/imageUpload.js`

### Local data

Bundled geographic reference data

- [Geo JSON](https://github.com/shahadat-hossain99/bloodsync-client/tree/main/public/geoInfo): local data · District, division, and upazila reference data · `public/geoInfo`

## Connections

- App shell → Navbar: wraps · Global shell renders shared public navigation
- App shell → Footer: wraps · Global shell renders shared footer
- Home → Home sections: assembles · Homepage is composed from reusable marketing sections
- Home → Navbar: uses · Home page shares public navigation
- Home → Footer: uses · Home page shares public footer
- Auth pages → Auth core: uses · Sign-in and registration rely on auth/session helpers
- Public requests → Request services: reads · Public listings are backed by request data services
- Request details → Request services: reads · Detail pages load a single donation request
- Dashboard shell → Dash chrome: wraps · Authenticated dashboard uses shared chrome
- Admin area → Dashboard shell: extends · Admin segment sits under the shared dashboard layout
- Donor area → Dashboard shell: extends · Donor segment sits under the shared dashboard layout
- Volunteer area → Dashboard shell: extends · Volunteer segment sits under the shared dashboard layout
- Request ops → Request services: writes · Create/edit/manage request screens call request actions
- Profile → User services: reads · Profile view uses user data services
- Profile → Media & geo: uses · Profile forms may use upload and location helpers
- Search → Search service: drives · Search page is powered by dedicated search logic
- Resources → Footer: shares · Informational pages use shared site footer
- Funding → Navbar: uses · Funding page shares public navigation
- Request services → User services: relates to · Request workflows connect to user ownership and profile data
- Auth core → User services: supplies identity · Session state feeds user-aware operations
- Media & geo → Geo JSON: loads · Client hooks normalize bundled geography JSON
- Request ops → Media & geo: uses · Request forms rely on media and location support
- Auth pages → Dashboard shell: guards · Authenticated areas depend on role-based access
- Search service → Request services: queries · Search likely spans donation request records