# navinreddy20/fastapi-demo architecture

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

- Interactive diagram: https://gitdiagram.com/navinreddy20/fastapi-demo
- Repository: https://github.com/navinreddy20/fastapi-demo

## Overview

This repository is a set of progressively expanded product-inventory examples: in-memory GET/POST, in-memory CRUD, database-backed CRUD, and a React management UI. The principal workflow is a user viewing, searching, sorting, and editing products in the UI; the UI calls the FastAPI service, which reads or changes product records. The final example seeds an initially empty database and uses PostgreSQL. Earlier examples are standalone variants, not stages that call one another. Frontend and database wiring is shown where supported by the sampled source; unsampled implementations are represented only by their tree paths.

Main entry points: [`04-products-with-ui/main.py`](https://github.com/navinreddy20/fastapi-demo/blob/main/04-products-with-ui/main.py) (UI-backed CRUD API), [`04-products-with-ui/frontend/src/App.js`](https://github.com/navinreddy20/fastapi-demo/blob/main/04-products-with-ui/frontend/src/App.js) (Management screen), [`04-products-with-ui/models.py`](https://github.com/navinreddy20/fastapi-demo/blob/main/04-products-with-ui/models.py) (Product schema), [`03-products-with-db/main.py`](https://github.com/navinreddy20/fastapi-demo/blob/main/03-products-with-db/main.py) (Database CRUD API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Inventory UI"]
  node_react["Management screen<br/>[App.js]"]
  node_tagline["Tagline section<br/>[TaglineSection.js]"]
end

subgraph group_api["Inventory APIs"]
  node_memory_get["GET/POST API<br/>[main.py]"]
  node_memory_crud["In-memory CRUD<br/>[main.py]"]
  node_db_api["Database CRUD API<br/>[main.py]"]
  node_ui_api["UI-backed CRUD API<br/>[main.py]"]
  node_product_schema["Product schema<br/>[models.py]"]
end

subgraph group_persistence["Product storage"]
  node_db_config["DB sessions<br/>[database.py]"]
  node_orm_model["Product table model<br/>[database_models.py]"]
end

node_user(("Inventory user"))
node_postgres[("PostgreSQL")]

node_user -->|"uses"| node_react
node_react -->|"renders"| node_tagline
node_react -->|"HTTP requests"| node_ui_api
node_ui_api -->|"returns results"| node_react
node_ui_api -->|"validates input"| node_product_schema
node_ui_api -->|"opens sessions"| node_db_config
node_ui_api -->|"queries and mutates"| node_orm_model
node_db_config -->|"connects"| node_postgres
node_orm_model -->|"maps products"| node_postgres
node_db_api -->|"opens sessions"| node_db_config
node_db_api -->|"queries and mutates"| node_orm_model
node_db_api -->|"validates input"| node_product_schema
node_memory_get -->|"validates input"| node_product_schema
node_memory_crud -->|"validates input"| node_product_schema

click node_react "https://github.com/navinreddy20/fastapi-demo/blob/main/04-products-with-ui/frontend/src/App.js"
click node_tagline "https://github.com/navinreddy20/fastapi-demo/blob/main/04-products-with-ui/frontend/src/TaglineSection.js"
click node_memory_get "https://github.com/navinreddy20/fastapi-demo/blob/main/01-products-get-post/main.py"
click node_memory_crud "https://github.com/navinreddy20/fastapi-demo/blob/main/02-products-put-delete/main.py"
click node_db_api "https://github.com/navinreddy20/fastapi-demo/blob/main/03-products-with-db/main.py"
click node_ui_api "https://github.com/navinreddy20/fastapi-demo/blob/main/04-products-with-ui/main.py"
click node_product_schema "https://github.com/navinreddy20/fastapi-demo/blob/main/04-products-with-ui/models.py"
click node_db_config "https://github.com/navinreddy20/fastapi-demo/blob/main/04-products-with-ui/database.py"
click node_orm_model "https://github.com/navinreddy20/fastapi-demo/blob/main/04-products-with-ui/database_models.py"

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,node_tagline,node_user toneBlue
class node_memory_get,node_memory_crud,node_db_api,node_ui_api,node_product_schema,node_postgres toneAmber
class node_db_config,node_orm_model toneMint
```

## Components

### Inventory UI

- [Management screen](https://github.com/navinreddy20/fastapi-demo/blob/main/04-products-with-ui/frontend/src/App.js): `04-products-with-ui/frontend/src/App.js`
- [Tagline section](https://github.com/navinreddy20/fastapi-demo/blob/main/04-products-with-ui/frontend/src/TaglineSection.js): `04-products-with-ui/frontend/src/TaglineSection.js`

### Inventory APIs

- [GET/POST API](https://github.com/navinreddy20/fastapi-demo/blob/main/01-products-get-post/main.py): `01-products-get-post/main.py`
- [In-memory CRUD](https://github.com/navinreddy20/fastapi-demo/blob/main/02-products-put-delete/main.py): `02-products-put-delete/main.py`
- [Database CRUD API](https://github.com/navinreddy20/fastapi-demo/blob/main/03-products-with-db/main.py): `03-products-with-db/main.py`
- [UI-backed CRUD API](https://github.com/navinreddy20/fastapi-demo/blob/main/04-products-with-ui/main.py): `04-products-with-ui/main.py`
- [Product schema](https://github.com/navinreddy20/fastapi-demo/blob/main/04-products-with-ui/models.py): `04-products-with-ui/models.py`

### Product storage

- [DB sessions](https://github.com/navinreddy20/fastapi-demo/blob/main/04-products-with-ui/database.py): `04-products-with-ui/database.py`
- [Product table model](https://github.com/navinreddy20/fastapi-demo/blob/main/04-products-with-ui/database_models.py): `04-products-with-ui/database_models.py`

### Other components

- **Inventory user**
- **PostgreSQL**

## Connections

- Inventory user → Management screen: uses
- Management screen → Tagline section: renders
- Management screen → UI-backed CRUD API: HTTP requests
- UI-backed CRUD API → Management screen: returns results
- UI-backed CRUD API → Product schema: validates input
- UI-backed CRUD API → DB sessions: opens sessions
- UI-backed CRUD API → Product table model: queries and mutates
- DB sessions → PostgreSQL: connects
- Product table model → PostgreSQL: maps products
- Database CRUD API → DB sessions: opens sessions
- Database CRUD API → Product table model: queries and mutates
- Database CRUD API → Product schema: validates input
- GET/POST API → Product schema: validates input
- In-memory CRUD → Product schema: validates input