# danh0966708759-dev/congnghephanmem architecture

> Architecture diagram of the GitHub repository danh0966708759-dev/congnghephanmem, 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/danh0966708759-dev/congnghephanmem
- Repository: https://github.com/danh0966708759-dev/congnghephanmem

## Overview

SHOP SÁCH 77 is a Vietnamese bookstore storefront with catalog discovery, shopping and checkout, account/order features, book borrowing, and admin product management. The React app also contains newsletter and editorial content. Its sampled state is persisted in browser localStorage; a separate Express API exposes product and login endpoints backed by MySQL. The two top-level project directories appear to be mirrored copies. The excerpts do not establish that the frontend calls the API, so that connection is omitted.

Main entry points: [`24CT1-DangThanhDanh/src/App.jsx`](https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/App.jsx) (Store app), [`24CT1-DangThanhDanh/src/main.jsx`](https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/main.jsx) (React entry), [`24CT1-DangThanhDanh/server/index.js`](https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/server/index.js) (Express API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_react_entry["React entry<br/>[main.jsx]"]
  node_store_app["Store app<br/>[App.jsx]"]
  node_discovery["Book discovery<br/>[App.jsx]"]
  node_checkout["Cart and checkout<br/>[App.jsx]"]
  node_accounts["Accounts and orders<br/>[App.jsx]"]
  node_borrowing["Book borrowing<br/>[App.jsx]"]
  node_editorial["News and newsletter<br/>[App.jsx]"]
end

subgraph group_operations["Shop operations"]
  node_admin["Product administration<br/>[App.jsx]"]
  node_api["Express API<br/>[index.js]"]
end

subgraph group_persistence["Persistence"]
  node_browser_storage[("Browser storage")]
  node_mysql[("MySQL database")]
end

node_shopper(("Shopper"))

node_shopper -->|"opens storefront"| node_react_entry
node_react_entry -->|"renders"| node_store_app
node_shopper -->|"uses catalog and shop"| node_store_app
node_store_app -->|"supports search"| node_discovery
node_store_app -->|"handles purchase"| node_checkout
node_store_app -->|"handles account"| node_accounts
node_store_app -->|"handles borrowing"| node_borrowing
node_store_app -->|"presents content"| node_editorial
node_store_app -->|"provides admin tools"| node_admin
node_store_app -->|"reads and writes"| node_browser_storage
node_shopper -.->|"requests API"| node_api
node_api -->|"queries and initializes"| node_mysql

click node_react_entry "https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/main.jsx"
click node_store_app "https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/App.jsx"
click node_discovery "https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/App.jsx"
click node_checkout "https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/App.jsx"
click node_accounts "https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/App.jsx"
click node_borrowing "https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/App.jsx"
click node_editorial "https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/App.jsx"
click node_admin "https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/App.jsx"
click node_api "https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/server/index.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_react_entry,node_store_app,node_discovery,node_checkout,node_accounts,node_borrowing,node_editorial toneBlue
class node_admin,node_api toneAmber
class node_browser_storage,node_mysql toneMint
class node_shopper toneIndigo
```

## Components

### Storefront

- [React entry](https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/main.jsx): `24CT1-DangThanhDanh/src/main.jsx`
- [Store app](https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/App.jsx): `24CT1-DangThanhDanh/src/App.jsx`
- [Book discovery](https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/App.jsx): `24CT1-DangThanhDanh/src/App.jsx`
- [Cart and checkout](https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/App.jsx): `24CT1-DangThanhDanh/src/App.jsx`
- [Accounts and orders](https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/App.jsx): `24CT1-DangThanhDanh/src/App.jsx`
- [Book borrowing](https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/App.jsx): `24CT1-DangThanhDanh/src/App.jsx`
- [News and newsletter](https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/App.jsx): `24CT1-DangThanhDanh/src/App.jsx`

### Shop operations

- [Product administration](https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/src/App.jsx): `24CT1-DangThanhDanh/src/App.jsx`
- [Express API](https://github.com/danh0966708759-dev/congnghephanmem/blob/main/24CT1-DangThanhDanh/server/index.js): `24CT1-DangThanhDanh/server/index.js`

### Persistence

- **Browser storage**
- **MySQL database**

### Other components

- **Shopper**

## Connections

- Shopper → React entry: opens storefront
- React entry → Store app: renders
- Shopper → Store app: uses catalog and shop
- Store app → Book discovery: supports search
- Store app → Cart and checkout: handles purchase
- Store app → Accounts and orders: handles account
- Store app → Book borrowing: handles borrowing
- Store app → News and newsletter: presents content
- Store app → Product administration: provides admin tools
- Store app → Browser storage: reads and writes
- Shopper → Express API: requests API
- Express API → MySQL database: queries and initializes