Jammming project complete with extra features and styling

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:

  1. 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.

  1. 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.

  1. 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).

  1. 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.

  1. 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.

3 Likes

Hey, really cool project. I found that as soon as you type something it doesn’t recognize a new search value. Maybe that’s something you could fix with a timer to check for new results every second.

Thank you for your feedback!

This seems to be a feature of the Spotify API - for security while an app is in development mode.

1 Like

Well, it seems that the class based React coursework has now been removed and no examples, tutorials or help is available for the function based methods.
Anyone know how to do this in the updated method??

You can find code example on project’s Resources nav bar.

1 Like

Ah I missed that, cheers!