# 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* for 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 and for educational purposes and not state of the art best practice,

**Important**: The documentation for the development and deployment of the Tornado Blog Demo (with react for the frontend) can be found here: [React Tornado Blog Development and Deployment](./doc/react_tornado_blog_dev_dep.md)

## Approach

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

Use, e.g., `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` to `react-tornado-blog-stage-04`
* 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 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
```