jammming – React App

Go to website

Spotify custom playlist creator – React app using Spotify API

Final project for Codecademy’s 8-week Build Front-End Web Applications intensive.

At the end of the project, we submitted our own feature requests — documenting any features we wanted to add to our app, laying out all of the necessary functionality, its implementation and our approach.

I chose to add two additional features:
Press enter to search & Display album image

OBJECTIVE
A user should be able to hit the Enter key to submit a search term.
A user should see the album image displayed for each search result.

BACKGROUND
Currently, the user is expected to click the Search button in order to submit their search criteria. However, hitting the Enter key to return results has become the more user-friendly approach. Most applications and websites use this method and it is now an intuitive practice.
The search results currently return text only (song title, artist and album name). Including the album image will help the user sort through the results more easily and quickly, as well as add to the overall visual appeal.

TECHNICAL DESIGN
The SearchBar component will require a handleEnterKeyPress() method. This will check to see if the Enter key as been pressed. The method will be passed to the search input as an attribute using an event listener named onKeyPress — which will trigger the search function once the Enter key has been hit.
To retrieve the album image, we add an image property (image: track.album.images[2].url) to our track object in the Spotify module, which is mapped to an array of tracks that’s returned by our search method. We target the 3rd image in the image object from the Spotify API, which is the thumbnail version. In the Track component we call <img src="{this.props.track.image}"> to render the image.

We can style our updated search results by reworking our HTML and adding some new CSS classes.

CAVEATS
The introduction of the Enter key functionality almost renders the Search button useless. Interestingly, even though it is an explicit call to action, the user will typically not interact with it — but removing it leaves the user interface feeling as if something is missing. Having both options, with the same functionality, is a user-friendly and clear way to handle this unique issue.
Loading multiple images can cost time for the user. Spotify provides 3 different versions of various sizes. We would need to make sure to pull the thumbnail version. At 64px per image, the loading time is minimal.

#  #