Listen & Swipe

Inspiration

We were inspired by various Spotify related analytics apps already available such as receiptify.herokuapp.com, Tinder, and an idea our mentor Ryan Yang mentioned combining Tinder and Restaurants.

What it does

The Listen & Swipe app displays a swipe stack of cards, with each card showing a song profile of the title, artwork, artist(s), and album. The user can then swipe right or left with each card to decide if they want it or not, and can even click on the artwork to be directed to the song on Spotify and listen to it before making a decision. Once the user has swiped on all the songs in the stack, they will be able to see all the songs they liked.

How we built it

We used React and the Spotify API to build the website and extract information. We had a lot of help from our mentor Ryan Yang! Big credits to him! We also used this prebuilt Spotify library by JMPerez located here: https://github.com/jmperez/spotify-web-api-js.

First, Ryan showed us the ropes and basics of web development and helped us set up the application and API. Then, we started to implement the basics of our app, which includes collecting the user’s Spotify data, selecting the info we need, and organizing it for the UI. From there, we created a swiping interface for the user to interact with and a second page for the user to see all their liked songs. After that, we worked on all the details to make the UI as simple and easy as possible to use.

Challenges we ran into

Creating the Listen & Swipe app wasn’t an easy task, so we definitely encountered some challenges along the way. None of our team members had experience in web development prior to this hackathon so it was definitely hard getting started and knowing what to do. It was hard trying to understand how to start the app and how to implement some of the first functionalities we wanted to be available to users. From there, we had to overcome understanding the workflow of the app as a whole, and how to collect information from an API, and how to design the UI of our app. It took us a couple hours to get the Spotify Authorization to correctly work on the first day, and a couple more to understand the problems with how we were accessing the data on the page.

Accomplishments that we're proud of

We feel extremely proud of the work we’ve done in the short amount of time that we had, especially with the help of our mentor, Ryan Yang, guiding us along the way! In particular, we’re very pleased with the user interface of the app and how clean it and cool it is, the functionality of being able to display recommended songs in the swipe stack and the swiping feature, and the fact that it even works!

What we learned

Considering how this is a beginner hackathon and the first one for many of us, there was quite a lot that we learned along the way. This includes how Javascript, CSS, and HTML work together, how collecting information from an API works, what an API is, and how to make a basic web application. We also learned how to style things in CSS, how designing a UI works, and how to create multiple pages that interact with each other.

What's next for Listen & Swipe

If we were to continue building on this, we could refine the recommended songs to be more accurate and recommend songs from a user’s Discover Weekly. We would also like to add a functionality where the users can add the songs to their playlist if they want to.

NOTE: Please use the http://cc91a3ff40cd.ngrok.io link!