Responsive web application

Muserfly

Date

Oct 25, 2020May 30, 2021

Role

Full-stack Developer

Project type

Responsive web application

Project code

Project log

Project URL

Work-in-progress video

Final demo video

Built with

Vue 3
p5.js
D3
Node.js
Scss
MongoDB Atlas

APIs

Spotify API

A university final year project which uses Spotify API as the baseline for song searches and audio streaming.


The project is an Emotion-Based Music Streaming App which prioritises user's moods to play songs.


It is also used to speculatively propose a potentially new screen-based behaviour using a map for content discovery.


What I learned from this project is:

  • How emotions can be represented in different graph models and choosing one that particularly works for a scenario takes time.
  • How MongoDB and network whitelisting works.
  • What Oauth workflow is when integrating with Spotify.
  • And how terrible it was to work on a full-fledged project on your own 😩, and write a 4-page long report 🥲.

Gallery

Welcoming page
Homepage
Emotion map (mobile)
Emotion map zoom level 1 (mobile)
Emotion map zoom level 2 (mobile)
Emotion map zoom level 3 (mobile)
Search (mobile)
Track collection (mobile)
Record (mobile)
Record details (mobile)
Settings (mobile)
Ideation - Homepage
Ideation - Speaker
Ideation - Collect tracks
Ideation - Travel in your emotion
Ideation - Settings

Related projects