Jammming is a website that allows users to search the Spotify library, create a custom playlist, then save it to their Spotify account. It was made as a project for the React module of the Full Stack Engineer career path on Codecademy
This project objective is to allow users to login to Spotify, search tracks, sort the results, add them to a custom playlist, name the playlist an then save it directly into their account. At the end, the app shows two buttons: one to open the link to the newly created playlist on another tab/window and the other copies the link into the clipboard.
An app created into Spotify Dev plataform is required for Jammming to work. At least in development mode, Spotify requires that each user of said app is created individually, and there is a 25 user limit, so, for now, one of Jammming's main functionalities (the versatility to open the app, log in, search tracks and create a playlist) is impaired, as it would require an user to request credentials, and the admin would have to register each one up to 25.
But, fear not! You can still try it locally!
-
First, go to SpotifyDev, login, click on the top-right menu, access your Dashboard and click on the "Create app" button.
-
Fill in your app name (e.g.: Jammming), a description and at least one "Redirect URI" (http://localhost:3000). Check the Web API checkbox and the "I understand and agree (...)" one too. Finally, click "Save" to create your App.
-
Then, in your app page Settings and copy your "Client ID".
-
If you have not done so yet, clone/fork the repository.
-
Open spotifyApis.js, alter line 3 from:
const client_id = "YOUR_APP_CLIENT_ID";to
const client_id = "346...";- Open a terminal and run:
npm install- Wait for the packages to be installed, then run:
npm run dev- Open http://localhost:3000 with your browser to see the result.
Landing page
After logging in to Spotify
Searching tracks
Search Pagination
Adding tracks to tracklist
Playlist created successfully!
Changing theme colors
Resulting playlist on Spotify
I would love to get some feedback! You can reach me here on GitHub, LinkedIn, or CodecademyCommunity.