Spotify Garden

What will your garden look like????? :O

Inspiration

We love listening to music on Spotify, and wanted a fun way to visually represent whatever we're currently into listening to!

What it does

Spotify Garden takes your recent top 15 listened to songs, and builds you a garden inspired by them! Each flower represents a song. The color of the flowers corresponds with the song's mood, and the size with its BPM.

How we built it

We used the Spotify Web API to get a user's listening data and each track's statistics, and built the code using react and html/css elements.

Challenges we ran into

Neither of us had ever used react before and had little to no web development experience. We also had to learn how to make API requests and overcome some technical issues to access the Spotify API correctly.

Accomplishments that we're proud of

We're proud that we came up with an idea and were actually able to make it into a real thing! We also worked hard to push forward and stay focused to learn a lot this weekend about the tools we used.

What we learned

We learned countless things about coding with JS, HTML, and CSS, as well as working with a framework like react and using libraries like axios to access API data. We also learned a lot about web development. Most of all, we got to experience how to break down tasks and work as a team. None of us had ever even used Git before to work on a project with others, so it was a really educational experience.

What's next for Spotify Garden

With a little bit more time, we would add a backend to the Spotify Garden application. It could store user data, allowing users to see other people's gardens or track their own music changes over any period of time. We would also add options to further analyzes one’s Spotify music preferences to get a fuller scope of what they're feeling from their current favorite tracks.