Sharing songs with our friends is one of the special ways of bonding, but sometimes, we want to share more than just a list of songs in a playlist. Each song often holds a different memory, experience, or meaning to everyone, and we want to showcase that. This is where the idea of songful++ comes in. It is a music playlist with a story.

What it does

songful++ takes a list of songs from any given Coda document and displays it on a visually appealing map. Users can share their stories through their playlists with others, or enjoy by themselves. To see more details on a song, users can click on the corresponding "planets". Users can also edit the personal note attached to each song.

How we built it

We used react.js and mui components to create the frontend of the application. We also used Spotify's Web API to play the music, and display details of songs such as the artist name, and the album art.

Finally, we used the Coda API to get the songs from our Coda documents. Using Coda was helpful because everyone is able to easily add songs, create their own playlists, and manage their playlists easily. It also meant that we didn't need to set up a backend database! The Coda API also helped us with the "add songs" functionality, as it allowed us to directly add rows to respective Coda documents through our application.

Challenges we ran into

  • Figuring out how to use the Spotify API: going through Authorization requests in order to access their Tracks and Album API, getting music to actually play
  • Using the Coda API and finding out that we could only read/write tables and not other components like text boxes
  • Dynamically generating the parallax stars, and the path between each song: this required some math
  • Using React for the first time: It was the first time some of us were using React!

Accomplishments that we're proud of

  • Figuring out how to use the Coda API
  • Dynamically displaying any playlist given a Coda document id

What we learned

  • Learned about fetch requests, how to use API keys, and how to authenticate using OAuth2 flow
  • Learned that there are many uses for a Coda document!
  • Learned some git tricks

What's next for songful++

  • Customizability: Allow users to change/set backgrounds, having options for different themes such as mountains, oceans, etc.
  • Song enhancements: Add an audio visualizer, allow users to reorder songs, allow users to add photographs to the songs
  • Community: Allow users to share their playlists and browse through other user's playlists
  • Privacy: Allow for different levels of access for playlists

Built With

Share this project: