# ajayshivanagol/react-fastapi-postgresql architecture

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

- Interactive diagram: https://gitdiagram.com/ajayshivanagol/react-fastapi-postgresql
- Repository: https://github.com/ajayshivanagol/react-fastapi-postgresql

## Overview

This is a small blog web application with a React sign-in/sign-up interface and a FastAPI backend. The main user workflow is account creation or login, followed by authenticated blog listing and blog CRUD operations backed by a relational database. The README documents local PostgreSQL use. Some backend routers and model details were not sampled, so their internal behavior is represented only where the file tree and sampled wiring support it.

Main entry points: [`backend/blog/main.py`](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/main.py) (FastAPI app), [`backend/blog/routers/blog.py`](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/routers/blog.py) (Blog routes), [`backend/blog/routers/Login.py`](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/routers/Login.py) (Login routes), [`backend/blog/routers/user.py`](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/routers/user.py) (User routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web interface"]
  node_app["React app<br/>[App.js]"]
  node_signin["Sign in<br/>[SignIn.js]"]
  node_signup["Sign up<br/>[SignUp.js]"]
  node_blogui["Blog view<br/>[Blog.js]"]
end

subgraph group_api["API and routing"]
  node_apiapp["FastAPI app<br/>[main.py]"]
  node_blogroutes["Blog routes<br/>[blog.py]"]
  node_schemas["API schemas<br/>[schemas.py]"]
end

subgraph group_identity["Identity"]
  node_loginroute["Login routes<br/>[Login.py]"]
  node_userroutes["User routes<br/>[user.py]"]
  node_oauth["OAuth validation<br/>[oauth2.py]"]
  node_tokens["Token handling<br/>[token.py]"]
  node_hashing["Password hashing<br/>[hashing.py]"]
end

subgraph group_persistence["Blog data"]
  node_blogrepo["Blog repository<br/>[blog.py]"]
  node_userrepo["User repository<br/>[user.py]"]
  node_database["Database session<br/>[database.py]"]
  node_models["ORM models<br/>[models.py]"]
end

node_visitor(("Visitor"))
node_postgres[("PostgreSQL")]

node_visitor -->|"uses"| node_app
node_app -->|"routes to"| node_signin
node_app -->|"routes to"| node_signup
node_signin -->|"shows after login"| node_blogui
node_signin -->|"posts credentials"| node_loginroute
node_signup -->|"posts registration"| node_userroutes
node_blogui -->|"requests blogs"| node_blogroutes
node_apiapp -->|"registers router"| node_blogroutes
node_apiapp -->|"registers router"| node_loginroute
node_apiapp -->|"registers router"| node_userroutes
node_apiapp -->|"creates tables"| node_database
node_apiapp -->|"uses metadata"| node_models
node_loginroute -->|"issues tokens"| node_tokens
node_loginroute -->|"looks up user"| node_userrepo
node_loginroute -->|"checks password"| node_hashing
node_userroutes -->|"delegates user work"| node_userrepo
node_userroutes -->|"hashes password"| node_hashing
node_blogroutes -->|"requires authentication"| node_oauth
node_oauth -->|"verifies token"| node_tokens
node_blogroutes -->|"delegates blog work"| node_blogrepo
node_blogroutes -->|"validates responses"| node_schemas
node_blogrepo -->|"queries"| node_models
node_userrepo -->|"queries"| node_models
node_blogrepo -->|"uses session"| node_database
node_userrepo -->|"uses session"| node_database
node_database -->|"reads and writes"| node_postgres

click node_app "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/frontend/src/App.js"
click node_signin "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/frontend/src/components/signIn/SignIn.js"
click node_signup "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/frontend/src/components/signUp/SignUp.js"
click node_blogui "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/frontend/src/components/Blos/Blog.js"
click node_apiapp "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/main.py"
click node_blogroutes "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/routers/blog.py"
click node_loginroute "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/routers/Login.py"
click node_userroutes "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/routers/user.py"
click node_oauth "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/oauth2.py"
click node_tokens "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/token.py"
click node_hashing "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/hashing.py"
click node_blogrepo "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/repository/blog.py"
click node_userrepo "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/repository/user.py"
click node_database "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/database.py"
click node_models "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/models.py"
click node_schemas "https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/schemas.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_app,node_signin,node_signup,node_blogui toneBlue
class node_apiapp,node_blogroutes,node_schemas,node_postgres toneAmber
class node_loginroute,node_userroutes,node_oauth,node_tokens,node_hashing toneMint
class node_blogrepo,node_userrepo,node_database,node_models toneRose
class node_visitor toneIndigo
```

## Components

### Web interface

- [React app](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/frontend/src/App.js): `frontend/src/App.js`
- [Sign in](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/frontend/src/components/signIn/SignIn.js): `frontend/src/components/signIn/SignIn.js`
- [Sign up](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/frontend/src/components/signUp/SignUp.js): `frontend/src/components/signUp/SignUp.js`
- [Blog view](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/frontend/src/components/Blos/Blog.js): `frontend/src/components/Blos/Blog.js`

### API and routing

- [FastAPI app](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/main.py): `backend/blog/main.py`
- [Blog routes](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/routers/blog.py): `backend/blog/routers/blog.py`
- [API schemas](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/schemas.py): `backend/blog/schemas.py`

### Identity

- [Login routes](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/routers/Login.py): `backend/blog/routers/Login.py`
- [User routes](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/routers/user.py): `backend/blog/routers/user.py`
- [OAuth validation](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/oauth2.py): `backend/blog/oauth2.py`
- [Token handling](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/token.py): `backend/blog/token.py`
- [Password hashing](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/hashing.py): `backend/blog/hashing.py`

### Blog data

- [Blog repository](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/repository/blog.py): `backend/blog/repository/blog.py`
- [User repository](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/repository/user.py): `backend/blog/repository/user.py`
- [Database session](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/database.py): `backend/blog/database.py`
- [ORM models](https://github.com/ajayshivanagol/react-fastapi-postgresql/blob/main/backend/blog/models.py): `backend/blog/models.py`

### Other components

- **Visitor**
- **PostgreSQL**

## Connections

- Visitor → React app: uses
- React app → Sign in: routes to
- React app → Sign up: routes to
- Sign in → Blog view: shows after login
- Sign in → Login routes: posts credentials
- Sign up → User routes: posts registration
- Blog view → Blog routes: requests blogs
- FastAPI app → Blog routes: registers router
- FastAPI app → Login routes: registers router
- FastAPI app → User routes: registers router
- FastAPI app → Database session: creates tables
- FastAPI app → ORM models: uses metadata
- Login routes → Token handling: issues tokens
- Login routes → User repository: looks up user
- Login routes → Password hashing: checks password
- User routes → User repository: delegates user work
- User routes → Password hashing: hashes password
- Blog routes → OAuth validation: requires authentication
- OAuth validation → Token handling: verifies token
- Blog routes → Blog repository: delegates blog work
- Blog routes → API schemas: validates responses
- Blog repository → ORM models: queries
- User repository → ORM models: queries
- Blog repository → Database session: uses session
- User repository → Database session: uses session
- Database session → PostgreSQL: reads and writes