Dancing to the Decades

We created a journey through the history of music spanning 6 decades.

Comment

Inspiration

We were inspired by Spotify playlists from various decades and wanted to consolidate all these different tunes so that people could find common ground through music.

What it does

The main page resembles a museum gallery stroll, where visitors can look at and interact with musical devices, each from a different decade, by clicking on them. Every time a device is clicked, they will be redirected to a "room" with the corresponding decade's theme.

How we built it

We used the programming languages HTML, CSS, and JS, along with the Spotify API.

Challenges we ran into

We had a hard time implementing the Spotify user authorization and animated dancing figure that we originally wanted to include. It was also challenging making each and every design element go along with a consistent theme.

Accomplishments that we're proud of

We're proud of creating a completed, multi-page website, having visually appealing designs for each decade with parallax scrolling style and embedded Spotify playlists.

What we learned

We learned how to utilize more unique UI design themes, like parallax, and smoothly integrate Spotify into pages. Most importantly, we learned how to collaborate effectively on a coding project in a virtual environment within a limited amount of time. Since this was the first hackathon for all of us, we'll definitely be applying what we learned in this event for future hackathons, group programming assignments, technical interviews, etc.

What's next for Dancing to the Decades

We would like to connect the Spotify API to authorize the user’s Spotify info so that when a visitor clicks on a musical device on the gallery page, a random song from the corresponding decade will automatically start playing. We are also looking into incorporating a dancing stick figure for each decade, whether that be on the pages themselves or projected outside the device as an AR model. In general, we would add more songs and fun facts, so users can listen and learn more about each decade.

Share this project:

Updates