Skip to content

SETUP.md

Latest commit

 

History

History
68 lines (47 loc) · 1.95 KB

SETUP.md

File metadata and controls

68 lines (47 loc) · 1.95 KB

🎵 My Personal DJ - Spotify Setup! 🔥

Schritt 1: Spotify Developer Dashboard 🎧

  1. Geh zu: https://developer.spotify.com/dashboard
  2. Melde dich mit deinem Spotify-Account an
  3. Klick auf deine App (oder erstelle eine neue)

Schritt 2: Redirect URI eintragen 🔐

  1. In deiner App, klick auf "Settings" (Zahnrad-Symbol)
  2. Scroll runter zu "Redirect URIs"
  3. Trag ein: http://localhost:3000
  4. Klick auf "Add"
  5. Klick auf "Save" ganz unten!

WICHTIG: Wenn du einen anderen Port nutzt (z.B. 8080), trag den entsprechend ein!

Schritt 3: Client ID kopieren 📋

  1. Oben auf der App-Seite siehst du deine "Client ID"
  2. Klick auf "Show Client Secret" NICHT (brauchst du nicht!)
  3. Kopiere nur die Client ID (die lange Buchstaben-Zahlen-Kombination)

Schritt 4: Client ID eintragen 💻

  1. Öffne die Datei config.js in deinem Projekt
  2. Ersetze 'DEINE_CLIENT_ID_HIER' mit deiner echten Client ID
  3. Speichern!

Beispiel:

clientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6'

Schritt 5: Redirect URI anpassen (falls nötig) 🔧

Wenn dein Server NICHT auf http://localhost:3000 läuft:

  1. Öffne config.js
  2. Ändere redirectUri auf deine URL
  3. WICHTIG: Die URL muss EXAKT mit der im Spotify Dashboard übereinstimmen!

Schritt 6: Fertig! 🎉

  1. Starte deinen Server: npx live-server --port=3000
  2. Öffne die Seite im Browser
  3. Klick auf "Mit Spotify anmelden"
  4. Erlaube den Zugriff
  5. BOOM - du bist drin! 🔥

Troubleshooting 🐞

"Invalid redirect URI"

  • Check: Ist die Redirect URI im Dashboard GENAU wie in config.js?
  • Keine Leerzeichen, kein / am Ende!

"Invalid client"

  • Check: Ist die Client ID richtig kopiert?
  • Keine Leerzeichen vor oder nach der ID!

Seite lädt nach Login nicht

  • Check die Browser-Konsole (F12)
  • Evtl. läuft der Server auf einem anderen Port?

Fragen? 💬

Schau in die Browser-Konsole (F12) - da siehst du hilfreiche Meldungen! 🔍