I completed this project mostly on my own, but I had to watch the walkthrough video to complete the steps associated with accessing the Spotify API. The promises were especially challenging.
Here is the working app:
After I had a fully functional app, I really enjoyed adding features. Here is what I added:
- LOGIN BUTTON
Instead of being redirected when typing in the search bar, I wanted to have a login button instead. I removed the redirect code from the getAccessCode() method and put it into a new method login(). I then used that as an event handler for a new button component I created and added above the search bar.
I then wanted to conditionally show/hide both the login button and the search bar. If one is displayed, the other one is hidden. I added a state showLogin and used this conditional logic:
{this.state.showLogin && <Login onClick={this.login} />}
{!this.state.showLogin && (
<>
<SearchBar ...
The only issue is that every time someone visits or refreshes the page, the login button appears even if they have given authorization. I haven’t figured out if/how to determine authorization on page load with the Implicit Grant method… it doesn’t seem like anything is in local storage to indicate that.
- Remove track from Search Results when added to Playlist
I think this is a better user experience, it feels like the song has moved from the search results to the playlist. I would like to add a “fade out to the right” and “fade in from the left” effect on the respective tracks, but I think that might be handled by useEffect and don’t have the knowledge for that yet.
Removing tracks from the playlist does not re-add them back into the search results.
- Refactored class components to functional components
I changed SearchResults and TrackList to functional components. I’m not sure if components with methods can be functional - and if they are, what happens in place of the constructor and bind(this).
- Changed styling
I changed the background image, made the tracklist backgrounds blurred to see the track info easier, and tweaked a lot more to make it look a little nicer on both desktop and mobile.
- Added album art!
This was fun! Since the API was already handled, I added in album art for each track and displayed it in the <Track /> component.
Thank you for reading!
My next big step would be to access the API with the Auth code w PKCE. This seems daunting, but would really elevate my app.
