# jpduron/product-catalog architecture

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

- Interactive diagram: https://gitdiagram.com/jpduron/product-catalog
- Repository: https://github.com/jpduron/product-catalog

## Overview

This is a small Spanish-language product catalog with a browser UI for listing, viewing, creating, editing, and deleting products. The browser calls an Express REST API, which executes SQL against a MySQL pool. The README is empty, so the workflow and capabilities shown here come from the sampled UI and server code; no separate category or inventory subsystem is evident.

Main entry points: [`public/index.html`](https://github.com/jpduron/product-catalog/blob/main/public/index.html) (Product UI), [`public/app.js`](https://github.com/jpduron/product-catalog/blob/main/public/app.js) (Catalog interactions), [`server.js`](https://github.com/jpduron/product-catalog/blob/main/server.js) (Product CRUD routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Catalog interface"]
  node_browser["Product UI<br/>[index.html]"]
  node_catalog_ui["Catalog interactions<br/>[app.js]"]
end

subgraph group_api["Product API"]
  node_api_routes["Product CRUD routes<br/>[server.js]"]
end

subgraph group_persistence["Persistence"]
  node_mysql_pool["MySQL connection pool<br/>[server.js]"]
  node_products_db[("Products table")]
end

node_user(("Catalog user"))

node_user -->|"uses"| node_browser
node_browser -->|"loads"| node_catalog_ui
node_catalog_ui -->|"requests CRUD"| node_api_routes
node_api_routes -->|"queries"| node_mysql_pool
node_mysql_pool -->|"reads and writes"| node_products_db

click node_browser "https://github.com/jpduron/product-catalog/blob/main/public/index.html"
click node_catalog_ui "https://github.com/jpduron/product-catalog/blob/main/public/app.js"
click node_api_routes "https://github.com/jpduron/product-catalog/blob/main/server.js"
click node_mysql_pool "https://github.com/jpduron/product-catalog/blob/main/server.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_browser,node_catalog_ui,node_user toneBlue
class node_api_routes toneAmber
class node_mysql_pool,node_products_db toneMint
```

## Components

### Catalog interface

- [Product UI](https://github.com/jpduron/product-catalog/blob/main/public/index.html): `public/index.html`
- [Catalog interactions](https://github.com/jpduron/product-catalog/blob/main/public/app.js): `public/app.js`

### Product API

- [Product CRUD routes](https://github.com/jpduron/product-catalog/blob/main/server.js): `server.js`

### Persistence

- [MySQL connection pool](https://github.com/jpduron/product-catalog/blob/main/server.js): `server.js`
- **Products table**

### Other components

- **Catalog user**

## Connections

- Catalog user → Product UI: uses
- Product UI → Catalog interactions: loads
- Catalog interactions → Product CRUD routes: requests CRUD (evidence: `public/app.js`)
- Product CRUD routes → MySQL connection pool: queries (evidence: `server.js`)
- MySQL connection pool → Products table: reads and writes (evidence: `server.js`)