moosic

Name: moosic

Role: Design Lead, Frontend Developer

Team members: Shelly Wu, Belinda Xi, Anna Xia

Timeline: September 11 - 13, 2020

Tools: Figma, HTML/CSS, Python, Flask

During times of isolation and social distancing, we found music to be a great source of comfort and companion. Playing music that goes with our mood of the day made us feel not so alone. We wanted to build a web app that would make curating playlists easy and fun (by selecting emojis!).

Log in with your Spotify account and select one or more emojis that describe your current mood or the kind of music you want to listen to. The web app will generate a curated playlist based on the characteristics represented by the emojis (e.g. dance emoji = high danceability), as well as the listener's top tracks, artists, and genres. The app will then display insights of the playlist, breaking down each parameter in percentage form.

This project was definitely a difficult one. Since my team is new to building apps that incorporate APIs, we found it difficult to implement parts related to the Spotify API, such as the authorization and analytical algorithm. We started building the backend with Python and Flask, but then later realized that most of the documentations on Spotify used Node.js.

However, we still learned a lot this weekend. We all read a lot of documentations and watched a ton of tutorials on using the Spotify API, so we definitely learned a lot about the capability of the API. On the frontend, I learned some new CSS tricks related to hover animations, custom checkboxes, and flex box formatting.