FastAPI architecture

Simple GET /items request without a database

sequenceDiagram
    participant User as 🧑 User
    participant Frontend as 🌐 Frontend (Vanilla JS)
    participant Backend as ⚙️ FastAPI Backend
    participant Memory as 🧠 In-memory List

    User->>Frontend: Opens website
    Frontend->>Backend: HTTP request (e.g. GET /items)
    Backend->>Backend: Validate request / route handling
    Backend->>Memory: Read items from list
    Memory-->>Backend: Return list data
    Backend-->>Frontend: JSON response
    Frontend-->>User: Render data in UI

Simple POST /items request without a database

sequenceDiagram
    participant User as 🧑 User
    participant Frontend as 🌐 Frontend (Vanilla JS)
    participant Backend as ⚙️ FastAPI Backend
    participant Memory as 🧠 In-memory List

    User->>Frontend: Submit form (e.g. new item)
    Frontend->>Backend: HTTP POST /items with JSON payload
    Backend->>Backend: Validate & parse request data
    Backend->>Memory: Append item to list
    Memory-->>Backend: Confirm addition
    Backend-->>Frontend: JSON response (success)
    Frontend-->>User: Show confirmation

Simple GET /items request with a database

sequenceDiagram
    participant User as 🧑 User
    participant Frontend as 🌐 Frontend (Vanilla JS)
    participant Backend as ⚙️ FastAPI Backend
    participant DB as 🐘 PostgreSQL Database

    User->>Frontend: Opens website
    Frontend->>Backend: HTTP request (e.g. GET /items)
    Backend->>Backend: Validate request / route handling
    Backend->>DB: SQL query (e.g. SELECT * FROM items)
    DB-->>Backend: Query result
    Backend-->>Frontend: JSON response
    Frontend-->>User: Render data in UI

Simple POST /items request with a database

sequenceDiagram
    participant User as 🧑 User
    participant Frontend as 🌐 Frontend (Vanilla JS)
    participant Backend as ⚙️ FastAPI Backend
    participant DB as 🐘 PostgreSQL Database

    User->>Frontend: Submit form (e.g. new item)
    Frontend->>Backend: HTTP POST /items with JSON payload
    Backend->>Backend: Validate & parse request data
    Backend->>DB: INSERT INTO items ...
    DB-->>Backend: Success (or error)
    Backend-->>Frontend: JSON response (success or error)
    Frontend-->>User: Show confirmation or error