updated presentation

    User["User"] -->|HTTP Requests<br>Port 8888| TornadoServer

    TornadoServer -->|Renders| Templates

    TornadoServer -->|Serves| StaticAssets

    TornadoServer -->|Async Queries<br>Port 5432| PostgreSQL

    TornadoServer -->|Async Queries<br>Port 3306| PostgreSQL

</pre>

</section></section>

<section>

</ul>

</div>

</section>

<section id="react-visualization"

<section id="react-app-development-visualization"

class="slide level2 very-small-header">

<h2 class="very-small-header">React Visualization</h2>

<h2 class="very-small-header">React App Development Visualization</h2>

<pre class="mermaid mermaid-container">

graph TD

    index.html --> index.js

</section>

<section id="development-with-create-react-app"

class="slide level2 small-header">

<h2 class="small-header">Development with <br>

<code>create-react-app</code></h2>

<h2 class="small-header">Development with create-react-app</h2>

<div style="font-size: 20pt; text-align: left">

<p>Create React App (CRA):</p>

<ul>

</section>

<section id="containerization-1" class="slide level2 small-header">

<h2 class="small-header">Containerization</h2>

<div style="font-size: 20pt">

<div style="font-size: 20pt; text-align: left">

<p><strong>Development</strong></p>

<ul>

<li>Each component runs in its own Docker container:

<ul>

<li>React frontend with live-reload dev server</li>

<li>Tornado backend (Python)</li>

<li>PostgreSQL database</li>

</ul></li>

<li>All services communicate over a shared Docker network</li>

<li>The backend connects directly to the database container</li>

<li>Hot-reloading enables fast development and testing</li>

</ul>

<p><strong>Deployment</strong></p>

<ul>

<li>React app is built into static files and served as static files</li>

<li>Containers:

<ul>

<li>Tornado backend</li>

<li>PostgreSQL database</li>

<li>(Optional) Add a reverse proxy:

<ul>

<li>In a <strong>full-stack setup</strong>, we containerize both the

<strong>React frontend</strong> and the <strong>Tornado

backend</strong>.</li>

<li>Each service runs in its own container.</li>

<li>During development, React runs on a live-reload dev server.</li>

<li>Backend connects to a database container (e.g., PostgreSQL).</li>

<li>Services communicate via a shared Docker network.</li>

<li>Use Nginx to route requests between users and backend services</li>

<li>Improves performance, SSL termination, and routing flexibility</li>

</ul></li>

</ul></li>

</ul>

</div>

</section>

---

## React Visualization {.very-small-header}

## React App Development Visualization {.very-small-header}

<pre class="mermaid mermaid-container">

graph TD

---

## Development with <br> `create-react-app` {.small-header}

## Development with create-react-app {.small-header}

<div style="font-size: 20pt; text-align: left">

## Containerization {.small-header}

<div style="font-size: 20pt">

<div style="font-size: 20pt; text-align: left">

- In a **full-stack setup**, we containerize both the **React frontend** and the **Tornado backend**.

- Each service runs in its own container.

- During development, React runs on a live-reload dev server.

- Backend connects to a database container (e.g., PostgreSQL).

- Services communicate via a shared Docker network.

**Development**

- Each component runs in its own Docker container:

  - React frontend with live-reload dev server

  - Tornado backend (Python)

  - PostgreSQL database

- All services communicate over a shared Docker network

- The backend connects directly to the database container

- Hot-reloading enables fast development and testing

**Deployment**

- React app is built into static files and served as static files

- Containers:

  - Tornado backend

  - PostgreSQL database

  - (Optional) Add a reverse proxy:

    - Use Nginx to route requests between users and backend services

    - Improves performance, SSL termination, and routing flexibility

</div>