Markus Mößler
April 30, 2025
flowchart TD
User["👤 User"] -->|Accesses| Browser["🌐 Web Browser"]
Browser -->|Sends Request| Server["🖥️ Application Server"]
Server -->|Processes Request| Backend["⚙️ Backend Services"]
Backend -->|Queries| Database["💾 Database"]
Backend -->|Calls APIs| ExternalAPI["🔗 External APIs"]
Backend -->|Sends Response| Server
Server -->|Sends Response| Browser
Browser -->|Displays Data| User
style User fill:#f9f,stroke:#333,stroke-width:2px
style Browser fill:#bbf,stroke:#333,stroke-width:2px
style Server fill:#afa,stroke:#333,stroke-width:2px
style Backend fill:#faa,stroke:#333,stroke-width:2px
style Database fill:#ff9,stroke:#333,stroke-width:2px
style ExternalAPI fill:#bff,stroke:#333,stroke-width:2px
.
├── documentation
├── README.md
└── tornado-backend
├── blog.py
├── docker-compose.yml
├── Dockerfile
├── README.md
├── requirements.txt
├── schema.sql
├── static
│ └── blog.css
└── templates
├── archive.html
├── base.html
├── compose.html
├── create_author.html
├── entry.html
├── feed.xml
├── home.html
├── login.html
└── modules
└── entry.html
graph TD
subgraph Blog Service
TornadoServer["Tornado Server"]
Templates["HTML Templates (Jinja-like)"]
StaticAssets["Static Assets (CSS/JS)"]
end
subgraph Database Service
PostgreSQL["PostgreSQL Database"]
end
User["User"] -->|HTTP Requests
Port 8888| TornadoServer
TornadoServer -->|Renders| Templates
TornadoServer -->|Serves| StaticAssets
TornadoServer -->|Async Queries
Port 3306| PostgreSQL
graph TD
index.html --> index.js
index.js --> App.js
App.js --> ComponentA.js
App.js --> ComponentB.js
ComponentA.js --> styles.css
ComponentB.js --> api.js
index.html["index.html
Entry point, mounts React app"]
index.js["index.js
ReactDOM renders App.js"]
App.js["App.js
Root Component"]
ComponentA.js["ComponentA.js
A sub-component"]
ComponentB.js["ComponentB.js
Another sub-component"]
styles.css["styles.css
CSS for ComponentA"]
api.js["api.js
Handles API calls"]
subgraph "Public Folder"
index.html
end
subgraph "Src Folder"
index.js
App.js
ComponentA.js
ComponentB.js
styles.css
api.js
end
create-react-app or
Vite.npm start (serves the app on
localhost:3000).npm run build to create a production-optimized
bundle (static HTML/CSS/JS in build/)./data/www/usr/share/nginx/htmlCreate React App (CRA):
More Modern Alternatives:
Development
Deployment
graph TD
subgraph Docker-Compose
ReactDev["⚛️ React Dev Server (Port 3000)"]
TornadoDev["🌀 Tornado Backend (Port 8888)"]
PostgreSQL["🐘 PostgreSQL DB (Port 5432)"]
end
User["👤 Developer"] -->|Opens Browser| ReactDev
ReactDev -->|API calls| TornadoDev
TornadoDev -->|Queries| PostgreSQL