Hello all,
I have just finished my jamming project and the files can be located here at my github page. This project was daunting at first and made me question my abilities and wonder, “Why would they do this to us!!!”. After going through it, I’m glad they did. It made me do additional research, recall previous lessons, and get 110% to even be able to get it to work. I am confident that I was able to complete the project and it is fully functioning. I did use the .env file in my project to hold my client id so if you do test out this project, ensure to create a .env file in your root and add you client id to that file like this:
REACT_APP_CLIENT_ID=s5se4f3sdf51s35ef123fese
This is not a client id, but put yours where the random numbers are.
Thanks!
~Josh
1 Like
Hi, Great work. I was just wondering whether you use the UserId’s and Playlists to actually create a real physical form of the new playlist and transfer it to their spotify app or do you use vanilla JS to just hide the elements? Thanks, I may have some more questions 
Hi!
So I am using React to create a state called playlist and a state called searchResults. After user signs in I retrieve the token given by the Spotify API using implicit grant authorization and store that token in the session storage. This then allows the user to make search calls to the API using the endpoint, .../v2/search with the desired search term. I grab those results and refactor the data into objects that only contain the needed data, and store those objects in the searchResults state. Once the search results state has been set, the SearchResults component populates each title into a Track component that can be displayed on screen. When the user clicks the add track button, the callback handleAddToPlaylist() adds the track object to the playlist state which then React renders the track component within the playlist area.
When the user clicks on the create playlist button, the process is:
-grab the user’s id from https://api.spotify.com/v1/me
-pass the user id, token, and playlist name to the endpoint to create a new playlist and return the newly created playlist’s id from https://api.spotify.com/v1/users/${userId}/playlists
-add the tracks uri’s as an array to the endpoint that references that playlist’s id from https://api.spotify.com/v1/playlists/${playlistId}/tracks. The uris must be passed as the body of the POST method
This creates the new playlist with the desired name and tracks in the profile. After it is successfully called, I just empty the playlist state (setPlaylist([])) which then will remove the tracks from the component on Reacts next render. The file spotifyAPI.js is the helper file that completes all of the communication with Spotify’s server, if you are interested in diving more into that side.
I hope this answers your question, but if not, feel free to ask more and I will try and clarify as best as I can!
-Josh
3 Likes