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.

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

2 Likes

Ah I missed that, cheers!

Nice work @jameskeezer, I like the initial login feature.

One thing I noticed is that when I click the login button to authenticate with Spotify, your API key is exposed in the Network section of Dev Tools:

Not a big deal given the scope of this project, but I’ve heard learning how to hide the API key from all access points is very valuable.

Netlify Functions combined with an environment variable is one way to do it. That’s how I hid the API key for the Film Finder project, and I had quite the field day figuring it out :sweat_smile:

I am about to embark on this one, and I’m sure it will be a challenge as well. Awesome work again and look forward to seeing more projects in the future!

Thanks for your feedback!

I put the api key in a .env file and replaced it with process.env.REACT_APP_API_KEY

In Netlify Site Settings → Environment Variables, I put the corresponding key/value

It wasn’t working, so I enabled Netlify Bundle ENV

Then it worked … but it shows the api key! (Both in the address bar and Network tab as you showed above)

Can you give me a hint of what I am missing here?

This YouTube tutorial on the subject is very helpful.

Also, you can check out my Film Finder repo which should give some additional hints.

You have one half of the puzzle solved with the the Netlify environment variable. The other half involves setting up a Netlify function(s) to perform the call to the API, which will take place behind the scenes and shield the called URL and API from dev tools.

Hey @user5142 - just wanted to let you know that I implemented this in a new project using the tutorial video you linked.

Thank you very much, I appreciate it!

1 Like

Glad to hear!

The tutorial breaks it down very nicely, but it definitely still takes come creativity to implement into a project, so nice work :muscle: