Happy Days Song Search 🎼

week10-Joe-Ivo

Description

This is an app where you can get song recommendations based on audio features such as tempo, energy, danceability and speechiness. You can find a list of all possible features here.

To use the website,

1. Login and get cookie from Spotify
2. Search for a track with track name and artist
3. This will populate the song feature sliders based on the selected song (change them based on your mood!)
4. Hit 'Search for recommendations' button to get tracks that match the audio features

N.B If you are having problems with the search then you can search with one word in each input (or click the search button twice).

Reviewers!

Please review the deployed version due to the issue mentioned in the Local Deployment section.

Any insight on these two questions is much appreciated

1. Originally, when you searched a song, the sliders appeared at the right values. However, as we responded to new challenges something got lost, and this doesn't work any more but we aren't sure why.
2. You cannot use .then() promise chains in an onSubmit event like on line 31 of song-info-search.js. Why is this?

<form onSubmit={(event) => handleSearchTrack(event, trackSearch, token, setSongInfo, songInfo, songAudioFeatures, setAudioFeatures)}

Notes on Authentication

We are using the Implicit Grant Flow authentication method from Spotify to aquire a token.

Local Deployment

Because of how the Spotify authentication system works, it isn't currently possible to deploy locally unless you change your code, namely by making an access token available some other way.

We actually wrote a little server that serves tokens before we decided to go with the login-auth method (because it's cooler), so if you want a token you can just hit this url. The server doesn't support CORS.

Also be aware that tokens only last an hour - if things that were working suddenly break, it's probably that.

Project set up (if you want to run locally)

1. Clone this repo
2. Run npm i
3. Run npm start

The API routes we used

Using an access token, we plan for our app to use these routes:

React stuff:

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console