# gagishmagi/flask-react-northwind-crm architecture

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

- Interactive diagram: https://gitdiagram.com/gagishmagi/flask-react-northwind-crm
- Repository: https://github.com/gagishmagi/flask-react-northwind-crm

## Overview

This is a Northwind-backed CRM dashboard: users see customer, product, employee, and order counts, and the frontend includes a product-list and product-management interface. The Flask API serves count and product endpoints backed by PostgreSQL. The sampled App.jsx currently renders the dashboard; Products.jsx exists but is not mounted there. The graph reflects sampled frontend/API code and the documented Swagger asset; other frontend or backend capabilities are not inferred.

Main entry points: [`backend/app.py`](https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/backend/app.py) (Flask routes), [`frontend/src/main.jsx`](https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/frontend/src/main.jsx) (React entry), [`frontend/src/App.jsx`](https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/frontend/src/App.jsx) (App shell), [`frontend/src/components/Dashboard.jsx`](https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/frontend/src/components/Dashboard.jsx) (Dashboard counts)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["CRM frontend"]
  node_react_entry["React entry<br/>[main.jsx]"]
  node_app_shell["App shell<br/>[App.jsx]"]
  node_dashboard["Dashboard counts<br/>[Dashboard.jsx]"]
  node_products_ui["Product management<br/>[Products.jsx]"]
end

subgraph group_api["Flask API"]
  node_flask_app["Flask routes<br/>[app.py]"]
  node_product_queries["Product queries<br/>[app.py]"]
  node_count_queries["Count queries<br/>[app.py]"]
  node_db_connection["DB connection<br/>[app.py]"]
end

subgraph group_storage["Data and schema"]
  node_postgres[("Northwind database")]
  node_schema["Northwind schema<br/>[northwind.sql]"]
end

subgraph group_docs["API documentation"]
  node_swagger_asset["Swagger specification<br/>[swagger.json]"]
end

node_user(("CRM user"))

node_user -->|"opens"| node_react_entry
node_react_entry -->|"renders"| node_app_shell
node_app_shell -->|"renders"| node_dashboard
node_user -->|"selects products"| node_products_ui
node_dashboard -->|"fetches counts"| node_flask_app
node_products_ui -->|"requests products"| node_flask_app
node_flask_app -->|"calls"| node_product_queries
node_flask_app -->|"calls"| node_count_queries
node_product_queries -->|"opens connection"| node_db_connection
node_count_queries -->|"opens connection"| node_db_connection
node_db_connection -->|"connects"| node_postgres
node_product_queries -->|"reads and writes"| node_postgres
node_count_queries -->|"counts records"| node_postgres
node_schema -.->|"defines schema"| node_postgres
node_flask_app -->|"serves specification"| node_swagger_asset

click node_react_entry "https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/frontend/src/main.jsx"
click node_app_shell "https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/frontend/src/App.jsx"
click node_dashboard "https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/frontend/src/components/Dashboard.jsx"
click node_products_ui "https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/frontend/src/components/Products.jsx"
click node_flask_app "https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/backend/app.py"
click node_product_queries "https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/backend/app.py"
click node_count_queries "https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/backend/app.py"
click node_db_connection "https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/backend/app.py"
click node_schema "https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/backend/northwind.sql"
click node_swagger_asset "https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/backend/static/swagger.json"

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_app_shell,node_dashboard,node_products_ui,node_user toneBlue
class node_flask_app,node_product_queries,node_count_queries,node_db_connection toneAmber
class node_postgres,node_schema toneMint
class node_swagger_asset toneRose
```

## Components

### CRM frontend

- [React entry](https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/frontend/src/main.jsx): `frontend/src/main.jsx`
- [App shell](https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Dashboard counts](https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/frontend/src/components/Dashboard.jsx): `frontend/src/components/Dashboard.jsx`
- [Product management](https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/frontend/src/components/Products.jsx): `frontend/src/components/Products.jsx`

### Flask API

- [Flask routes](https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/backend/app.py): `backend/app.py`
- [Product queries](https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/backend/app.py): `backend/app.py`
- [Count queries](https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/backend/app.py): `backend/app.py`
- [DB connection](https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/backend/app.py): `backend/app.py`

### Data and schema

- **Northwind database**
- [Northwind schema](https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/backend/northwind.sql): `backend/northwind.sql`

### API documentation

- [Swagger specification](https://github.com/gagishmagi/flask-react-northwind-crm/blob/main/backend/static/swagger.json): `backend/static/swagger.json`

### Other components

- **CRM user**

## Connections

- CRM user → React entry: opens
- React entry → App shell: renders
- App shell → Dashboard counts: renders
- CRM user → Product management: selects products
- Dashboard counts → Flask routes: fetches counts
- Product management → Flask routes: requests products
- Flask routes → Product queries: calls
- Flask routes → Count queries: calls
- Product queries → DB connection: opens connection
- Count queries → DB connection: opens connection
- DB connection → Northwind database: connects
- Product queries → Northwind database: reads and writes
- Count queries → Northwind database: counts records
- Northwind schema → Northwind database: defines schema
- Flask routes → Swagger specification: serves specification