Skip to content

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

Notifications You must be signed in to change notification settings

Alschn/WebPlayer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Web Player

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

Python Django Typescript  Next.js TailwindCSS Spotify

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:

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published