Introduction

To learn how OAuth 2.0 works and how to implement such a feature in my future projects, I created a fully Responsive Web App using Spotify Web API.

Concept

You can Login with your Spotify's infos and listen directly in the website to your playlists or any song. You can also access to your Top Recent Songs, Top Artists and discover new songs based on random music gender. The website also includes a Dark Theme with Light, Dark and System option. Since Spotify provides more data for Premium users, I'll advice to log with a Premium Spotify's account to enjoy the full experience.

Setup

• Clone this repo
• If you are using yarn or pnpm, adapt the config/cli in package.json
• Run command npm install
• Run command npm run migrate
• NB: To launch the backend server, you'll need an environment file with database credentials. You'll find a template one in backend/.env.sample
• You also need to subscribe on Spotify Developer's plan to get an API Key.

Configuration

Create .env files in /frontend and /backend following .env.sample examples.

Use

• Run Frontend and Backend server with one command : npm run dev

• Express server will be accessible at the address set in the /frontend's .env

• React client will be accessible at the address set in the /backend's .env

• Log in with your Spotify Account to try Discovery.

Available Commands

• migrate : Run the database migration script
• dev : Starts both servers (frontend + backend) in one terminal
• dev-front : Starts the React frontend server
• dev-back : Starts the Express backend server
• lint : Runs validation tools, and refuses unclean code (will be executed on every commit)
• fix : Fixes linter errors (run it if lint growls on your code !)

Tools

• Concurrently : Allows for several commands to run concurrently in the same CLI
• Husky : Allows to execute specific commands that trigger on git events
• Vite : Alternative to Create-React-App, packaging less tools for a more fluid experience
• ESLint : "Quality of code" tool, ensures chosen rules will be enforced
• Prettier : "Quality of code" tool as well, focuses on the styleguide
• _ Airbnb Standard_ : One of the most known "standards", even though it's not officially linked to ES/JS
• Nodemon : Allows to restart the server everytime a .js file is udated

Deployement

Work in progress. Here's some screenshot while it's done.

Landing Page with Last Spotify's Releases

Library which gives access to User's Playlists, Recent Tracks and Search Page

Search Page with Random suggestion while no search have been typed

My Profile with Top Tracks and Artists