Spotify API Application

For this project we will be converting our application to a Single Page Application (SPA) that uses the Spotify API to add discovered tracks to a user's saved tracks.

Project Expectations

Main Functionality (Required):

• The application should first allow the user to enter a search query and see a list of results populated. (see search endpoint)
• The app should also allow the user to log into Spotify with their credentials. (see authorization docs)
• The app should allow the user to save a track to their saved list and see all of their saves on the saved.html template. (see library endpoints)
• Since you will be modifying the user's account, you will need additional scoped permissions (user-library-read user-library-modify).
• You can read more about scoped permissions here.

Bonus:

• Allow user to remove saved tracks

Josh's Spotify App

Tools used:

• Single Page Application (Pure Javascript )
  • custom routes and components
• Spotify API (3rd Party Public API)
  • authenticated via Oauth
  • scoped requests
• Axios (Promise based HTTP client)
• Handlebars (Javascript Template Engine)
• Bootstrap (Front end Framework)
• Font Awesome (Icon library)

Search for Songs by Title

On search, app makes a .get to the Spotify API to grab 20 songs based on the search query, inserting them into cards via handlebars, on the index view.

Save a Track

When user saves track. It makes a .put request passing in the song id.

View Saved Tracks

User can navigate to /saved to find their tracks. Using a .get to grab and display their saved tracks.

Delete a saved Track (Bonus)

When edit icon is clicked. Edit form modal opens. .get request grabs all data from API and pre-populates form of respective card. Upon submission: updated data is passed to API via .put request.

Challenges

1. Was able to grab related artist info, but would display all sets in one song card.