# techwithtim/fastapi-react-integration architecture

> Architecture diagram of the GitHub repository techwithtim/fastapi-react-integration, 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/techwithtim/fastapi-react-integration
- Repository: https://github.com/techwithtim/fastapi-react-integration

## Overview

The repository contains two separate applications: an authentication service with a React client, and a fruit-management app with a React client and backend. The auth workflow covers registration, token login, and fetching a protected profile; the fruit app displays fruits and submits additions. Dashed links mark relationships whose HTTP wiring is not visible in the supplied excerpts. The README is empty, and the Simple backend implementation was not excerpted.

Main entry points: [`Auth/backend/routers/auth.py`](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/backend/routers/auth.py) (Auth Routes), [`Auth/backend/auth/auth_handler.py`](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/backend/auth/auth_handler.py) (Auth Logic), [`Auth/frontend/src/contexts/AuthContext.jsx`](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/frontend/src/contexts/AuthContext.jsx) (Auth State), [`Auth/frontend/src/App.jsx`](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/frontend/src/App.jsx) (Auth App)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_auth_ui["Authentication UI"]
  node_auth_app["Auth App<br/>[App.jsx]"]
  node_register["Registration Form<br/>[Register.jsx]"]
  node_login["Login Form<br/>[Login.jsx]"]
  node_profile["User Profile<br/>[UserProfile.jsx]"]
  node_auth_context["Auth State<br/>[AuthContext.jsx]"]
  node_auth_api["Auth API Client<br/>[api.js]"]
end

subgraph group_auth_service["Authentication Service"]
  node_auth_entry["API App<br/>[main.py]"]
  node_auth_routes["Auth Routes<br/>[auth.py]"]
  node_user_routes["Profile Route<br/>[user.py]"]
  node_auth_logic["Auth Logic<br/>[auth_handler.py]"]
  node_user_model["User Model<br/>[models.py]"]
  node_auth_schemas["Auth Schemas<br/>[schemas.py]"]
  node_auth_db[("SQLite Database<br/>[database.py]")]
end

subgraph group_fruit_ui["Fruit Management UI"]
  node_fruit_app["Fruit App<br/>[App.jsx]"]
  node_fruit_list["Fruit List<br/>[Fruits.jsx]"]
  node_fruit_form["Add Fruit Form<br/>[AddFruitForm.jsx]"]
  node_fruit_api["Fruit API Client<br/>[api.js]"]
end

subgraph group_fruit_service["Fruit Service"]
  node_fruit_backend["Fruit Backend<br/>[main.py]"]
end

node_person(("User"))
node_fruit_user(("User"))

node_auth_app -->|"renders"| node_register
node_auth_app -->|"renders"| node_login
node_auth_app -->|"renders"| node_profile
node_register -->|"uses"| node_auth_context
node_login -->|"uses"| node_auth_context
node_profile -->|"uses"| node_auth_context
node_auth_context -->|"calls"| node_auth_api
node_auth_api -.->|"HTTP requests"| node_auth_entry
node_auth_entry -->|"registers"| node_auth_routes
node_auth_entry -->|"registers"| node_user_routes
node_auth_routes -->|"calls"| node_auth_logic
node_auth_routes -->|"gets session"| node_auth_db
node_auth_routes -->|"creates"| node_user_model
node_auth_routes -->|"validates"| node_auth_schemas
node_user_routes -->|"authenticates"| node_auth_logic
node_user_routes -->|"returns profile"| node_auth_schemas
node_auth_logic -->|"queries"| node_auth_db
node_auth_logic -->|"queries"| node_user_model
node_auth_logic -->|"builds token data"| node_auth_schemas
node_auth_db -->|"creates tables"| node_user_model
node_fruit_app -->|"renders"| node_fruit_list
node_fruit_list -->|"renders"| node_fruit_form
node_fruit_list -->|"calls"| node_fruit_api
node_fruit_api -.->|"HTTP requests"| node_fruit_backend

click node_auth_app "https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/frontend/src/App.jsx"
click node_register "https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/frontend/src/components/Register.jsx"
click node_login "https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/frontend/src/components/Login.jsx"
click node_profile "https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/frontend/src/components/UserProfile.jsx"
click node_auth_context "https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/frontend/src/contexts/AuthContext.jsx"
click node_auth_api "https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/frontend/src/api.js"
click node_auth_entry "https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/main.py"
click node_auth_routes "https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/backend/routers/auth.py"
click node_user_routes "https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/backend/routers/user.py"
click node_auth_logic "https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/backend/auth/auth_handler.py"
click node_user_model "https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/backend/models.py"
click node_auth_schemas "https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/backend/schemas.py"
click node_auth_db "https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/backend/database.py"
click node_fruit_app "https://github.com/techwithtim/fastapi-react-integration/blob/main/Simple/frontend/src/App.jsx"
click node_fruit_list "https://github.com/techwithtim/fastapi-react-integration/blob/main/Simple/frontend/src/components/Fruits.jsx"
click node_fruit_form "https://github.com/techwithtim/fastapi-react-integration/blob/main/Simple/frontend/src/components/AddFruitForm.jsx"
click node_fruit_api "https://github.com/techwithtim/fastapi-react-integration/blob/main/Simple/frontend/src/api.js"
click node_fruit_backend "https://github.com/techwithtim/fastapi-react-integration/blob/main/Simple/backend/main.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_auth_app,node_register,node_login,node_profile,node_auth_context,node_auth_api,node_person,node_fruit_user toneBlue
class node_auth_entry,node_auth_routes,node_user_routes,node_auth_logic,node_user_model,node_auth_schemas,node_auth_db toneAmber
class node_fruit_app,node_fruit_list,node_fruit_form,node_fruit_api toneMint
class node_fruit_backend toneRose
```

## Components

### Authentication UI

- [Auth App](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/frontend/src/App.jsx): `Auth/frontend/src/App.jsx`
- [Registration Form](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/frontend/src/components/Register.jsx): `Auth/frontend/src/components/Register.jsx`
- [Login Form](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/frontend/src/components/Login.jsx): `Auth/frontend/src/components/Login.jsx`
- [User Profile](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/frontend/src/components/UserProfile.jsx): `Auth/frontend/src/components/UserProfile.jsx`
- [Auth State](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/frontend/src/contexts/AuthContext.jsx): `Auth/frontend/src/contexts/AuthContext.jsx`
- [Auth API Client](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/frontend/src/api.js): `Auth/frontend/src/api.js`

### Authentication Service

- [API App](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/main.py): `Auth/main.py`
- [Auth Routes](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/backend/routers/auth.py): `Auth/backend/routers/auth.py`
- [Profile Route](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/backend/routers/user.py): `Auth/backend/routers/user.py`
- [Auth Logic](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/backend/auth/auth_handler.py): `Auth/backend/auth/auth_handler.py`
- [User Model](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/backend/models.py): `Auth/backend/models.py`
- [Auth Schemas](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/backend/schemas.py): `Auth/backend/schemas.py`
- [SQLite Database](https://github.com/techwithtim/fastapi-react-integration/blob/main/Auth/backend/database.py): `Auth/backend/database.py`

### Fruit Management UI

- [Fruit App](https://github.com/techwithtim/fastapi-react-integration/blob/main/Simple/frontend/src/App.jsx): `Simple/frontend/src/App.jsx`
- [Fruit List](https://github.com/techwithtim/fastapi-react-integration/blob/main/Simple/frontend/src/components/Fruits.jsx): `Simple/frontend/src/components/Fruits.jsx`
- [Add Fruit Form](https://github.com/techwithtim/fastapi-react-integration/blob/main/Simple/frontend/src/components/AddFruitForm.jsx): `Simple/frontend/src/components/AddFruitForm.jsx`
- [Fruit API Client](https://github.com/techwithtim/fastapi-react-integration/blob/main/Simple/frontend/src/api.js): `Simple/frontend/src/api.js`

### Fruit Service

- [Fruit Backend](https://github.com/techwithtim/fastapi-react-integration/blob/main/Simple/backend/main.py): `Simple/backend/main.py`

### Other components

- **User**
- **User**

## Connections

- Auth App → Registration Form: renders (evidence: `Auth/frontend/src/App.jsx`)
- Auth App → Login Form: renders (evidence: `Auth/frontend/src/App.jsx`)
- Auth App → User Profile: renders (evidence: `Auth/frontend/src/App.jsx`)
- Registration Form → Auth State: uses (evidence: `Auth/frontend/src/components/Register.jsx`)
- Login Form → Auth State: uses (evidence: `Auth/frontend/src/components/Login.jsx`)
- User Profile → Auth State: uses (evidence: `Auth/frontend/src/components/UserProfile.jsx`)
- Auth State → Auth API Client: calls (evidence: `Auth/frontend/src/contexts/AuthContext.jsx`)
- Auth API Client → API App: HTTP requests
- API App → Auth Routes: registers (evidence: `Auth/main.py`)
- API App → Profile Route: registers (evidence: `Auth/main.py`)
- Auth Routes → Auth Logic: calls (evidence: `Auth/backend/routers/auth.py`)
- Auth Routes → SQLite Database: gets session (evidence: `Auth/backend/routers/auth.py`)
- Auth Routes → User Model: creates (evidence: `Auth/backend/routers/auth.py`)
- Auth Routes → Auth Schemas: validates (evidence: `Auth/backend/routers/auth.py`)
- Profile Route → Auth Logic: authenticates (evidence: `Auth/backend/routers/user.py`)
- Profile Route → Auth Schemas: returns profile (evidence: `Auth/backend/routers/user.py`)
- Auth Logic → SQLite Database: queries (evidence: `Auth/backend/auth/auth_handler.py`)
- Auth Logic → User Model: queries (evidence: `Auth/backend/auth/auth_handler.py`)
- Auth Logic → Auth Schemas: builds token data (evidence: `Auth/backend/auth/auth_handler.py`)
- SQLite Database → User Model: creates tables (evidence: `Auth/backend/database.py`)
- Fruit App → Fruit List: renders (evidence: `Simple/frontend/src/App.jsx`)
- Fruit List → Add Fruit Form: renders (evidence: `Simple/frontend/src/components/Fruits.jsx`)
- Fruit List → Fruit API Client: calls (evidence: `Simple/frontend/src/components/Fruits.jsx`)
- Fruit API Client → Fruit Backend: HTTP requests