Playlist Genie.

team.

  • kaitlyn huynh
  • ryan montelone
  • anne chen
  • ashwath ramakrishnan
  • lola keychenko
  • vastal verma
technology.

  • Spotify API
  • Python
  • MongoDB
  • Node JS
  • React
  • Axios
  • Streamlit
description.

An online application that recommends users music based off of emotions detected through facial and voice recognition. Try out different emotions and if you're not in the mood, tell the application how you're feeling and Playlist Genie will give a playlist including songs that match the given mood!

implementation.

Started by designing the initial mockup in Figma and carried over key assets into the final product. Using React, we built the front-end based on the finalized Figma prototype and collaborated with the team to integrate the front-end, back-end, and machine learning components. To connect the front-end with the ML portion, we used Streamlit—a Python-based web framework—which allowed us to trigger the ML component and avoid network or permission issues. The Spotify API was used to access playlists already set up in the back-end, and Axios enabled communication between the React app and the server by sending emotion-detection requests via webcam or mic and updating the app based on the response.

what i learned.

  • more practice working in an agile environment with 2 week sprints
  • how to collaborate with others on a full-stack application
  • using github for version control
  • connecting back-end and front-end with multiple moving parts (back-end->front-end<-machine learning)
  • different components of front-end (axios, api, react, node.js)
  • better understanding of back-end architecture and how to connect it to a live application
  • deploying applications in the cloud (ex: using streamlit to deploy and manage our application)

Watch this video for a demonstration!

Watch this video for an in-depth presentation!