# aidaho-tinkering-club-web-app

## Overview

This is the GitLab repository prepared to illustrate the development of a (full-stack) web application with Python Tornado and a Postgresql database in the backend and React in the frontend as a multi-container Docker application.

Please check out the GitLab page: [Gitlab aidaho-tinkering-club-web-app/page/index.html](https://mmoessler.aidaho-pages.uni-hohenheim.de/aidaho-tinkering-club-web-app/)

Note: This is "work in progress"!

Potential future steps:

* Deployment procedure
* Addition of an nginx revers proxy

## Approach

This repository contains several branches, with each branch containing a different step in the development of the application.

Use `git diff tornado-backend-stage-01:tornado-backend/blog.py react-tornado-api-stage-01:tornado-backend/blog.py` to compare individual files across branches.

### Stage/Step 1

* Starting point is the [Tornado blog demo on GitHub](https://github.com/tornadoweb/tornado/blob/master/demos/blog/blog.py).
* The replication of the Tornado blog demo can be found on branch `tornado-backend-stage-01`.

### Stage/Step 2

* React frontend on top of the Tornado backend.
* This can be found on branch `react-frontend-stage-01`.
* Main changes:
  * Addition of the `react-frontend` directory.
  * Addition of the `react-frontend/my-react-app` directory with the react source files created by `create-react-app`.

### Stage/Step 3

* Tornado backend as an API for the react frontend.
* This can be found on branch `react-tornado-api-stage-01`.
* Main changes:
  * Addition of `react-frontend/my-react-app/src/components/MessageComponent.js` with an API call to the Tornado backend
  * Update of `tornado-backend/blog.py` with a route and handler to handle requests from `MessageComponent.js`

### Stage/Step 4

* (Full-stack) replication of the Tornado blog demo with react (frontend) and Tornado (backend).
* This can be found on branch `react-tornado-blog-stage-01`.
* Main changes:
  * Addition of additinal components in the frontend
  * Addition of additional routes and handlers in the backend

### Stage/Step 5

* (Full-stack) replication of the Tornado blog demo with react (frontend), Tornado (backend) and PostgreSQL (backend) served via nginx.
* Extension of branch `react-tornado-blog-stage-02`
* Included nginx service as reverse proxy between front and backend
* Added configuration for serving of static pages via nginx service
* Added persistent pg data bind

...

## Further Notes,

The documentations in the `./doc` directory as `.md` file can be rendered to the `./page` direcotry using,

```bash
pandoc -s xyz.md -o ../page/xyz.html --verbose
```

The slide show in the `./page` direcotry can be rendered to the `./page` direcotry using,

```bash
pandoc -t revealjs aidatho_tc_web_app_presentation.md \
  --slide-level=2 \
  --include-in-header=header.html \
  --output=aidatho_tc_web_app_presentation.html \
  --citeproc \
  --csl=apa-5th-edition.csl \
  --bibliography=references.bib \
  --variable revealjs-url=https://cdn.jsdelivr.net/npm/reveal.js@4
```