Skip to content

A single page web app to search Spotify's database by artist, album or track built using JavaScript, jQery, HTML & CSS via Spotify's API.

Notifications You must be signed in to change notification settings

markleds/SearchSpotify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Left Shark

Spotify List

This weekend we're going to build a Spotify Search website. This website should allow users to search for Artists, Albums, and Songs. We'll be making use of Spotify's Web API to implement our website's search functionality. The Spotify Web API allows for many different types of queries, but we're going to focus on just Artist, Album, and Songs.

Learning Objectives

  • Sending multiple/nested AJAX requests
  • Reading API documentation
  • Handlebars.js templating
  • Query Parameters
  • Debounce from Underscore.js (Bonus)

Resources

Set Up

No starter code has been provided. Create your own HTML, CSS, and JavaScript files, link them, and link jQuery and Handlebars.js (and Underscore.js if you're using debounce). Spend some time reading Spotify's API docs. Figure out how to use the API to search (keyword: search) by Artist name first. This will be great practice for reading API docs, something you will find yourself doing a lot as a web developer.

Completion

Create a website that allows users to search for music using the Spotify API and fulfills the Features list outlined below.

Submission

Homework is due Sunday by 11pm. Follow the Homework Guide for instructions.

Assignment

Features

  • User should be able to select Artist, Album, or Song from a drop down menu for search
  • User should be able to see a list of results from their search
  • When a user searches by Artist, the user should be able to see detailed information of each matching artist
  • Use Handlebars.js to template the Spotify API data
  • Design is important! Please spend some time thinking about how to lay out all of this information. Spend time making the website look great! This is an opportunity to practice your CSS skills!

Bonus

  • When a user searches by Artist, the user should be able to click on a button that shows a few of their albums - You decide how to present this information (i.e. modal, side-column, different page, etc)
  • When a user searches by Album, the user should be able to click on the Artist's name to reveal a modal with the Artist's detailed information
  • Implement Debounce feature for the search bar
  • For song results, let the user preview the song - Look into the preview_url property returned by Spotify API and read up on <audio> and <source> html tags

About

A single page web app to search Spotify's database by artist, album or track built using JavaScript, jQery, HTML & CSS via Spotify's API.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published