# tanjiyajuthi/bibliodrop architecture

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

- Interactive diagram: https://gitdiagram.com/tanjiyajuthi/bibliodrop
- Repository: https://github.com/tanjiyajuthi/bibliodrop

## Overview

1. This is a Next.js App Router application organized around a public marketing/browsing site plus role-based dashboards. The main architectural boundary is between:
   - public/auth pages,
   - main customer-facing pages,
   - authenticated dashboards for different roles,
   - API routes for auth and user management.

2. The top-level app shell lives in `src/app/layout.js`, with global styling in `src/app/globals.css` and an app-level loading state in `src/app/loading.js`. Route grouping is used heavily to keep the UI segmented without changing URLs:
   - `src/app/(auth)` for sign-in/sign-up flows,
   - `src/app/(main)` for the public site,
   - `src/app/dashboard` for authenticated role-specific areas.

3. Authentication is handled through a dedicated API surface at `src/app/api/auth/[...all]/route.js`, which is the central backend entry point for auth-related requests. Client/server auth helpers are split into `src/lib/auth-client.js` and `src/lib/auth.js`, indicating a clear separation between browser-side auth usage and server-side auth logic.

4. User role management is a separate concern from authentication itself. The route `src/app/api/user/role/route.js` suggests the application assigns or updates roles independently, which then drives access control and dashboard routing. This is reinforced by the presence of a `/choose-role` page in the main area.

5. The public-facing site is under `src/app/(main)` and includes pages for books, categories, contact, and role selection. The main landing page is `src/app/(main)/page.js`, while detail pages live under dynamic routes such as:
   - `books/[id]`
   - `categories/[id]`
   This indicates the app supports list/detail browsing for content entities.

6. The public UI is composed from reusable presentation components in `src/components/home` and `src/components`. Notable shared components include:
   - navigation and footer elements,
   - book cards,
   - featured content,
   - top categories,
   - rating and review UI.
   These components likely feed both the public pages and authenticated views, keeping display logic reusable.

7. There is a clear dashboard subsystem with a shared shell at `src/app/dashboard/DashboardShell.jsx`, plus shared navigation components in `src/components/dashbaord` (top nav and side nav). This shell likely provides the common layout and auth-aware navigation for all dashboard roles.

8. The dashboard is split by role into three main branches:
   - `dashboard/admin` for administrative management,
   - `dashboard/librarian` for operational/catalog actions,
   - `dashboard/reader` for end-user self-service features.
   Each role has its own page hierarchy and separate navigation surface, which is a strong sign that access control and UX differ materially by role.

9. Within the admin dashboard, the app includes management areas for analytics, books, categories, roles, users, and transactions, plus an admin profile page. This suggests the admin role is responsible for overseeing both catalog data and system-level entities, and likely for reviewing operational/payment records.

10. The librarian dashboard focuses on book operations and fulfillment-oriented flows. It contains pages for:
   - adding/editing books,
   - delivery,
   - wish list,
   - profile.
   This points to a workflow-centered role that manages inventory/content and handles items moving through a process.

11. The reader dashboard is centered on personal library activity. It includes:
   - books,
   - reading list,
   - wish list,
   - reviews,
   - delivery,
   - profile.
   The presence of reviews, reading list, and delivery pages suggests the app is not just a catalog, but supports user-specific engagement and post-interaction workflows.

12. A dedicated `src/app/payment-success/page.jsx` page indicates the system has at least one transactional step with a post-payment redirect/confirmation state. Combined with the admin transactions page, this implies a flow that crosses from public/user interaction into backend transaction tracking.

13. Utility and integration code is concentrated in `src/lib/helper`, including generic helpers and an image upload helper (`imbb.js`). That separation suggests external media handling is abstracted out of the UI pages, likely to support book/category asset management across dashboards.

14. Overall, the architecture is a role-based Next.js monolith with:
   - route-level segmentation for public, auth, and dashboard areas,
   - reusable shared UI components,
   - a small set of API routes for auth and role updates,
   - centralized auth utilities,
   - role-specific dashboards that appear to govern catalog, user, and transactional workflows.

Main entry points: [`src/app/dashboard`](https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/dashboard) (Dashboard hub), [`src/app/(main)`](https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/(main)) (Public site), [`src/app/dashboard/admin`](https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/dashboard/admin) (Admin), [`src/app/dashboard/librarian`](https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/dashboard/librarian) (Librarian)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App Router"]
  node_app_shell["App shell<br/>next root layout<br/>[layout.js]"]
  node_main_site["Public site<br/>route group"]
  node_auth_flows["Auth flows<br/>route group"]
  node_payment_success["Payment success<br/>transaction page<br/>[page.jsx]"]
  node_public_content["Books & categories<br/>content routes"]
end

subgraph group_dash["Dashboards"]
  node_dashboard_root["Dashboard hub<br/>route base"]
  node_admin_dash["Admin<br/>role dashboard"]
  node_librarian_dash["Librarian<br/>role dashboard"]
  node_reader_dash["Reader<br/>role dashboard"]
end

subgraph group_ui["Shared UI"]
  node_home_ui["Home UI<br/>shared components"]
  node_shared_ui["Shared components<br/>presentational components"]
  node_dash_ui["Dashboard UI<br/>layout components"]
end

subgraph group_lib["Libraries"]
  node_auth_client["Auth client<br/>browser auth<br/>[auth-client.js]"]
  node_auth_server["Auth server<br/>server auth<br/>[auth.js]"]
  node_helpers["Helpers<br/>utility library<br/>[helper.js]"]
  node_image_upload["Image upload<br/>integration helper<br/>[imbb.js]"]
end

subgraph group_api["API Routes"]
  node_auth_api["Auth API<br/>api route<br/>[route.js]"]
  node_role_api["Role API<br/>api route<br/>[route.js]"]
end

node_app_shell -->|"hosts"| node_main_site
node_app_shell -->|"hosts"| node_auth_flows
node_app_shell -->|"hosts"| node_dashboard_root
node_main_site -->|"routes"| node_public_content
node_main_site -->|"uses"| node_home_ui
node_main_site -->|"uses"| node_shared_ui
node_auth_flows -->|"uses"| node_auth_client
node_dashboard_root -->|"splits into"| node_admin_dash
node_dashboard_root -->|"splits into"| node_librarian_dash
node_dashboard_root -->|"splits into"| node_reader_dash
node_dashboard_root -->|"uses"| node_dash_ui
node_admin_dash -->|"uses"| node_dash_ui
node_librarian_dash -->|"uses"| node_dash_ui
node_reader_dash -->|"uses"| node_dash_ui
node_auth_api -->|"backed by"| node_auth_server
node_role_api -->|"auth-aware"| node_auth_server
node_dashboard_root -->|"consumes"| node_role_api
node_main_site -->|"feeds"| node_role_api
node_payment_success -->|"completes flow"| node_dashboard_root
node_admin_dash -->|"uses"| node_helpers
node_librarian_dash -->|"uses"| node_helpers
node_reader_dash -->|"uses"| node_helpers
node_admin_dash -->|"uses"| node_image_upload
node_librarian_dash -->|"uses"| node_image_upload
node_shared_ui -->|"uses"| node_helpers
node_home_ui -->|"extends"| node_shared_ui

click node_app_shell "https://github.com/tanjiyajuthi/bibliodrop/blob/main/src/app/layout.js"
click node_main_site "https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/(main)"
click node_auth_flows "https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/(auth)"
click node_dashboard_root "https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/dashboard"
click node_admin_dash "https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/dashboard/admin"
click node_librarian_dash "https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/dashboard/librarian"
click node_reader_dash "https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/dashboard/reader"
click node_auth_api "https://github.com/tanjiyajuthi/bibliodrop/blob/main/src/app/api/auth/[...all]/route.js"
click node_role_api "https://github.com/tanjiyajuthi/bibliodrop/blob/main/src/app/api/user/role/route.js"
click node_auth_client "https://github.com/tanjiyajuthi/bibliodrop/blob/main/src/lib/auth-client.js"
click node_auth_server "https://github.com/tanjiyajuthi/bibliodrop/blob/main/src/lib/auth.js"
click node_helpers "https://github.com/tanjiyajuthi/bibliodrop/blob/main/src/lib/helper/helper.js"
click node_image_upload "https://github.com/tanjiyajuthi/bibliodrop/blob/main/src/lib/helper/image uploader/imbb.js"
click node_home_ui "https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/components/home"
click node_shared_ui "https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/components"
click node_dash_ui "https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/components/dashbaord"
click node_payment_success "https://github.com/tanjiyajuthi/bibliodrop/blob/main/src/app/payment-success/page.jsx"
click node_public_content "https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/(main)/books"

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_app_shell,node_main_site,node_auth_flows,node_payment_success,node_public_content toneBlue
class node_dashboard_root,node_admin_dash,node_librarian_dash,node_reader_dash toneAmber
class node_home_ui,node_shared_ui,node_dash_ui toneMint
class node_auth_client,node_auth_server,node_helpers,node_image_upload toneRose
class node_auth_api,node_role_api toneIndigo
```

## Components

### App Router

Route groups and top-level app shell

- [App shell](https://github.com/tanjiyajuthi/bibliodrop/blob/main/src/app/layout.js): next root layout · Global layout, loading, and styles for the application · `src/app/layout.js`
- [Public site](https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/(main)): route group · Marketing and browsing experience · `src/app/(main)`
- [Auth flows](https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/(auth)): route group · Sign-in and sign-up pages · `src/app/(auth)`
- [Payment success](https://github.com/tanjiyajuthi/bibliodrop/blob/main/src/app/payment-success/page.jsx): transaction page · Post-payment confirmation page · `src/app/payment-success/page.jsx`
- [Books & categories](https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/(main)/books): content routes · Public list and detail browsing for books and categories · `src/app/(main)/books`

### Dashboards

Role-based authenticated areas

- [Dashboard hub](https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/dashboard): route base · Authenticated area entry and shared shell · `src/app/dashboard`
- [Admin](https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/dashboard/admin): role dashboard · System management for catalog, users, roles, and transactions · `src/app/dashboard/admin`
- [Librarian](https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/dashboard/librarian): role dashboard · Catalog operations and fulfillment workflows · `src/app/dashboard/librarian`
- [Reader](https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/app/dashboard/reader): role dashboard · Personal library and engagement features · `src/app/dashboard/reader`

### Shared UI

Reusable presentation components

- [Home UI](https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/components/home): shared components · Public-facing UI components such as hero, featured content, and categories · `src/components/home`
- [Shared components](https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/components): presentational components · Common navigation, content cards, ratings, reviews, and empty states · `src/components`
- [Dashboard UI](https://github.com/tanjiyajuthi/bibliodrop/tree/main/src/components/dashbaord): layout components · Shared dashboard navigation and shell pieces · `src/components/dashbaord`

### Libraries

Auth and helper code

- [Auth client](https://github.com/tanjiyajuthi/bibliodrop/blob/main/src/lib/auth-client.js): browser auth · Client-side auth helpers · `src/lib/auth-client.js`
- [Auth server](https://github.com/tanjiyajuthi/bibliodrop/blob/main/src/lib/auth.js): server auth · Server-side auth logic and integration · `src/lib/auth.js`
- [Helpers](https://github.com/tanjiyajuthi/bibliodrop/blob/main/src/lib/helper/helper.js): utility library · Shared utilities for app and dashboard flows · `src/lib/helper/helper.js`
- [Image upload](https://github.com/tanjiyajuthi/bibliodrop/blob/HEAD/src/lib/helper/image%20uploader/imbb.js): integration helper · External media upload helper · `src/lib/helper/image uploader/imbb.js`

### API Routes

Backend endpoints

- [Auth API](https://github.com/tanjiyajuthi/bibliodrop/blob/main/src/app/api/auth/[...all]/route.js): api route · Central backend entry point for authentication requests · `src/app/api/auth/[...all]/route.js`
- [Role API](https://github.com/tanjiyajuthi/bibliodrop/blob/main/src/app/api/user/role/route.js): api route · Assigns or updates user roles · `src/app/api/user/role/route.js`

## Connections

- App shell → Public site: hosts · Global layout wraps the public site
- App shell → Auth flows: hosts · Global layout wraps sign-in and sign-up
- App shell → Dashboard hub: hosts · Global layout wraps authenticated dashboard areas
- Public site → Books & categories: routes · Public site exposes browsing pages for books and categories
- Public site → Home UI: uses · Public pages are built from shared home components
- Public site → Shared components: uses · Public pages reuse common UI components
- Auth flows → Auth client: uses · Auth pages depend on browser-side auth helpers
- Dashboard hub → Admin: splits into · Dashboard routes branch by role
- Dashboard hub → Librarian: splits into · Dashboard routes branch by role
- Dashboard hub → Reader: splits into · Dashboard routes branch by role
- Dashboard hub → Dashboard UI: uses · Shared dashboard shell and navigation
- Admin → Dashboard UI: uses · Admin views use shared dashboard chrome
- Librarian → Dashboard UI: uses · Librarian views use shared dashboard chrome
- Reader → Dashboard UI: uses · Reader views use shared dashboard chrome
- Auth API → Auth server: backed by · Auth route delegates to server auth logic
- Role API → Auth server: auth-aware · Role updates rely on authenticated server context
- Dashboard hub → Role API: consumes · Role changes affect dashboard access and routing
- Public site → Role API: feeds · Role selection page updates user role
- Payment success → Dashboard hub: completes flow · Payment confirmation connects back into authenticated experience
- Admin → Helpers: uses · Admin workflows share utility logic
- Librarian → Helpers: uses · Operational workflows share utility logic
- Reader → Helpers: uses · User workflows share utility logic
- Admin → Image upload: uses · Catalog management likely uploads cover images
- Librarian → Image upload: uses · Book management likely uploads media
- Shared components → Helpers: uses · Shared UI components rely on common helpers
- Home UI → Shared components: extends · Home components compose shared presentation pieces