focusapp/README.md

FocusApp - Todo Application

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

🚀 Features

• ✅ Todo-Verwaltung - Erstellen, Bearbeiten, Löschen von Aufgaben
• 🎯 Drag & Drop - Intuitive Neuordnung der Aufgaben
• 🎨 Dark/Light Mode - Automatische Theme-Erkennung
• 📱 Responsive Design - Optimiert für Desktop und Mobile
• 💾 Persistente Speicherung - Daten bleiben nach Neustart erhalten
• 🔄 RESTful API - Saubere Backend-Architektur

📋 Voraussetzungen

• .NET 9.0 SDK oder höher
• Node.js 18+ und npm (für React-Entwicklung)
• Linux Server (Ubuntu/Debian empfohlen) für Deployment

🛠️ Installation & Setup

1. Projekt klonen/kopieren

# Projektverzeichnis erstellen
sudo mkdir -p /opt/tools/FocusApp
sudo chown $USER:$USER /opt/tools/FocusApp

2. .NET Runtime installieren

# .NET 9.0 Runtime herunterladen
cd /tmp
wget https://download.visualstudio.microsoft.com/download/pr/...dotnet-runtime-9.0.0-linux-x64.tar.gz

# Entpacken nach /opt/dotnet
sudo mkdir -p /opt/dotnet
sudo tar -xzf dotnet-runtime-9.0.0-linux-x64.tar.gz -C /opt/dotnet

# PATH setzen
echo 'export PATH=$PATH:/opt/dotnet' >> ~/.bashrc
source ~/.bashrc

3. React Frontend bauen

cd /pfad/zu/deinem/projekt/FocusApp/ClientApp

# Dependencies installieren
npm install

# Production Build erstellen
npm run build

Wichtig: Der Build landet in ClientApp/build/ und wird automatisch vom Backend ausgeliefert.

4. ASP.NET Backend veröffentlichen

cd /pfad/zu/deinem/projekt/FocusApp

# Release Build erstellen
dotnet publish -c Release -o /opt/tools/FocusApp

⚙️ Konfiguration

appsettings.Production.json

Erstelle /opt/tools/FocusApp/appsettings.Production.json:

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning",
      "Microsoft": "Warning",
      "Microsoft.AspNetCore": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Log Levels:

• Error - Nur Fehler
• Warning - Warnungen + Fehler (empfohlen)
• Information - Mehr Details
• None - Kein Logging

🔧 Systemd Service Setup

Service-Datei erstellen

sudo vim /etc/systemd/system/focusapp.service

Inhalt:

[Unit]
Description=FocusApp Todo Application
After=network.target

[Service]
Type=simple
WorkingDirectory=/opt/tools/FocusApp
ExecStart=/opt/dotnet/dotnet /opt/tools/FocusApp/FocusApp.dll
Restart=always
RestartSec=10
User=stefan
Environment=ASPNETCORE_ENVIRONMENT=Production
Environment=DOTNET_ROOT=/opt/dotnet
Environment=ASPNETCORE_URLS=http://0.0.0.0:5000
SyslogIdentifier=focusapp
StandardOutput=journal
StandardError=journal

[Install]
WantedBy=multi-user.target

Wichtig:

• Type=simple verwenden (nicht notify)
• User anpassen auf deinen Linux-User
• Port 5000 ist der Standard, kann angepasst werden

Service aktivieren

# Service neu laden
sudo systemctl daemon-reload

# Service starten
sudo systemctl start focusapp.service

# Service beim Boot aktivieren
sudo systemctl enable focusapp.service

# Status prüfen
sudo systemctl status focusapp.service

📡 API Endpoints

Todos abrufen

GET /api/todos

Response:

[
  {
    "id": 1,
    "title": "Erste Aufgabe",
    "description": "Beschreibung",
    "createdAt": "2026-01-29T22:00:00Z",
    "order": 0
  }
]

Todo erstellen

POST /api/todos
Content-Type: application/json

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

Todo aktualisieren

PUT /api/todos/{id}
Content-Type: application/json

{
  "id": 1,
  "title": "Geändert",
  "description": "Neue Beschreibung"
}

Todo löschen

DELETE /api/todos/{id}

Reihenfolge aktualisieren

POST /api/todos/reorder
Content-Type: application/json

[1, 3, 2, 4]

🎯 Entwicklung

Backend starten (Development)

cd FocusApp
dotnet run

API läuft auf: http://localhost:5000

Frontend starten (Development)

cd FocusApp/ClientApp
npm start

React Dev Server läuft auf: http://localhost:3000

Proxy: API-Calls werden automatisch an http://localhost:5000 weitergeleitet (siehe package.json).

Datenbank

Todos werden in einer SQLite-Datenbank gespeichert:

• Datei: /opt/tools/FocusApp/todos.db
• Automatische Erstellung beim ersten Start
• Entity Framework Core mit Code-First Migrations

🐛 Troubleshooting

Service startet nicht

# Logs ansehen
sudo journalctl -u focusapp.service -n 50 --no-pager

# Manuell testen
cd /opt/tools/FocusApp
/opt/dotnet/dotnet FocusApp.dll

Service hängt bei "starting"

Problem: Type=notify statt Type=simple in Service-Datei.

Lösung: Service-Datei editieren, Type=simple verwenden, dann:

sudo systemctl daemon-reload
sudo systemctl restart focusapp.service

Port bereits belegt

# Port-Verwendung prüfen
sudo netstat -tlnp | grep 5000

# Anderen Port in Service-Datei setzen
Environment=ASPNETCORE_URLS=http://0.0.0.0:5001

Datenbank-Fehler

# Datenbank löschen und neu erstellen lassen
rm /opt/tools/FocusApp/todos.db
sudo systemctl restart focusapp.service

📦 Projektstruktur

FocusApp/
├── ClientApp/                 # React Frontend
│   ├── public/
│   ├── src/
│   │   ├── components/       # React Komponenten
│   │   ├── App.js           # Haupt-App
│   │   ├── App.css          # Styles
│   │   └── index.js         # Entry Point
│   ├── package.json
│   └── build/               # Production Build (nach npm run build)
├── Controllers/
│   └── TodosController.cs   # API Controller
├── Models/
│   ├── TodoItem.cs          # Todo Model
│   └── TodoContext.cs       # EF Core DbContext
├── Program.cs               # ASP.NET Startup
├── FocusApp.csproj          # Projekt-Datei
├── appsettings.json         # Basis-Config
├── appsettings.Production.json  # Production-Config
└── todos.db                 # SQLite Datenbank (runtime)

🔐 Sicherheit

Firewall-Regeln

# Nur lokalen Zugriff erlauben (Standard)
sudo ufw deny 5000

# Für Netzwerkzugriff:
sudo ufw allow 5000/tcp

Reverse Proxy (nginx)

Für Production empfohlen:

server {
    listen 80;
    server_name focus.example.com;

    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;
    }
}

📊 Monitoring

Service-Status prüfen

# Aktiver Status
sudo systemctl status focusapp.service

# Letzte Logs
sudo journalctl -u focusapp.service -n 50

# Live-Logs folgen
sudo journalctl -u focusapp.service -f

Ressourcen-Nutzung

# Prozess finden
ps aux | grep FocusApp

# Speicher/CPU-Nutzung
top -p $(pgrep -f FocusApp.dll)

🚀 Updates & Deployment

1. Code aktualisieren

# Frontend neu bauen
cd ClientApp
npm run build

# Backend neu veröffentlichen
cd ..
dotnet publish -c Release -o /opt/tools/FocusApp

2. Service neu starten

sudo systemctl restart focusapp.service
sudo systemctl status focusapp.service

3. Datenbank-Migration (bei Schema-Änderungen)

cd FocusApp

# Migration erstellen
dotnet ef migrations add MigrationName

# Migration anwenden
dotnet ef database update

# Oder automatisch beim Start (bereits konfiguriert in Program.cs)

📝 Nützliche Befehle

# Service-Befehle
sudo systemctl start focusapp.service      # Starten
sudo systemctl stop focusapp.service       # Stoppen
sudo systemctl restart focusapp.service    # Neustarten
sudo systemctl status focusapp.service     # Status
sudo systemctl enable focusapp.service     # Auto-Start aktivieren
sudo systemctl disable focusapp.service    # Auto-Start deaktivieren

# Logs
sudo journalctl -u focusapp.service        # Alle Logs
sudo journalctl -u focusapp.service -f     # Live-Logs
sudo journalctl -u focusapp.service --since "1 hour ago"  # Letzte Stunde

# Datenbank
sqlite3 /opt/tools/FocusApp/todos.db       # DB öffnen
.tables                                     # Tabellen anzeigen
SELECT * FROM TodoItems;                    # Alle Todos
.quit                                       # Beenden

🎨 Design System

Die App verwendet ein eigenes Design System mit:

• CSS Custom Properties für theming
• Responsive Design (Mobile-First)
• Accessibility-Features (ARIA, Keyboard-Navigation)
• Dark/Light Mode Support

---

Version: 1.0.0
Letzte Aktualisierung: 29. Januar 2026
Status: ✅ Production Ready