MoodScape

Inspiration

We were inspired by how Receiptify(https://receiptify.herokuapp.com/about.html) brought people together through their shared love of music. Building on that idea, we set out to create an experience that feels more immersive and emotionally resonant. With Moodscape, we transform listening habits into personalized landscapes that visually reflect a user’s musical mood. Our goal is to foster new relationships and build upon old ones through shared musical connection

What it does

Given the last 50 recently listened to songs of your Spotify listening history, Moodscape analyzes your music taste and allows you to explore a 3D environment tailored to you. You can join your friend’s worlds and see what their musical environment is like!

How we built it

We built the front end using React + Vite, and designed it using JavaScript with Tailwind CSS styling. We made a series of 3D landscapes using existing 3D models and React Three Fiber tailored to various moods. Regarding the back end, we used JavaScript to fetch Spotify API data and combined it with LastFM to calculate the overall mood in real time. We enabled the ability to visit friends' worlds by storing IDs and moods in a Postgresql database. Lastly, we had efficient batch processing of the LastFM API data as well as secure OAuth 2.0 flow with Spotify.

Challenges we ran into

We had a hard time solely using components from react three fiber, so we used online models from sites such as poly pizza for models as well. Last year Spotify removed valence (determined whether a song was positive) and energy (determined how hype a song was) from their API, so we pivoted to using both the Spotify API as well as the LastFM API. We used the Spotify API to get the user’s ID and top tracks while using the LastFM API for mood calculation purposes.

Accomplishments that we're proud of

We created multiple 3D environments from scratch and it took up a majority of our time. We also implemented audios which made the world feel multi dimensional. Furthermore, we implemented lighting into the 3D environments which made it feel more realistic toward the mood. We were also able to implement difficult goals such as visiting friends' worlds through creative implementations.

What we learned

We learned how to use three.js and incorporate it into a React app, by using React-Three-Fiber. Additionally, we learned how to connect components together with Spotify’s login page, and parse through data to find a common theme. We also learned how to problem solve in creative ways after going through multiple roadblocks.

What's next for MoodScape

We plan to apply for the Spotify quota extension to gain the ability to scale for more users on the application. We also want to develop an algorithm to create these moodscapes given the 3D models, so we don’t have to create the environments manually. This way, each user would receive a completely unique world each time. We want to make some improvements to the speed of our application as well. We plan on doing this by making improvements to the mood calculation algorithm and introducing caching to our future world creation. Lastly, we plan to integrate sharing to social media, to further the social connection our product brings.