Spotify Playlist Enhancer

JavaScript HTML CSS
GitHub Repository

Overview

Google Chrome extension which allows you to connect to Spotify API fetch songs and playlist from your Spotify account. This extension also allows you to retrieve your top 5 played tracks, and give you 5 recommendations based on these tracks, all with a couple of clicks through the extension UI. Finally, you can generate a Spotify playlist with the songs that were recommended to you, and play these songs inside the extension right there and now. When the playlists are generated, they are added to your Spotify account, however, in the extension UI, you can select to not keep the playlist if you don't like it after listening to the recommended songs.

The demonstration of the application can be viewed below:

Features

  • Authenticate Spotify Account: Securely connect your Spotify account to the extension.
  • Top 5 Played Tracks: View your top 5 most played tracks on Spotify.
  • Top 5 Recommended Tracks: Get recommendations from Spotify based on your top played tracks.
  • Generate New Playlists: Create new playlists with new songs based on your top tracks and recommendations.
  • Play Songs in Browser: Listen to your playlists directly within Google Chrome.

In Development

  • Dynamic Playlist Manager: Drag and drop songs to create the perfect playlist.
  • Customized Profile: Personalize your extension profile.
  • Friend System: Connect with friends and share your music preferences.

Installation

  1. Clone https://github.com/Ladnopoka/Spotify-Playlist-Enhancer.git
  2. Go to ./spotify-playlist-enhancer directory
  3. Run command “npm install react-scripts”
  4. Run command “npm install fireabase”
  5. Run command “npm run build” in your terminal/console from spotify-playlist-enhancer directory
  6. The spotify-playlist-enhancer directory now has a new folder “build”
  7. Open your Google Chrome browser and go to your extensions
  8. In the top right corner of the extensions page, toggle developer mode
  9. A couple of new buttons appear, select “Load unpacked”
  10. Select the build folder that you created in step 2
  11. The extension now appears in your extensions, enable it and you will have the icon in extensions (top left corner)

Contact

For any inquiries or feedback, feel free to reach out to:

Jevgenij Ivanov
Email: ladnopokaa@gmail.com

GitHub: https://github.com/Ladnopoka
itch.io: https://ladnogames.itch.io/
YouTube: https://www.youtube.com/@LadnoDev
X: https://x.com/Ladnopokaa
Discord: https://discord.gg/BPsncTZe