# paul-developer-stack/proyecto-react-final-de-curso- architecture

> Architecture diagram of the GitHub repository paul-developer-stack/proyecto-react-final-de-curso-, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/paul-developer-stack/proyecto-react-final-de-curso-
- Repository: https://github.com/paul-developer-stack/proyecto-react-final-de-curso-

## Overview

Botica Nova Salud is a web application for pharmacy inventory and sales. Staff use the React interface to review dashboard KPIs and stock alerts, maintain products, and assemble and register sales at the POS. The frontend API client calls the Express routes, which implement product and sales operations over MySQL; sales validate and decrement stock transactionally. The README also documents sales history and individual-sale details, but their frontend consumers are not shown. Relationships below are limited to source excerpts or README statements.

Main entry points: [`frontend/src/services/api.js`](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/services/api.js) (API client), [`frontend/src/App.jsx`](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/App.jsx) (View navigation), [`backend/src/server.js`](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/backend/src/server.js) (Express server), [`backend/src/db.js`](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/backend/src/db.js) (MySQL pool)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Staff interface"]
  node_app["View navigation<br/>[App.jsx]"]
  node_dashboard["Dashboard KPIs<br/>[Dashboard.jsx]"]
  node_alerts["Stock alerts<br/>[StockAlerts.jsx]"]
  node_inventory["Inventory table<br/>[InventoryTable.jsx]"]
  node_productform["Product form<br/>[ProductModal.jsx]"]
  node_pos["Sales POS<br/>[SalesPOS.jsx]"]
  node_client["API client<br/>[api.js]"]
end

subgraph group_api["REST API"]
  node_server["Express server<br/>[server.js]"]
  node_productroutes["Product routes<br/>[productos.js]"]
  node_salesroutes["Sales routes<br/>[ventas.js]"]
  node_history["Sales history and details<br/>[ventas.js]"]
end

subgraph group_data["Inventory data"]
  node_pool["MySQL pool<br/>[db.js]"]
  node_mysql[("MySQL database")]
end

node_staff(("Pharmacy staff"))

node_staff -->|"uses"| node_app
node_app -->|"renders"| node_dashboard
node_app -->|"renders"| node_inventory
node_app -->|"renders"| node_pos
node_dashboard -->|"renders"| node_alerts
node_inventory -->|"renders"| node_productform
node_dashboard -->|"requests KPIs"| node_client
node_alerts -->|"requests alerts"| node_client
node_inventory -->|"manages products"| node_client
node_pos -->|"requests products"| node_client
node_pos -->|"submits sale"| node_client
node_client -->|"HTTP requests"| node_server
node_server -->|"routes products"| node_productroutes
node_server -->|"routes sales"| node_salesroutes
node_server -->|"checks health"| node_pool
node_productroutes -->|"queries products"| node_pool
node_salesroutes -->|"queries transactions"| node_pool
node_pool -->|"reads and writes"| node_mysql
node_salesroutes -->|"serves history"| node_history

click node_app "https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/App.jsx"
click node_dashboard "https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/components/Dashboard.jsx"
click node_alerts "https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/components/StockAlerts.jsx"
click node_inventory "https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/components/InventoryTable.jsx"
click node_productform "https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/components/ProductModal.jsx"
click node_pos "https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/components/SalesPOS.jsx"
click node_client "https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/services/api.js"
click node_server "https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/backend/src/server.js"
click node_productroutes "https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/backend/src/routes/productos.js"
click node_salesroutes "https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/backend/src/routes/ventas.js"
click node_pool "https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/backend/src/db.js"
click node_mysql "https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/database/botica_nova_salud.sql"
click node_history "https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/backend/src/routes/ventas.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_dashboard,node_alerts,node_inventory,node_productform,node_pos,node_client toneBlue
class node_server,node_productroutes,node_salesroutes,node_history toneAmber
class node_pool,node_mysql toneMint
class node_staff toneIndigo
```

## Components

### Staff interface

- [View navigation](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Dashboard KPIs](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/components/Dashboard.jsx): `frontend/src/components/Dashboard.jsx`
- [Stock alerts](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/components/StockAlerts.jsx): `frontend/src/components/StockAlerts.jsx`
- [Inventory table](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/components/InventoryTable.jsx): `frontend/src/components/InventoryTable.jsx`
- [Product form](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/components/ProductModal.jsx): `frontend/src/components/ProductModal.jsx`
- [Sales POS](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/components/SalesPOS.jsx): `frontend/src/components/SalesPOS.jsx`
- [API client](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/frontend/src/services/api.js): `frontend/src/services/api.js`

### REST API

- [Express server](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/backend/src/server.js): `backend/src/server.js`
- [Product routes](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/backend/src/routes/productos.js): `backend/src/routes/productos.js`
- [Sales routes](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/backend/src/routes/ventas.js): `backend/src/routes/ventas.js`
- [Sales history and details](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/backend/src/routes/ventas.js): `backend/src/routes/ventas.js`

### Inventory data

- [MySQL pool](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/backend/src/db.js): `backend/src/db.js`
- [MySQL database](https://github.com/paul-developer-stack/proyecto-react-final-de-curso-/blob/main/database/botica_nova_salud.sql): `database/botica_nova_salud.sql`

### Other components

- **Pharmacy staff**

## Connections

- Pharmacy staff → View navigation: uses (evidence: `README.md`)
- View navigation → Dashboard KPIs: renders (evidence: `frontend/src/App.jsx`)
- View navigation → Inventory table: renders (evidence: `frontend/src/App.jsx`)
- View navigation → Sales POS: renders (evidence: `frontend/src/App.jsx`)
- Dashboard KPIs → Stock alerts: renders (evidence: `frontend/src/components/Dashboard.jsx`)
- Inventory table → Product form: renders (evidence: `frontend/src/components/InventoryTable.jsx`)
- Dashboard KPIs → API client: requests KPIs (evidence: `frontend/src/components/Dashboard.jsx`)
- Stock alerts → API client: requests alerts (evidence: `frontend/src/components/StockAlerts.jsx`)
- Inventory table → API client: manages products (evidence: `frontend/src/components/InventoryTable.jsx`)
- Sales POS → API client: requests products (evidence: `frontend/src/components/SalesPOS.jsx`)
- Sales POS → API client: submits sale (evidence: `frontend/src/components/SalesPOS.jsx`)
- API client → Express server: HTTP requests (evidence: `README.md`)
- Express server → Product routes: routes products (evidence: `backend/src/server.js`)
- Express server → Sales routes: routes sales (evidence: `backend/src/server.js`)
- Express server → MySQL pool: checks health (evidence: `backend/src/server.js`)
- Product routes → MySQL pool: queries products (evidence: `backend/src/routes/productos.js`)
- Sales routes → MySQL pool: queries transactions (evidence: `backend/src/routes/ventas.js`)
- MySQL pool → MySQL database: reads and writes (evidence: `README.md`)
- Sales routes → Sales history and details: serves history (evidence: `README.md`)