Felix Förtsch
576c171a98
All-in-one Uberspace deployment: - Backend: Node.js Express on port 3000 (/api/*) - Frontend: Static files served by Apache (/) - URL: https://wtp.uber.space Removed: - GitHub Actions workflow - Cloudflare Worker setup service - CloudflareSetupPage component - CloudflareService - 404.html (GitHub Pages redirect) - Cloudflare menu item from Settings Simplified: - Use VITE_BASE_PATH and VITE_API_URL for config - Single deployment target (no multi-env complexity) Co-Authored-By: Claude <noreply@anthropic.com>
WhatToPlay - Game Library Manager
Eine PWA zum Verwalten deiner Spielebibliotheken von Steam, GOG, Epic, und mehr.
Features
- 📚 Alle Spiele an einem Ort
- 🎮 Steam, GOG, Epic Games, Battle.net Integration
- 📱 PWA - funktioniert auf iPhone, Android, Desktop
- 🔒 Daten bleiben lokal (IndexedDB)
- ⚡ Schnelle Tinder-ス タイル Entdeckung
Local Development
npm install
npm run dev
Production Deployment
Die App ist deployed unter: https://felixfoertsch.github.io/whattoplay/
Steam API auf dem iPhone nutzen
Die App nutzt Cloudflare Workers als CORS-Proxy für die Steam API. Du kannst deinen eigenen Worker deployen (kostenlos im Free Tier).
Option 1: Automatisches In-App Deployment (Empfohlen)
- Öffne die App:
https://felixfoertsch.github.io/whattoplay/ - Gehe zu Settings → Cloudflare Worker
- Folge dem Setup-Wizard:
- Erstelle CF API Token im Dashboard
- Füge Token in App ein
- Klicke "Worker deployen"
- ✅ Fertig - Worker ist deployed!
- Gehe zu Settings → Steam und nutze die Steam API
Option 2: Manuelles CLI Deployment
Da GitHub Pages statisch ist, kannst du die Steam API nicht direkt aufrufen. Deploye stattdessen deinen eigenen Cloudflare Worker (kostenlos):
Deploy deinen Worker:
Manuelle Alternative:
# Wrangler installieren
npm install wrangler --save-dev
# Zu Worker Directory wechseln
cd workers
# Worker deployen
npx wrangler deploy
# Deine Worker URL wird angezeigt:
# https://whattoplay-api.YOUR_USERNAME.workers.dev
2. Worker URL in der App konfigurieren
Bei In-App Deployment: Worker URL wird automatisch gespeichert ✅
Bei manuellem Deployment:
- Öffne die App auf deinem iPhone
- Gehe zu Settings → Steam
- Gebe deine Worker URL ein (z.B.
https://whattoplay-api.username.workers.dev) - Speichere die Einstellungen
- Füge deinen Steam API Key und Steam ID hinzu
- Klicke auf Refresh → Deine Spiele werden geladen! 🎉
Warum Cloudflare Workers?
- ✅ 100% Kostenlos (100k requests/Tag im Free Tier)
- ✅ Kein eigenes Hosting (CF hostet für dich)
- ✅ Automatisches Deployment aus der App heraus
- ✅ CORS-Proxy für Steam API
- ✅ Schnell deployed (~2 Minuten)
3. Steam API Key bekommen
- Gehe zu https://steamcommunity.com/dev/apikey
- Akzeptiere die Terms
- Domain:
localhost(wird ignoriert) - Kopiere deinen API Key
4. Steam ID finden
Option A: Steam Profil URL nutzen
https://steamcommunity.com/id/DEINNAME/→ ID istDEINNAME
Option B: SteamID Finder
Architektur
iPhone App (GitHub Pages)
↓ POST /api/steam/refresh
Cloudflare Worker (dein eigener)
↓ Forward mit API Key
Steam Web API
↓ Games List
Worker → App → IndexedDB
Wichtig:
- Jeder User deployed seinen eigenen Worker
- API Keys bleiben client-seitig
- Worker ist nur ein CORS-Proxy
- 100k requests/Tag im Free Tier
Development vs Production
Development (npm run dev):
- Vite Dev Server Middleware handled API Calls
- Keine Worker URL nötig
Production (GitHub Pages):
- Worker URL erforderlich
- API Calls gehen zu deinem Worker
Weitere Plattformen
- GOG: OAuth Flow (geplant)
- Epic Games: Manueller Import (kein Public API)
- Battle.net: OAuth Flow (geplant)
Tech Stack
- React + TypeScript
- Ionic Framework (Mobile UI)
- IndexedDB (lokale Persistenz)
- Vite (Build Tool)
- Cloudflare Workers (Backend)
License
MIT