# gambirbuilds/bookvault architecture

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

- Interactive diagram: https://gitdiagram.com/gambirbuilds/bookvault
- Repository: https://github.com/gambirbuilds/bookvault

## Overview

BookVault is a client-side book discovery and reading-tracker application. Readers browse or search a curated catalog, open book details and authorized access links, then manage favorites, reading lists, and progress in a persistent personal library. The graph includes catalog, author/category discovery, recommendations, and reading-goal capabilities documented by the README. Some page and utility implementations were not excerpted; their documented features are included, but uncertain internal links are omitted.

Main entry points: [`src/data/books.js`](https://github.com/gambirbuilds/bookvault/blob/main/src/data/books.js) (Combined book catalog), [`src/App.tsx`](https://github.com/gambirbuilds/bookvault/blob/main/src/App.tsx) (Routed app shell), [`src/pages/BookDetails.jsx`](https://github.com/gambirbuilds/bookvault/blob/main/src/pages/BookDetails.jsx) (Book details and access), [`src/pages/Books.jsx`](https://github.com/gambirbuilds/bookvault/blob/main/src/pages/Books.jsx) (Book search and browse)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_app["Routed app shell<br/>[App.tsx]"]
  node_book_cards["Book cards and grid<br/>[BookCard.jsx]"]
  node_access_badge["Access classification"]
end

subgraph group_discovery["Discovery"]
  node_home["Home discovery<br/>[Home.jsx]"]
  node_book_browse["Book search and browse<br/>[Books.jsx]"]
  node_book_detail["Book details and access<br/>[BookDetails.jsx]"]
  node_category_browse["Category discovery<br/>[Categories.jsx]"]
  node_author_browse["Author discovery<br/>[Authors.jsx]"]
  node_global_search["Global search"]
  node_search_bar["Search suggestions<br/>[SearchBar.jsx]"]
  node_filter_logic["Filtering and sorting<br/>[filters.js]"]
  node_recommendations["Recommendations<br/>[recommendations.js]"]
end

subgraph group_catalog["Catalog data"]
  node_catalog["Combined book catalog<br/>[books.js]"]
  node_book_collections["Disciplinary book collections"]
  node_categories_data["Category metadata<br/>[categories.js]"]
  node_author_data["Author biographies<br/>[authors.js]"]
  node_quotes_data["Literary quotes<br/>[quotes.js]"]
end

subgraph group_reading["Reading library"]
  node_my_library["Personal library dashboard<br/>[MyLibrary.jsx]"]
  node_library_state["Library state and actions<br/>[LibraryContext.jsx]"]
  node_reading_progress["Progress controls"]
  node_local_storage[("Browser persistence<br/>[storage.js]")]
end

subgraph group_shared["Shared services"]
end

node_reader(("Reader"))

node_reader -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_book_browse
node_app -->|"routes to"| node_book_detail
node_app -->|"routes to"| node_category_browse
node_app -->|"routes to"| node_author_browse
node_app -->|"routes to"| node_my_library
node_reader -->|"searches and filters"| node_book_browse
node_reader -->|"searches"| node_global_search
node_reader -->|"explores"| node_category_browse
node_reader -->|"explores"| node_author_browse
node_home -->|"selects books"| node_catalog
node_home -->|"uses categories"| node_categories_data
node_home -->|"uses quotes"| node_quotes_data
node_home -->|"renders"| node_book_cards
node_book_browse -->|"browses"| node_catalog
node_book_browse -->|"filters and sorts"| node_filter_logic
node_book_browse -->|"renders"| node_search_bar
node_book_browse -->|"renders results"| node_book_cards
node_search_bar -->|"suggests from"| node_catalog
node_search_bar -->|"gets suggestions"| node_filter_logic
node_global_search -->|"searches books"| node_catalog
node_global_search -->|"searches categories"| node_categories_data
node_category_browse -->|"uses categories"| node_categories_data
node_category_browse -->|"lists books"| node_catalog
node_author_browse -->|"counts authors"| node_catalog
node_author_browse -->|"uses biographies"| node_author_data
node_book_detail -->|"loads book"| node_catalog
node_book_detail -->|"gets recommendations"| node_recommendations
node_book_detail -->|"updates reader state"| node_library_state
node_book_detail -->|"renders progress"| node_reading_progress
node_book_detail -->|"shows access type"| node_access_badge
node_book_cards -->|"toggles saved status"| node_library_state
node_book_cards -->|"renders"| node_access_badge
node_my_library -->|"reads library state"| node_library_state
node_my_library -->|"resolves saved books"| node_catalog
node_my_library -->|"renders books"| node_book_cards
node_reading_progress -->|"updates progress"| node_library_state
node_library_state -->|"persists state"| node_local_storage
node_catalog -->|"combines collections"| node_book_collections
node_reader -->|"manages reading"| node_my_library
node_reader -->|"opens a book"| node_book_detail

click node_app "https://github.com/gambirbuilds/bookvault/blob/main/src/App.tsx"
click node_home "https://github.com/gambirbuilds/bookvault/blob/main/src/pages/Home.jsx"
click node_book_browse "https://github.com/gambirbuilds/bookvault/blob/main/src/pages/Books.jsx"
click node_book_detail "https://github.com/gambirbuilds/bookvault/blob/main/src/pages/BookDetails.jsx"
click node_category_browse "https://github.com/gambirbuilds/bookvault/blob/main/src/pages/Categories.jsx"
click node_author_browse "https://github.com/gambirbuilds/bookvault/blob/main/src/pages/Authors.jsx"
click node_global_search "https://github.com/gambirbuilds/bookvault/blob/main/src/components/GlobalSearchModal.jsx"
click node_search_bar "https://github.com/gambirbuilds/bookvault/blob/main/src/components/SearchBar.jsx"
click node_filter_logic "https://github.com/gambirbuilds/bookvault/blob/main/src/utils/filters.js"
click node_recommendations "https://github.com/gambirbuilds/bookvault/blob/main/src/utils/recommendations.js"
click node_my_library "https://github.com/gambirbuilds/bookvault/blob/main/src/pages/MyLibrary.jsx"
click node_library_state "https://github.com/gambirbuilds/bookvault/blob/main/src/context/LibraryContext.jsx"
click node_reading_progress "https://github.com/gambirbuilds/bookvault/blob/main/src/components/ReadingProgress.jsx"
click node_local_storage "https://github.com/gambirbuilds/bookvault/blob/main/src/utils/storage.js"
click node_book_cards "https://github.com/gambirbuilds/bookvault/blob/main/src/components/BookCard.jsx"
click node_access_badge "https://github.com/gambirbuilds/bookvault/blob/main/src/components/BookAccessBadge.jsx"
click node_catalog "https://github.com/gambirbuilds/bookvault/blob/main/src/data/books.js"
click node_book_collections "https://github.com/gambirbuilds/bookvault/tree/main/src/data/books"
click node_categories_data "https://github.com/gambirbuilds/bookvault/blob/main/src/data/categories.js"
click node_author_data "https://github.com/gambirbuilds/bookvault/blob/main/src/data/authors.js"
click node_quotes_data "https://github.com/gambirbuilds/bookvault/blob/main/src/data/quotes.js"

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,node_book_cards,node_access_badge toneBlue
class node_home,node_book_browse,node_book_detail,node_category_browse,node_author_browse,node_global_search,node_search_bar,node_filter_logic,node_recommendations toneAmber
class node_catalog,node_book_collections,node_categories_data,node_author_data,node_quotes_data toneMint
class node_my_library,node_library_state,node_reading_progress,node_local_storage toneRose
class node_reader toneIndigo
```

## Components

### App experience

- [Routed app shell](https://github.com/gambirbuilds/bookvault/blob/main/src/App.tsx): `src/App.tsx`
- [Book cards and grid](https://github.com/gambirbuilds/bookvault/blob/main/src/components/BookCard.jsx): `src/components/BookCard.jsx`
- [Access classification](https://github.com/gambirbuilds/bookvault/blob/main/src/components/BookAccessBadge.jsx): `src/components/BookAccessBadge.jsx`

### Discovery

- [Home discovery](https://github.com/gambirbuilds/bookvault/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Book search and browse](https://github.com/gambirbuilds/bookvault/blob/main/src/pages/Books.jsx): `src/pages/Books.jsx`
- [Book details and access](https://github.com/gambirbuilds/bookvault/blob/main/src/pages/BookDetails.jsx): `src/pages/BookDetails.jsx`
- [Category discovery](https://github.com/gambirbuilds/bookvault/blob/main/src/pages/Categories.jsx): `src/pages/Categories.jsx`
- [Author discovery](https://github.com/gambirbuilds/bookvault/blob/main/src/pages/Authors.jsx): `src/pages/Authors.jsx`
- [Global search](https://github.com/gambirbuilds/bookvault/blob/main/src/components/GlobalSearchModal.jsx): `src/components/GlobalSearchModal.jsx`
- [Search suggestions](https://github.com/gambirbuilds/bookvault/blob/main/src/components/SearchBar.jsx): `src/components/SearchBar.jsx`
- [Filtering and sorting](https://github.com/gambirbuilds/bookvault/blob/main/src/utils/filters.js): `src/utils/filters.js`
- [Recommendations](https://github.com/gambirbuilds/bookvault/blob/main/src/utils/recommendations.js): `src/utils/recommendations.js`

### Catalog data

- [Combined book catalog](https://github.com/gambirbuilds/bookvault/blob/main/src/data/books.js): `src/data/books.js`
- [Disciplinary book collections](https://github.com/gambirbuilds/bookvault/tree/main/src/data/books): `src/data/books`
- [Category metadata](https://github.com/gambirbuilds/bookvault/blob/main/src/data/categories.js): `src/data/categories.js`
- [Author biographies](https://github.com/gambirbuilds/bookvault/blob/main/src/data/authors.js): `src/data/authors.js`
- [Literary quotes](https://github.com/gambirbuilds/bookvault/blob/main/src/data/quotes.js): `src/data/quotes.js`

### Reading library

- [Personal library dashboard](https://github.com/gambirbuilds/bookvault/blob/main/src/pages/MyLibrary.jsx): `src/pages/MyLibrary.jsx`
- [Library state and actions](https://github.com/gambirbuilds/bookvault/blob/main/src/context/LibraryContext.jsx): `src/context/LibraryContext.jsx`
- [Progress controls](https://github.com/gambirbuilds/bookvault/blob/main/src/components/ReadingProgress.jsx): `src/components/ReadingProgress.jsx`
- [Browser persistence](https://github.com/gambirbuilds/bookvault/blob/main/src/utils/storage.js): `src/utils/storage.js`

### Other components

- **Reader**

## Connections

- Reader → Routed app shell: opens (evidence: `README.md`)
- Routed app shell → Home discovery: routes to (evidence: `src/App.tsx`)
- Routed app shell → Book search and browse: routes to (evidence: `src/App.tsx`)
- Routed app shell → Book details and access: routes to (evidence: `src/App.tsx`)
- Routed app shell → Category discovery: routes to (evidence: `src/App.tsx`)
- Routed app shell → Author discovery: routes to (evidence: `src/App.tsx`)
- Routed app shell → Personal library dashboard: routes to (evidence: `src/App.tsx`)
- Reader → Book search and browse: searches and filters (evidence: `README.md`)
- Reader → Global search: searches (evidence: `README.md`)
- Reader → Category discovery: explores (evidence: `README.md`)
- Reader → Author discovery: explores (evidence: `README.md`)
- Home discovery → Combined book catalog: selects books (evidence: `src/pages/Home.jsx`)
- Home discovery → Category metadata: uses categories (evidence: `src/pages/Home.jsx`)
- Home discovery → Literary quotes: uses quotes (evidence: `src/pages/Home.jsx`)
- Home discovery → Book cards and grid: renders (evidence: `src/pages/Home.jsx`)
- Book search and browse → Combined book catalog: browses (evidence: `src/pages/Books.jsx`)
- Book search and browse → Filtering and sorting: filters and sorts (evidence: `src/pages/Books.jsx`)
- Book search and browse → Search suggestions: renders (evidence: `src/pages/Books.jsx`)
- Book search and browse → Book cards and grid: renders results (evidence: `src/pages/Books.jsx`)
- Search suggestions → Combined book catalog: suggests from (evidence: `src/components/SearchBar.jsx`)
- Search suggestions → Filtering and sorting: gets suggestions (evidence: `src/components/SearchBar.jsx`)
- Global search → Combined book catalog: searches books (evidence: `src/components/GlobalSearchModal.jsx`)
- Global search → Category metadata: searches categories (evidence: `src/components/GlobalSearchModal.jsx`)
- Category discovery → Category metadata: uses categories (evidence: `src/pages/Categories.jsx`)
- Category discovery → Combined book catalog: lists books (evidence: `src/pages/Categories.jsx`)
- Author discovery → Combined book catalog: counts authors (evidence: `src/pages/Authors.jsx`)
- Author discovery → Author biographies: uses biographies (evidence: `src/pages/Authors.jsx`)
- Book details and access → Combined book catalog: loads book (evidence: `src/pages/BookDetails.jsx`)
- Book details and access → Recommendations: gets recommendations (evidence: `src/pages/BookDetails.jsx`)
- Book details and access → Library state and actions: updates reader state (evidence: `src/pages/BookDetails.jsx`)
- Book details and access → Progress controls: renders progress (evidence: `src/pages/BookDetails.jsx`)
- Book details and access → Access classification: shows access type (evidence: `src/pages/BookDetails.jsx`)
- Book cards and grid → Library state and actions: toggles saved status (evidence: `src/components/BookCard.jsx`)
- Book cards and grid → Access classification: renders (evidence: `src/components/BookCard.jsx`)
- Personal library dashboard → Library state and actions: reads library state (evidence: `src/pages/MyLibrary.jsx`)
- Personal library dashboard → Combined book catalog: resolves saved books (evidence: `src/pages/MyLibrary.jsx`)
- Personal library dashboard → Book cards and grid: renders books (evidence: `src/pages/MyLibrary.jsx`)
- Progress controls → Library state and actions: updates progress (evidence: `src/components/ReadingProgress.jsx`)
- Library state and actions → Browser persistence: persists state (evidence: `src/context/LibraryContext.jsx`)
- Combined book catalog → Disciplinary book collections: combines collections (evidence: `src/data/books.js`)
- Reader → Personal library dashboard: manages reading (evidence: `README.md`)
- Reader → Book details and access: opens a book (evidence: `README.md`)