• “A web application (or web app) is application software that is created with web technologies and runs via a web browser.” (Wikipedia contributors, 2025)
• Web application structure:
  • Frontend: Client-side interface (HTML, CSS, JavaScript, and/or JavaScript libraries like React, Angular, or Vue.js, see also)
  • Backend: Server-side logic (e.g., Python Tornado, Node.js with Express, Django).
  • Database: Stores and retrieves data (e.g., PostgreSQL, MySQL, MongoDB).
• Key Components:
  1. Client-Side: Handles UI and user interactions.
  2. Server-Side: Processes business logic and interacts with the database.
  3. Database: Persistent storage of information.

1. Monolithic Architecture
   • Single, unified codebase for frontend, backend, and database.
   • E.g., Flask (Python) with Jinja templates and PostgreSQL.
   • 🙂: Simplicity, easy deployment for small projects.
   • 😐: Harder to scale; maintenance can become complex as the project grows.
2. Frontend/Backend Separation
   • Frontend and backend are decoupled and communicate via APIs (e.g., REST or GraphQL).
   • E.g., React or Vue.js for frontend, Tornado or FastAPI (Python) for backend.
   • 🙂: Scalability, flexible tech stack, improved performance.
     • 👉🏼 Suits well with containerization.
   • 😐: Requires API design and coordination.

• Docker is a platform for developing, shipping, and running applications inside lightweight, portable containers.
• A container is a standardized unit that packages an application along with its dependencies, environment variables, and configuration.
• Benefits:
  • Consistency: “It runs on my machine” actually works on every machine.
  • Isolation: Prevents conflicts between different environments or services.
  • Portability: Containers can be moved across systems (e.g., from development to production) without changes.
• Key Concepts:
  • Image: A blueprint of the container (think: frozen snapshot of the app + config).
  • Container: A running instance of an image.
  • Dockerfile: Script to define how to build the image.
  • Docker Compose: Tool to define and run multi-container apps.
• 👉🏼 Docker Get Started

• What is it? “Tornado is a scalable, non-blocking web server and web application framework written in Python.[2] It was developed for use by FriendFeed; the company was acquired by Facebook in 2009 and Tornado was open-sourced soon after.” (Wikipedia contributors, 2024)
• What can it do? “Tornado is noted for its high performance. Its design enables handling a large number of concurrent connections (i.e., tries to solve the”C10k problem”).” (Wikipedia contributors, 2024)
• In principle, Tornado is a web server and a web framework,
  • it can be used to connect to backend services and to…
  • render HTML templates, enabling basic UI rendering
  • 👉🏼 See: Tornado blog demo on GitHub
• Resources:
  • The most interesting resources for learning/referencing Tornado:
    • https://www.tornadoweb.org/en/stable/
    • Textbook: Dory, Parrish, & Berg (2012)
  • See also the tornado GitHub repository

• The Tornado Blog Demo can be packaged into a Docker containers to ensure consistent development and deployment.
• Structure:
  • One container runs the Tornado application.
  • Another container runs the PostgreSQL database.
• Docker Compose is used to orchestrate both services.
• See also the tornado GitHub repository

postgres:
  image: postgres:10.3
  environment:
    POSTGRES_USER: blog
    POSTGRES_PASSWORD: blog
    POSTGRES_DB: blog
  ports:
    - "3306"
blog:
  build: .
  links:
    - postgres
  ports:
    - "8888:8888"
  command: --db_host=postgres

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

• Introduction:
  • React is a JavaScript library developed by Facebook for building fast and interactive user interfaces (UIs) for web and mobile applications.
  • It follows a component-based architecture, enabling developers to build reusable UI components.
• React for Frontend Development:
  • Ideal for dynamic and interactive UIs, such as dashboards or real-time data visualizations.
  • Suitable for building Single Page Applications (SPAs), where content updates dynamically without full page reloads.
• Integration with Backends:
  • Communicates with backends (e.g., Tornado) via APIs like REST or GraphQL.
  • Use libraries like Axios or Fetch for data fetching.

• There is a wealth of resources about React!
• Selected interesting resources for learning/referencing React:
  • https://react.dev
  • https://create-react-app.dev/
  • w3schools
• There are even more resources for projects, reusable components, etc.
  • https://github.com/topics/react
• Notes on syntax:
  • React is based on JavaScript, so the JavaScript syntax can be used, but it is cumbersome.
  • It is more common to use JSX (JavaScript XML) or TypeScript.

1. Development:
   • Set up the project using tools like create-react-app or Vite.
   • Write components using JSX or TypeScript.
   • Test locally with npm start (serves the app on localhost:3000).
2. Build:
   • Run npm run build to create a production-optimized bundle (static HTML/CSS/JS in build/).
3. Deployment
   • Serve the production-optimized bunlde e.g. via nginx in
     • /data/www
     • /usr/share/nginx/html

Create React App (CRA):

• Tool provided by the React team to quickly scaffold a new React project.
• Includes pre-configured Webpack, Babel, ESLint, and testing setup.
• Use: npx create-react-app my-app
  • 🙂 Good for beginners, stable, batteries-included.
  • 😐 Slow dev server and build times.
  • 😐 Lacks support for modern tooling (e.g., Vite, ES modules, SSR).

More Modern Alternatives:

• Vite (recommended)
  • Great DX (developer experience).
  • React template: npm create vite@latest my-app – –template react
• Next.js
  • Full-stack React framework.
  • Best for production apps with routing, SEO, etc.

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