Attitune

The app that recommends music based on your emotional fingerprint. Describe your feelings, and let our sentiment analysis craft the ideal playlist. Dive in and let the rhythm match your pulse. 🎵🖤

Comment

Inspiration

Everyone on the team is an avid music listener, so we know that not being in the mood for the music in your playlists is the worst feeling. We listened to music while brainstorming ideas, and I noticed that I kept going to my phone to press the skip button. If only I had music that matched my need for focus!

What it does

Attitune collects a string from the user, describing their mood, and outputs a list of songs that fit their sentiment. It uses the following steps to fetch, process, and act on the data.

  1. Grab the string in the text form.
  2. Send it to OpenAI, which rates the sentiment with 4 distinct attributes.
  3. Query our MongoDB Atlas database, searching for songs within a specified range for each attribute.
  4. While not enough songs are fetched, increase the ranges for each attribute and re-fetch.
  5. Fetch the metadata for the fetched songs in another Atlas DB (artists, cover picture, duration, URI).
  6. Display the returned songs in individual components.
  7. If selected, a pop-up with a 30-second song preview and link to the song in Spotify will appear.

How we built it

Frontend

We used Next.js, a React framework which improves performance by utilizing server-side rendering, static site generation, incremental static regeneration, and pre-rendering, which are all crucial in this project due to its computational nature. Knowing our web app was mainly backend, we used Tailwind to ensure that the frontend we had was modern and used its negative space well to complement the backend.

Backend

We used MongoDB Atlas to store song data, Spotify WebAPI to fill our Atlas database, OpenAI for sentiment analysis, and Flask API as the communication between the frontend and backend to tie it all together. Finally, we deployed the web server on Vercel and the Flask server on Render.

Challenges we ran into

The most daunting challenges we ran into were with the Spotify WebAPI and Web Playback SDK. The WebAPI quickly came to a halt with a strict rate limit, so we were forced to migrate the data into a MongoDB Atlas database, so that we could make as many requests as needed. We also planned to use the Spotify Web Playback SDK, but later realized that web playback required a premium subscription. Since this was unrealistic for our users, we scrapped the feature, opting in for an embedded 30-second preview of the song instead.

Accomplishments that we're proud of

We are all proud of our ability to prioritize and minimize scope creep. At a hackathon, it's easy to get carried away with ideas and end up with many unfinished features, instead of a few high-quality features. Learning from previous hackathon experiences, we also made sure to have to have a crystal-clear diagram of the application's processes before hacking, so that everybody was on the same page and could work efficiently and accurately.

What we learned

It was our first time working with Next.js, OpenAI API, and the Spotify WebAPI, and there were many other individual first-times as well. Cole had his first tangible backend experience, Jotsna had her first tangible frontend experience, and Divya had her first experience with deployment.

What's next for Attitune

If given more time, we would have loved to implement a feature where a link to the playlist is automatically generated for the user, to enable sharing and importing into their own Spotify account.

Built With

  • flask
  • mongodb-atlas
  • next.js
  • openai
  • render
  • spotifyapi
  • tailwind
  • vercel
Share this project:

Updates