Feature 4: Webinterface — React-Frontend, Discord-OAuth2, REST-API

- Discord-OAuth2-Login (identify-Scope, CSRF-State, signierte Session-Cookies, keine Token-Speicherung)
- REST-API: /api/devlogs (öffentlich), /api/commits (nur ADMIN_DISCORD_ID), /api/me
- React + Vite Frontend: Devlog-Archiv mit Mini-Markdown-Renderer, Commit-Tabelle, dunkles EcoGame-Theme
- Fastify liefert frontend/dist mit SPA-Fallback aus; Vite-Dev-Proxy für lokale Entwicklung
- Multi-Stage-Dockerfile (Frontend-Build im Image), neue Env-Vars in Compose + .env.example
- README: OAuth2-Setup (Redirect-URLs, Client Secret) und Frontend-Workflow

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

README.md

@@ -6,9 +6,9 @@ Discord-Bot + Webinterface für die EcoGame-Community.
 1. ✅ Bot online + `/ping` Slash-Command
 2. ✅ Commit-Feed: Gitea-Push-Webhooks → Discord-Embeds + SQLite-Archiv
 3. ✅ Devlog-Archiv: Devlog-Kanal live archivieren + `/devlog-backfill` für die Historie
-4. ⬜ Webinterface: Discord-Login, Devlog- & Commit-Seiten
+4. ✅ Webinterface: Devlog-Archiv (öffentlich) + Commit-Feed (Discord-Login, nur Admin)
 
-**Stack:** Node.js 20+, discord.js v14, Fastify, React (ab Feature 4), SQLite (better-sqlite3), Docker
+**Stack:** Node.js 20+, discord.js v14, Fastify, React + Vite, SQLite (better-sqlite3), Docker
 
 ---
 
@@ -116,6 +116,38 @@ können sich nicht doppeln, der Command ist beliebig oft wiederholbar.
 
 ---
 
+## Setup: Webinterface
+
+**Zugriffsmodell:** Devlog-Archiv ist öffentlich (wie der Discord-Kanal),
+die Commit-Seite erfordert Discord-Login und ist auf deine Discord-ID beschränkt.
+
+### 1. OAuth2 im Developer Portal konfigurieren
+1. [Developer Portal](https://discord.com/developers/applications) → deine App → **OAuth2**
+2. **Client Secret** kopieren (ggf. „Reset Secret") → `DISCORD_CLIENT_SECRET`
+3. Unter **Redirects** BEIDE URLs eintragen:
+   - `https://bot.d4rkst3r.de/auth/callback` (Produktion)
+   - `http://localhost:3080/auth/callback` (lokale Entwicklung)
+
+### 2. Neue .env-Werte
+| Variable | Woher |
+|---|---|
+| `DISCORD_CLIENT_SECRET` | Developer Portal → OAuth2 (Schritt 1) |
+| `SESSION_SECRET` | Generieren: `node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"` |
+| `ADMIN_DISCORD_ID` | Discord: Rechtsklick auf deinen Namen → **Benutzer-ID kopieren** |
+| `PUBLIC_URL` | Produktion: `https://bot.d4rkst3r.de` · lokal: `http://localhost:3080` |
+
+### 3. Frontend lokal entwickeln
+```
+cd frontend
+npm install
+npm run dev        # Vite-Dev-Server auf :5173, proxied /api + /auth zum Bot auf :3080
+```
+Für den „Produktions-Look" lokal: `npm run build` im frontend/-Ordner —
+der Bot liefert `frontend/dist` dann selbst unter `http://localhost:3080` aus.
+Im Docker-Image wird das Frontend automatisch mitgebaut (Multi-Stage).
+
+---
+
 ## Lokal starten (Entwicklung)
 
 ```
@@ -188,9 +220,16 @@ ecobot/
 │   │       ├── ping.js     # /ping — Lebenszeichen
 │   │       └── devlog-backfill.js # /devlog-backfill — Historie archivieren (Admin)
 │   └── web/
-│       └── server.js       # Fastify: /health, /webhooks/gitea (HMAC-geprüft)
+│       ├── server.js       # Fastify: Webhook, Static-Serving, SPA-Fallback
+│       ├── auth.js         # Discord-OAuth2-Flow + Session-Cookies
+│       └── api.js          # REST-API: /api/me, /api/devlogs, /api/commits
+├── frontend/               # React + Vite (Devlogs öffentlich, Commits admin-only)
+│   └── src/
+│       ├── App.jsx         # Layout, Router, Login-Status
+│       ├── markdown.jsx    # Mini-Markdown-Renderer für Devlog-Prosa
+│       └── pages/          # Devlogs.jsx, Commits.jsx
 ├── .env.example            # Vorlage für Secrets (nach .env kopieren)
-├── Dockerfile
+├── Dockerfile              # Multi-Stage: Frontend-Build + Runtime
 ├── docker-compose.yml
 └── README.md
 ```