There is no doubt that quarantine had everyone bored out of their minds, from endless hours spent scrolling through Tiktok, to switching between the same 3 apps, it was time for a change. We know that Spotify’s web API has a bunch of properties that have been the route of multiple apps which usually use the data to produce more Spotify-based results. We wanted to develop a website which uses the Spotify API data, and after analyses, produces a recommended external link for the user.

What it does

It uses the Spotify Web API to authenticate users, who then are able to put in the name of any song on Spotify in the search bar, to then open a link based on a calculated energy/happiness matrix.

How we built it

We built this website using Javascript, HTML, and CSS. The data is retrieved from Spotify’s API endpoints, including the Search endpoint, and the Audio Features Objects. We also created a prototype of the website on Figma which showcases the future of Linkify.

Challenges we ran into

We ran into some challenges learning the syntax and overall code for Javascript since none of us were experienced with it, and we faced some difficulty beginning to use Spotify’s API data, due to the fact that we needed authorization tokens and had to follow very specific steps. However, with the help of mentorship and Spotify resources, we were able to overcome these obstacles. Additionally, we faced some challenges connecting the frontend and backend for the website, but we were able to make it work in the end.

Accomplishments that we're proud of

We are really proud of getting the backend completed to meet all of the initial goals we set when planning our hack. We are also very happy that the matrix created accurately portrays the song that is put in, and gives a link which correlates with what the mood depicted by the song is (e.g. “Hello Darkness my Old Friend” will produce a link which is classified as the saddest and most low energy on the matrix.

What we learned

We learned a lot about using APIs, web development, UX/UI design, and how to connect frontend and backend code. At the beginning of the hackathon, we were Javascript and Figma beginners, and we worked hard all weekend to build skills to create a project we are all proud of.

What's next for Linkify

Our next steps for Linkify are to code a website similar to the prototype in Figma, which features input for not only tracks, but playlists and user data as well. In the future, we hope to also deploy the website using a domain, and use more of Spotify’s metrics (e.g. tempo, loudness, etc.) to create more accurate analyses, and provide more links for users. Additionally, we could incorporate artificial intelligence and other technologies to streamline these processes.

Quick note

When opening and presenting the Figma prototype, it looks best when you adjust the view to Fit, so that you can see the whole screen.

Built With

Share this project: