Spotify API Web App

This project is created using the Spotify API and is based on Britanny Chiang's newline course with additional features. Click here to learn more.

⚒️ Built with the following technologies:

• React.js
• Styled Components
• Node.js
• Express.js
• Spotify API
• Heroku 🚀

✨ Features

• Spotify OAuth.
• View logged in user's:
• Followers count
• Top Artists (All Time/ 6 Months/ Month)
• Top Playlists (All Time/ 6 Months/ Month)
• Top Tracks (All Time/ 6 Months/ Month)
• View all Singles and Albums of an artist (including related artists).
• View all available tracks with their information.
• A 30-sec preview of the track.

👨‍🏫 Request for Demo

Due to the changes mentioned in the "Note section" below, accessing the web application requires an individual to be added in my own Spotify Dashboard. If by chance you are interested, just request a demo from me (Email and Spotify name are required).

📄 Note

All newly created app using this API are subject to the changes announced by Spotify for Developers on May 27th, 2021. A couple of features will now require the Spotify Name and Email of the user and add them on your Spotify Dashboard. Read more.

🛠️ Installation and Set Up

1. Install node

   nvm install

2. Install dependencies

   npm install

3. Register and Create a new Spotify App in the Spotify Developer Dashboard.

4. Go to the App Settings and add 'http://localhost:8888/callback as a Redirect URIs.

5. Create a .env file at the root of the project and base it on the .env.example file.

6. From your Spotify Dashboard, get and add the CLIENT_ID and CLIENT_SECRET to the .env file inside the root.

7. Run React App on http://localhost:3000 and Node server on http://localhost:8888

   npm start

🚀 Heroku Deployment with Git

1. Create your Heroku app

2. Login to Heroku

   heroku login

3. Add the created Heroku App as a git remote

   heroku git: remote -am app-name

4. In your Spotify App Settings, add "https://app-name.herokuapp.com/callback" as a Redirect URI.

5. In the Heroku Dashboard, add config vars based on the .env file.

6. Deploy changes

   git add .
   git commit -am your-comment

7. Push to Heroku

   git push heroku master