myspotifyarchi.tech

• 

  Landing Page

• 

  Data Page

Inspiration

Humans have always been fascinated by music. Therefore, we wanted to create a website that can help everyone visualize the music that they’re listening to.

What it does

Login with your Spotify account to view your top 10 songs + those songs are mapped to categories like mood, loudness and acousticness.

How we built it

We used the Spotify API to authenticate the user’s account profile and obtain their top 10 songs. Then we used individual song data to create chart visualizations.

Challenges we ran into

The main challenges we ran into include Spotify API authentication issues and CSS formatting.

Accomplishments that we're proud of

We are proud of how well the data charts are implemented (although they are not fully completed) the fact that we can create visualizations with sample data sets is nice. In addition, we are also very proud of the front end of the web application, a lot of effort was used into making the buttons look nice for the client.

What we learned

We learned a lot about the Spotify API and the types of data that it can provide for each Spotify user. This hackathon introduced some members to the world of APIs and their use cases.

What's next for myspotifyarchi.tech

We plan to continue working on this project and fully implement the visualizations for all categories, as well as, create a feature that recommends 10 new songs based on the data provided.

Figma Wireframe

https://www.figma.com/file/YkCJsQUD5JuatsjdVBfCLc/myspotify?node-id=0%3A1

Built With

• react
• spotify