# minhquocmnh/nguyenminhquoc-24ct1 architecture

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

- Interactive diagram: https://gitdiagram.com/minhquocmnh/nguyenminhquoc-24ct1
- Repository: https://github.com/minhquocmnh/nguyenminhquoc-24ct1

## Overview

BookVerse is a Vietnamese online bookstore. Shoppers browse and filter books, inspect details, manage a persistent cart, and place orders; account and order-history features support returning customers. An admin area manages books and order statuses. The excerpts show Supabase-backed data with local mock-data fallbacks. Several UI modules are present in the tree but were not sampled, so their internal service wiring is not inferred.

Main entry points: [`src/App.jsx`](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/App.jsx) (App coordinator), [`src/services/bookService.js`](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/services/bookService.js) (Book data service), [`src/components/CheckoutModal.jsx`](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/CheckoutModal.jsx) (Checkout), [`src/context/AuthContext.jsx`](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/context/AuthContext.jsx) (Auth and profile state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_app["App coordinator<br/>[App.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_hero["Hero banner<br/>[HeroBanner.jsx]"]
  node_filter["Category search<br/>[CategoryFilter.jsx]"]
  node_catalog["Book catalog<br/>[BookCard.jsx]"]
  node_detail["Book details"]
  node_info["Store information<br/>[AboutModal.jsx]"]
  node_policy["Policies<br/>[PolicyModal.jsx]"]
  node_contact["Contact form<br/>[ContactModal.jsx]"]
end

subgraph group_purchase["Purchase and accounts"]
  node_cartui["Cart drawer<br/>[CartDrawer.jsx]"]
  node_checkout["Checkout<br/>[CheckoutModal.jsx]"]
  node_authui["Sign-in and signup<br/>[AuthModal.jsx]"]
  node_history["Order history"]
  node_cart["Cart state<br/>[CartContext.jsx]"]
  node_auth["Auth and profile state<br/>[AuthContext.jsx]"]
end

subgraph group_admin["Administration"]
  node_adminui["Admin panel<br/>[AdminPanel.jsx]"]
  node_configui["Backend configuration"]
end

subgraph group_data["Data and persistence"]
  node_booksvc["Book data service<br/>[bookService.js]"]
  node_ordersvc["Order data service<br/>[orderService.js]"]
  node_mockdata["Mock book catalog<br/>[mockData.js]"]
  node_cartstore[("Browser cart storage")]
  node_localstore[("Browser local storage")]
  node_supabaseclient["Supabase client<br/>[supabase.js]"]
end

node_shopper(("Shopper"))
node_supabase[("Supabase backend")]

node_shopper -->|"uses storefront"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_filter
node_app -->|"renders"| node_catalog
node_app -->|"renders"| node_detail
node_app -->|"renders"| node_cartui
node_app -->|"renders"| node_checkout
node_app -->|"renders"| node_authui
node_app -->|"renders"| node_history
node_app -->|"renders"| node_adminui
node_app -->|"renders"| node_info
node_app -->|"renders"| node_policy
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_configui
node_app -->|"fetches books"| node_booksvc
node_cartui -->|"uses cart"| node_cart
node_checkout -->|"reads and clears"| node_cart
node_checkout -->|"reads identity"| node_auth
node_checkout -->|"creates order"| node_ordersvc
node_authui -->|"signs in or up"| node_auth
node_adminui -->|"manages books"| node_booksvc
node_adminui -->|"manages orders"| node_ordersvc
node_cart -->|"persists cart"| node_cartstore
node_auth -->|"stores mock identity"| node_localstore
node_booksvc -->|"loads fallback"| node_mockdata
node_booksvc -->|"reads and writes fallback"| node_localstore
node_booksvc -->|"queries books"| node_supabaseclient
node_ordersvc -->|"stores fallback orders"| node_localstore
node_ordersvc -->|"queries orders"| node_supabaseclient
node_auth -->|"authenticates and queries profiles"| node_supabaseclient
node_supabaseclient -->|"connects"| node_supabase

click node_app "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/App.jsx"
click node_navbar "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/HeroBanner.jsx"
click node_filter "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/CategoryFilter.jsx"
click node_catalog "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/BookCard.jsx"
click node_detail "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/BookDetailModal.jsx"
click node_cartui "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/CartDrawer.jsx"
click node_checkout "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/CheckoutModal.jsx"
click node_authui "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/AuthModal.jsx"
click node_history "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/OrderHistoryModal.jsx"
click node_cart "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/context/CartContext.jsx"
click node_auth "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/context/AuthContext.jsx"
click node_adminui "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/AdminPanel.jsx"
click node_info "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/AboutModal.jsx"
click node_policy "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/PolicyModal.jsx"
click node_contact "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/ContactModal.jsx"
click node_configui "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/SupabaseConfigModal.jsx"
click node_booksvc "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/services/bookService.js"
click node_ordersvc "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/services/orderService.js"
click node_mockdata "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/services/mockData.js"
click node_supabaseclient "https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/lib/supabase.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_navbar,node_hero,node_filter,node_catalog,node_detail,node_info,node_policy,node_contact toneBlue
class node_cartui,node_checkout,node_authui,node_history,node_cart,node_auth,node_supabase toneAmber
class node_adminui,node_configui toneMint
class node_booksvc,node_ordersvc,node_mockdata,node_cartstore,node_localstore,node_supabaseclient toneRose
class node_shopper toneIndigo
```

## Components

### Storefront

- [App coordinator](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Hero banner](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/HeroBanner.jsx): `src/components/HeroBanner.jsx`
- [Category search](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/CategoryFilter.jsx): `src/components/CategoryFilter.jsx`
- [Book catalog](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/BookCard.jsx): `src/components/BookCard.jsx`
- [Book details](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/BookDetailModal.jsx): `src/components/BookDetailModal.jsx`
- [Store information](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/AboutModal.jsx): `src/components/AboutModal.jsx`
- [Policies](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/PolicyModal.jsx): `src/components/PolicyModal.jsx`
- [Contact form](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/ContactModal.jsx): `src/components/ContactModal.jsx`

### Purchase and accounts

- [Cart drawer](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/CartDrawer.jsx): `src/components/CartDrawer.jsx`
- [Checkout](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/CheckoutModal.jsx): `src/components/CheckoutModal.jsx`
- [Sign-in and signup](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/AuthModal.jsx): `src/components/AuthModal.jsx`
- [Order history](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/OrderHistoryModal.jsx): `src/components/OrderHistoryModal.jsx`
- [Cart state](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/context/CartContext.jsx): `src/context/CartContext.jsx`
- [Auth and profile state](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`

### Administration

- [Admin panel](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/AdminPanel.jsx): `src/components/AdminPanel.jsx`
- [Backend configuration](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/components/SupabaseConfigModal.jsx): `src/components/SupabaseConfigModal.jsx`

### Data and persistence

- [Book data service](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/services/bookService.js): `src/services/bookService.js`
- [Order data service](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/services/orderService.js): `src/services/orderService.js`
- [Mock book catalog](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/services/mockData.js): `src/services/mockData.js`
- **Browser cart storage**
- **Browser local storage**
- [Supabase client](https://github.com/minhquocmnh/nguyenminhquoc-24ct1/blob/main/src/lib/supabase.js): `src/lib/supabase.js`

### Other components

- **Shopper**
- **Supabase backend**

## Connections

- Shopper → App coordinator: uses storefront
- App coordinator → Navigation: renders
- App coordinator → Hero banner: renders
- App coordinator → Category search: renders
- App coordinator → Book catalog: renders
- App coordinator → Book details: renders
- App coordinator → Cart drawer: renders
- App coordinator → Checkout: renders
- App coordinator → Sign-in and signup: renders
- App coordinator → Order history: renders
- App coordinator → Admin panel: renders
- App coordinator → Store information: renders
- App coordinator → Policies: renders
- App coordinator → Contact form: renders
- App coordinator → Backend configuration: renders
- App coordinator → Book data service: fetches books
- Cart drawer → Cart state: uses cart
- Checkout → Cart state: reads and clears
- Checkout → Auth and profile state: reads identity
- Checkout → Order data service: creates order
- Sign-in and signup → Auth and profile state: signs in or up
- Admin panel → Book data service: manages books
- Admin panel → Order data service: manages orders
- Cart state → Browser cart storage: persists cart
- Auth and profile state → Browser local storage: stores mock identity
- Book data service → Mock book catalog: loads fallback
- Book data service → Browser local storage: reads and writes fallback
- Book data service → Supabase client: queries books
- Order data service → Browser local storage: stores fallback orders
- Order data service → Supabase client: queries orders
- Auth and profile state → Supabase client: authenticates and queries profiles
- Supabase client → Supabase backend: connects