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)

1. Öffne die App: https://felixfoertsch.github.io/whattoplay/
2. Gehe zu Settings → Cloudflare Worker
3. Folge dem Setup-Wizard:
   • Erstelle CF API Token im Dashboard
   • Füge Token in App ein
   • Klicke "Worker deployen"
4. ✅ Fertig - Worker ist deployed!
5. 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:

1. Öffne die App auf deinem iPhone
2. Gehe zu Settings → Steam
3. Gebe deine Worker URL ein (z.B. https://whattoplay-api.username.workers.dev)
4. Speichere die Einstellungen
5. Füge deinen Steam API Key und Steam ID hinzu
6. 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

1. Gehe zu https://steamcommunity.com/dev/apikey
2. Akzeptiere die Terms
3. Domain: localhost (wird ignoriert)
4. Kopiere deinen API Key

4. Steam ID finden

Option A: Steam Profil URL nutzen

• https://steamcommunity.com/id/DEINNAME/ → ID ist DEINNAME

Option B: SteamID Finder

• https://steamid.io/

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