added overview doc for react-tornado api

# React Tornado API (Stage 01) - Overview

## File Structure

```bash

.

├── docker-compose.yml

├── documentation

├── react-frontend

│   ├── Dockerfile

│   └── my-react-app

│       ├── package.json

│       ├── public

│       │   ├── favicon.ico

│       │   ├── index.html

│       │   ├── logo192.png

│       │   ├── logo512.png

│       │   ├── manifest.json

│       │   └── robots.txt

│       ├── README.md

│       └── src

│           ├── App.css

│           ├── App.js

│           ├── App.test.js

│           ├── components

│           │   ├── HomeComponent.js

│           │   └── MessageComponent.js

│           ├── index.css

│           ├── index.js

│           ├── logo.svg

│           ├── reportWebVitals.js

│           └── setupTests.js

├── 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

```

## Multi-Container Structure

```yml

# .

services:

  react-frontend:

    build:

      context: ./react-frontend

    volumes:

      - ./react-frontend/my-react-app:/app

    ports:

      - "3000:3000"

    stdin_open: true

    tty: true

    environment:

      - CHOKIDAR_USEPOLLING=true # To support live reloading on mounted volumes

    command: ["npm", "start"]

    depends_on:

      - tornado-backend

  tornado-backend:

    build: ./tornado-backend

    links:

      - postgres

    ports:

      - "8888:8888"

    command: --db_host=postgres

  postgres:

    image: postgres:10.3

    environment:

      POSTGRES_USER: blog

      POSTGRES_PASSWORD: blog

      POSTGRES_DB: blog

    ports:

      - "5432:5432"

```

## Visualization

```mermaid

graph TD

    subgraph Blog Service

        TornadoServer["Tornado Server"]

        Templates["HTML Templates (Jinja-like)"]

        StaticAssets["Static Assets (CSS/JS)"]

        APIEndpoint["API Endpoint /message"]

    end

    subgraph "React (frontend)<br>Service"

        ReactServer["React Server"]

        indexJs["index.js"]

        indexCss["index.css"]

        AppJs["App.js"]

        AppCss["App.css"]

        MessageComponent["MessageComponent.js"]

    end

    subgraph Database Service 

        PostgreSQL["PostgreSQL Database"]

    end

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

    User["User"] -->|HTTP Requests<br>Port 3000| ReactServer

    ReactServer -->|Renders| indexJs

    indexJs -->|Imports| indexCss

    indexJs -->|Imports| AppJs

    AppJs -->|Imports| AppCss

    AppJs -->|Uses| MessageComponent

    MessageComponent -->|Fetches API<br>via Proxy| TornadoServer

    TornadoServer -->|Renders| Templates

    TornadoServer -->|Serves| StaticAssets

    TornadoServer -->|Serves API<br>/message| APIEndpoint

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

```

Note, to use react live reloading during development specify the proxy in the `./react-frontend/my-react-app/package.json` file, i.e., use, e.g.,

```json

  "name": "app",

  "version": "0.1.0",

  "private": true,

  "proxy": "http://tornado-backend:8888",

//   ...

```

 No newline at end of file