focusapp/README.md

# FocusApp - Todo Application

Eine moderne, minimalistische Todo-Anwendung mit Drag & Drop, gebaut mit React und ASP.NET Core 8.0.

## 🚀 Features

- **Todo-Verwaltung** - Erstellen, Bearbeiten, Loschen von Aufgaben
- **Drag & Drop** - Intuitive Neuordnung der Aufgaben
- **Dark/Light Mode** - Automatische Theme-Erkennung
- **Responsive Design** - Optimiert fur Desktop und Mobile
- **RESTful API** - Saubere Backend-Architektur

## 📋 Voraussetzungen

- **Docker** und **Docker Compose**
- **MariaDB** (externer Host, z.B. LXC Container)
- **Git**

## 🐳 Deployment

### 1. MariaDB initialisieren (einmalig)

Die FocusApp benötigt eine MariaDB Datenbank. Das Init-Script erstellt die Datenbank, den User und die Tabellen auf dem externen MariaDB-Server.

```bash
# .env editieren - echte MariaDB-Zugangsdaten eintragen
vim .env

# Init-Script ausfuehren (benoetigt MariaDB Root-Zugang)
chmod +x init-db.sh
./init-db.sh
```

Die `.env` enthalt:
```
DB_HOST=maria-db-server.domain.local
DB_PORT=3306
DB_NAME=focusapp
DB_USER=focusapp
DB_PASSWORD=change-password
DB_ROOT_PASSWORD=change-root-password
```

### 2. Docker Image bauen

```bash
docker compose build
```

Oder direkt aus dem GitHub Container Registry pullen (nach dem ersten CI-Run):

```bash
docker compose pull
```

### 3. App starten

```bash
docker compose up -d
```

Die App laeuft auf: `http://localhost:5000`

### 4. Logs anzeigen

```bash
docker compose logs -f
```

## 🔄 CI/CD mit GitHub Actions

Bei jedem Push auf `main` wird automatisch:

1. Das Docker-Image gebaut (Multi-Stage: Node + .NET)
2. Nach `ghcr.io` (GitHub Container Registry) gepusht
3. Alte Images aufgeraeumt (letzte 4 bleiben erhalten)

### Manuelles Deployment auf dem Host

```bash
# Neuestes Image pullen
docker compose pull

# Container neustarten
docker compose up -d
```

## ⚙️ Konfiguration

Die App wird ueber Umgebungsvariablen konfiguriert, die in `docker-compose.yml` gesetzt werden:

| Variable | Beschreibung |
|---|---|
| `ASPNETCORE_ENVIRONMENT` | `Production` oder `Development` |
| `ConnectionStrings__DefaultConnection` | MariaDB Connection String |

Der Connection-String wird aus der `.env` zusammengesetzt:
```
Server=${DB_HOST};Port=${DB_PORT};Database=${DB_NAME};User=${DB_USER};Password=${DB_PASSWORD}
```

## 📡 API Endpoints

### Todos abrufen
```http
GET /api/focustasks
```

### Todo erstellen
```http
POST /api/focustasks
Content-Type: application/json

{
  "title": "Neue Aufgabe",
  "description": "Optional"
}
```

### Todo aktualisieren
```http
PUT /api/focustasks/{id}
Content-Type: application/json

{
  "id": 1,
  "title": "Geaendert",
  "description": "Neue Beschreibung"
}
```

### Todo loeschen
```http
DELETE /api/focustasks/{id}
```

### Reihenfolge aktualisieren
```http
POST /api/focustasks/reorder
Content-Type: application/json

[1, 3, 2, 4]
```

## 🎯 Entwicklung

### Backend (Development)

```bash
dotnet run
```

API laeuft auf: `http://localhost:5000`

### Frontend (Development)

```bash
cd client
npm install
npm run dev
```

React Dev Server laeuft auf: `http://localhost:5173`
API-Calls werden automatisch an `http://localhost:5000` weitergeleitet (siehe `vite.config.ts`).

## 📦 Projektstruktur

```
FocusApp/
├── client/                    # React Frontend (TypeScript, Vite)
│   ├── src/
│   │   ├── components/        # React Komponenten
│   │   ├── App.tsx            # Haupt-App
│   │   ├── api.ts             # Axios API Client
│   │   └── main.tsx           # Entry Point
│   ├── build/                 # Production Build
│   └── package.json
├── Controllers/
│   └── FocusTasksController.cs
├── Data/
│   └── FocusContext.cs        # EF Core DbContext
├── Models/
│   └── FocusTask.cs           # Domain Model
├── Program.cs                 # ASP.NET Startup
├── FocusApp.csproj            # Projekt-Datei
├── appsettings.json           # Config
├── Dockerfile                 # Multi-Stage Docker Build
├── docker-compose.yml         # Docker Compose Konfiguration
├── .env.example               # Environment Template
├── init-db.sql                # MariaDB Init Script
└── init-db.sh                 # DB Init Shell Script
```

## 🐛 Troubleshooting

### Container startet nicht

```bash
# Logs pruefen
docker compose logs app

# Container Status
docker compose ps
```

### Datenbank-Fehler

```bash
# Pruefen ob MariaDB erreichbar ist
mysql -h $DB_HOST -u $DB_USER -p

# DB neu initialisieren
./init-db.sh
```

### Port bereits belegt

Port in `docker-compose.yml` aendern:
```yaml
ports:
  - "5001:5000"
```

## 🔐 Sicherheit

### Reverse Proxy (nginx)

Fuer Production mit HTTPS empfohlen:

```nginx
server {
    listen 443 ssl;
    server_name focus.example.com;

    ssl_certificate     /etc/ssl/certs/focus.crt;
    ssl_certificate_key /etc/ssl/private/focus.key;

    location / {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection keep-alive;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
```

---

**Version:** 2.0.0
**Letzte Aktualisierung:** 09. August 2026