Alschn / WebPlayer

Spotify Web Player clone built with DRF, Next.js, Tailwind, Typescript, Spotipy, Spotify Web API + Web Playback SDK

Web Player

Spotify Clone with Django as a backend and Next.js as a frontend.

 

Frameworks, libraries and tools:

Backend:

• django, djangorestframework
• django-all-auth, dj-rest-auth
• spotipy
• ...

Frontend:

• next
• tailwind-css, shadcn
• axios
• react-spotify-web-playback-sdk
• ...

External APIs:

• Spotify Web API
• Spotify Web Playback SDK

Installation

...prerequisites

Backend Setup

Setup virtual environment and install dependencies:

cd backend

mkdir .venv

pipenv shell

pipenv install

Create .env file in backend directory and set following variables in plain text

SECRET_KEY=your_secret_key
DEBUG=True
USE_LOCAL_SQLITE_DB=True
CORS_ALLOW_ALL_ORIGINS=True

SPOTIFY_CLIENT_ID='id from spotify dashboard'
SPOTIFY_CLIENT_SECRET='secret from spotify dashboard'
SPOTIFY_REDIRECT_URI='redirect uri set in spotify dashboard (port 3000)'

Run migrations and create superuser:

python manage.py makemigrations

python manage.py migrate  

python manage.py createsuperuser  

Run server, go to admin page and log in with superuser's credentials. Create new Social Account with Provider - Spotify, any Name, client_id from Spotify Dashboard and select default Site.

Frontend Setup

Install all dependencies:

cd frontend

pnpm install

Create .env file in frontend directory and set following variables:

NEXT_PUBLIC_API_URL=http://localhost:8000

Run development server:

pnpm dev