Inspiration

Our idea was inspired by our mutual love of music and motivation to reduce social isolation, especially given the current situation our world is facing. For both of us, music is an important pass time and a great strategy for reducing stress. We really enjoy listening to music with other people and sharing songs, yet realized that there is no real way to virtually experience the fun of listening to a song together. Therefore, we decided to build our service Melodia, which allows just that. Melodia creates an interactive user experience where people can get together, listen to music virtually and be able to have a mini Jam-Sesh with friends no matter where they are!

What it does

Melodia allows multiple people to join the same room on our website, collaborate on a queue together in real-time, and listen to music in-app. The participants search for whichever songs they'd like, using them to build a live-synchronized queue. Ultimately, Melodia creates an interactive listening experience that lets people enjoy the fun of music together, virtually.

How we built it

The entire application is served by a Flask server on Google App Engine. The API is built on flask-socketio and flask-mongoengine, with MongoDB Atlas used for hosting our DB. Our homepage was made with Vanilla HTML/JS/CSS, and the room page was created with React.

Challenges we ran into

We wished to have real-time syncing of song playback across clients, but that proved too unwieldy a task for the time we had and the technologies we chose. Adam created the homepage was new to web development, and JS DOM code was a difficult concept to learn. Furthermore, understanding websocket concepts and getting state across clients and the server to sync properly was difficult and took a lot of trial and error.

Accomplishments that we're proud of

As someone who was entirely new to web development, Adam is proud that he was able to learn on the fly and contribute to a complete web application. Josh, who did the React and Flask programming, was proud of his first-ever use of WebSockets and a cloud-hosted MongoDB database in a project. Together, we are very proud of how cohesive this project is!

What's next for Melodia

As we couldn't implement song playback syncing, in the future, Netflix-party-style sharing of song progress and play/pause state would be a desirable feature. Others paths Melodia could take are saving playlists after the lifespan of a room, uploading your own files, Apple Music/Spotify integration, user accounts, room chats, etc.

Share this project:

Updates