interysy / playlistsharerre

A React App, which allows sharing playlists from Spotify to Youtube and vice versa.

PlaylistSharerRE

This project I have built over the a couple weeks during my summer break to learn React and the OAuth flow, eventually it became a web application, which allows tranferring of playlists from Spotify to Youtube and vice versa using their respective APIs. At this moment the applicaiton is limited to test accounts, until verification from related services.

So What Is It Made Using?

The application was originally planned to be a desktop application to be built using ElectronJS, however it was bought to life using React, Javascript, Redux and implicit grant flows from Spotify Web API and Youtube API. I have also used EmailJS to allow emails to be sent to myself.

How to Setup PlaylistSharerRE for your use?

If you have a test account for both Spotify and Youtube , which has been verified by me, simply head over to https://playlistsharerre.netlify.app/, site which is ready to use.

Otherwise follow these steps:

1. Download or fork the repo
2. Log into Spotify Developer Dashboard using your account and create a new app with the following redirect URIs :
   • http://localhost:3000/gettoken
3. Log into Google Developer Console and create a new project with an OAuth Client Consent Screen and OAuth Client ID for a web application configured with these redirect URIs:
   • http://localhost:3000/gettoken
4. Create an env file in the root of the project and add:
   • REACT_APP_SPOTIFY_CLIENT_ID = client id from the app created in the dashboard
   • REACT_APP_SITE_LINK = http://localhost:3000
   • REACT_APP_YOUTUBE_CLIENT_ID = client id from the app created in the google dashboard
5. Add code to load the enviroment variables (using dotenv)
6. Run app by the 'npm run' command

* to make EmailJS work you will need to configure your own account, template and set the REACT_APP_EMAILJS_KEY variable.

Snippets

Index Page (Login here, once fulfilled button allowing continuation will appear)

Transfer Playlists

Final Report

Notes

Although the application is quite accurate when transferring to Youtube, it can be hit or miss when undertaking the transfer in the other direction, I am currently working to improve this by using Selenium to improve the search query after content generation on the Youtube page.

Credits

Credits to @ueabu, for helping me to get started with his video series on his own similar project and code snippets for getting data from the Spotify Web API.