ArtistSpot

Inspiration

We were interested in learning more about API's and how to incorporate them into a website. Since we were both interested in music and saw that the Spotify API has a lot of resources available for developers, we decided to go with the Spotify API.

What it does

Search the Spotify database using the Spotify API to find the top 10 songs of a music artist.

How we built it

Tech stack includes HTML5, CSS3, and Javascript.

Challenges we ran into

• How to incorporate the Spotify API and what programming language to use to accomplish this?
• How to add a Spotify Widget?
• How to connect the front-end with the front back-end?
• How to hide the authorization code and secret keys from the Spotify API with Javascript?
• How to add the code to Azure and also hide the secret keys?

Accomplishments that we're proud of

• Learning Javascript to incorporate the Spotify API into the website
• Adding a Spotify widget to the website
• Learning new things about Javascript

What we learned

• Incorporating the Spotify API into a website
• Working with the Spotify Widget
• Making a grid in CSS
• Making a custom element in JS to use for the header and footer elements (although we didn't use this approach as it slowed the loading time)

What's next for ArtistSpot

Next steps is uploading the code to Azure in a way that will hide the API authorization keys. We were not able to do it this time due to timing. We also hope to add a page for people to search the Top 10 Songs by Genre in addition to searching by artist names. The result will be similar to what is seen on the Artist Search page.

Built With

• api
• css3
• html5
• javascript
• spotify