README.md

# 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

## Apporach

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.

### 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`.

### 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`.

### 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`

### 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

## 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 -s aidatho_tc_web_app_presentation.md -o aidatho_tc_web_app_presentation.html --include-in-header=header.html --slide-level=2 --citeproc --csl=apa-5th-edition.csl --bibliography=references.bib --verbose
```