added some more documentation

# Some Notes

## Commands

## General

Prepare frontend

The following commands are unix command. 

On a Windows machine you can execute these command in Git bash.

However, you have to make sure that the Docker engin is runnging. I.e., you need to start the Docker Desktop application.

## Development

Build and start the container by using,

```bash

docker compose up --build

```

If all docker container are running you should see something like,

```bash

markus:~/gitlab/yf-web-app$ docker compose ps

WARN[0000] /home/markus/gitlab/yf-web-app/docker-compose.yml: the attribute `version` is obsolete, it will be ignored, please remove it to avoid potential confusion 

NAME                    IMAGE                 COMMAND                  SERVICE    CREATED          STATUS          PORTS

yf-web-app-backend-1    yf-web-app-backend    "python app.py"          backend    14 seconds ago   Up 12 seconds   0.0.0.0:8000->8000/tcp, [::]:8000->8000/tcp

yf-web-app-db-1         postgres              "docker-entrypoint.s…"   db         14 seconds ago   Up 13 seconds   5432/tcp

yf-web-app-frontend-1   yf-web-app-frontend   "docker-entrypoint.s…"   frontend   14 seconds ago   Up 12 seconds   0.0.0.0:3000->3000/tcp, [::]:3000->3000/tcp

```

Most likele the frontend and the backend container do not start initially.

### Fix Frontend

Install all necessary packages for the react frontend,

```bash

docker run -it --rm -v $(pwd)/frontend:/app -w /app node:20 bash

```

Check database

then run,

```bash

docker exec -it yf-web-app-db-1 psql -U postgres -d postgres

npm install

```

### Fix Backend

Restart the backend container,

```bash

docker compose restart backend

```

### Add NVIDA stock price data to database

To download the NVIDIA stock price data and add it to the database run the following command

```bash

curl -X POST http://localhost:8000/api/nvda/fetch

```

### Make changes

* Make changes in the frontend, e.g., in `./frontend/src/App.js`

* Make changes in the backend, e.g., in `./backend/app.py`

### Check results

Check the running application by visiting

[http://localhost:3000](http://localhost:3000)

## Deployment

### Build Frontend

Use the node container to build the app, i.e., run

```bash

docker run -it --rm -v $(pwd)/frontend:/app -w /app node:20 bash

```

then run,

```bash

npm run build

```

### Start production container

Start the production container application by,

```bash

docker compose -f docker-compose.prod.yml up

```

### Check results

Check the running application by visiting

[http://localhost](http://localhost)

## Some Other Commands

Prepare frontend

```bash

docker run -it --rm -v $(pwd)/frontend:/app -w /app node:20 bash

```

Insert data into database

curl -X POST http://localhost:8000/api/nvda/fetch

```

Check database

```bash

docker exec -it yf-web-app-db-1 psql -U postgres -d postgres

```

Use production setup based on nginxx

```bash

docker compose -f docker-compose.prod.yml up

```

## Vidualization

## Some Other Vidualizations

### Development

# Web Application Setup Guide (Unix/Linux/macOS)

This guide provides clear instructions to set up, develop, and deploy your web application on a Unix-like system using Docker and the terminal.

---

## 📋 Prerequisites

Ensure the following tools are installed and available in your terminal:

- [Docker](https://docs.docker.com/get-docker/)

- [Docker Compose](https://docs.docker.com/compose/install/)

- `curl`

> 💡 Make sure Docker is running before executing any Docker-related commands.

---

## 🛠️ Development Setup

### 1. Start Development Environment

From the project root directory, build and run the containers:

```bash

docker compose up --build

```

Check the status of your containers:

```bash

docker compose ps

```

You should see output like this:

```bash

NAME                    IMAGE                 ...    PORTS

yf-web-app-backend-1    yf-web-app-backend    ...    0.0.0.0:8000->8000/tcp

yf-web-app-db-1         postgres              ...    5432/tcp

yf-web-app-frontend-1   yf-web-app-frontend   ...    0.0.0.0:3000->3000/tcp

```

> ⚠️ If the frontend or backend containers don’t start, follow the fixes below.

---

### 2. Fix Frontend (Install Node Modules)

Open a Node.js container shell:

```bash

docker run -it --rm -v $(pwd)/frontend:/app -w /app node:20 bash

```

Inside the container:

```bash

npm install

```

Then exit with `exit`.

---

### 3. Fix Backend (Restart)

Restart the backend container:

```bash

docker compose restart backend

```

---

### 4. Load NVIDIA Stock Data

Insert data via the backend API:

```bash

curl -X POST http://localhost:8000/api/nvda/fetch

```

---

### 5. Make Code Changes

- **Frontend**: Edit `./frontend/src/App.js`

- **Backend**: Edit `./backend/app.py`

---

### 6. View Running Application

Open your browser and navigate to [http://localhost:3000](http://localhost:3000)

---

## 🚀 Deployment

### 1. Build Frontend for Production

Use a Node.js container to build the frontend:

```bash

docker run -it --rm -v $(pwd)/frontend:/app -w /app node:20 bash

```

Inside the container:

```bash

npm run build

```

Exit with `exit`.

---

### 2. Start Production Environment

```bash

docker compose -f docker-compose.prod.yml up

```

Then visit [http://localhost](http://localhost) in your browser.

---

## 🔍 Useful Commands

### Check PostgreSQL Database

```bash

docker exec -it yf-web-app-db-1 psql -U postgres -d postgres

```

### Re-fetch NVIDIA Data

```bash

curl -X POST http://localhost:8000/api/nvda/fetch

```

### Start Production Setup with NGINX

```bash

docker compose -f docker-compose.prod.yml up

```

---

## 📊 Architecture Diagrams

### Development Mode

```mermaid

graph TD

    User["User Browser"]

    Frontend["React Frontend (Port 3000)"]

    Backend["Python Tornado Backend (Port 8000)"]

    Database["PostgreSQL Database (Port 5432)"]

    subgraph Docker Network ["Docker Compose Network: app-network"]

        Frontend -->|"HTTP Request to /api/nvda"| Backend

        Backend -->|"SQL SELECT/INSERT"| Database

        Backend -->|"JSON Response"| Frontend

    end

    User -->|"Accesses localhost:3000"| Frontend

    Frontend -->|"Renders chart from API data"| User

```

### Production Mode

```mermaid

graph TD

    User["User Browser"]

    NGINX["NGINX (Port 80)"]

    Frontend["Static React Files"]

    Backend["Python Tornado Backend (Port 8000)"]

    Database["PostgreSQL (Port 5432)"]

    subgraph Docker Network: app-network

        NGINX -->|"Serves static files"| Frontend

        NGINX -->|"Proxies /api requests"| Backend

        Backend -->|"SQL Queries"| Database

    end

    User -->|"HTTP GET /"| NGINX

    User -->|"HTTP GET /api/nvda"| NGINX

```

---

## ✅ Done!

Your development or production environment is now ready. Happy developing!

# Web Application Setup Guide (Windows + Git Bash)

This guide provides step-by-step instructions to set up, develop, and deploy your web application using Docker and Git Bash on Windows.

---

## 📋 Prerequisites

Ensure the following are installed and running:

- [Docker Desktop for Windows](https://www.docker.com/products/docker-desktop)

- Git Bash (installed via [Git for Windows](https://gitforwindows.org/))

> 💡 Start Docker Desktop before executing any Docker commands.

---

## 🛠️ Development Setup

### 1. Start Development Environment

Open Git Bash in the project root and run:

```bash

docker compose up --build

```

To confirm containers are running:

```bash

docker compose ps

```

Expected output (example):

```bash

NAME                    IMAGE                 ...    PORTS

yf-web-app-backend-1    yf-web-app-backend    ...    0.0.0.0:8000->8000/tcp

yf-web-app-db-1         postgres              ...    5432/tcp

yf-web-app-frontend-1   yf-web-app-frontend   ...    0.0.0.0:3000->3000/tcp

```

> ⚠️ The frontend or backend containers may not start correctly on the first run.

---

### 2. Fix Frontend (Install Node Modules)

Open a Node.js container shell:

```bash

docker run -it --rm -v ${PWD}/frontend:/app -w /app node:20 bash

```

Inside the container, install dependencies:

```bash

npm install

```

Exit the container with `exit`.

---

### 3. Fix Backend (Restart)

Restart the backend container:

```bash

docker compose restart backend

```

---

### 4. Load NVIDIA Stock Data

Insert data via backend API:

```bash

curl -X POST http://localhost:8000/api/nvda/fetch

```

---

### 5. Make Changes

- **Frontend**: `./frontend/src/App.js`

- **Backend**: `./backend/app.py`

---

### 6. Check Running App

Visit [http://localhost:3000](http://localhost:3000) in your browser.

---

## 🚀 Deployment

### 1. Build Frontend for Production

Open a Node.js container shell:

```bash

docker run -it --rm -v ${PWD}/frontend:/app -w /app node:20 bash

```

Inside the container:

```bash

npm run build

```

Exit the container with `exit`.

---

### 2. Start Production Environment

```bash

docker compose -f docker-compose.prod.yml up

```

Access the production app at [http://localhost](http://localhost).

---

## 🔍 Useful Commands

### Check Database

```bash

docker exec -it yf-web-app-db-1 psql -U postgres -d postgres

```

### Re-run Data Insert

```bash

curl -X POST http://localhost:8000/api/nvda/fetch

```

### Production Mode (NGINX)

```bash

docker compose -f docker-compose.prod.yml up

```

---

## 📊 Architecture Diagrams

### Development Mode

```mermaid

graph TD

    User["User Browser"]

    Frontend["React Frontend (Port 3000)"]

    Backend["Python Tornado Backend (Port 8000)"]

    Database["PostgreSQL Database (Port 5432)"]

    subgraph Docker Network ["Docker Compose Network: app-network"]

        Frontend -->|"HTTP Request to /api/nvda"| Backend

        Backend -->|"SQL SELECT/INSERT"| Database

        Backend -->|"JSON Response"| Frontend

    end

    User -->|"Accesses localhost:3000"| Frontend

    Frontend -->|"Renders chart from API data"| User

```

### Production Mode

```mermaid

graph TD

    User["User Browser"]

    NGINX["NGINX (Port 80)"]

    Frontend["Static React Files"]

    Backend["Python Tornado Backend (Port 8000)"]

    Database["PostgreSQL (Port 5432)"]

    subgraph Docker Network: app-network

        NGINX -->|"Serves static files"| Frontend

        NGINX -->|"Proxies /api requests"| Backend

        Backend -->|"SQL Queries"| Database

    end

    User -->|"HTTP GET /"| NGINX

    User -->|"HTTP GET /api/nvda"| NGINX

```

---

## ✅ Done!

Your application should now be up and running in development or production mode. Happy coding!