Melodic | Devpost

Home Page
Custom Music URL
Volume and Controls
Invite Friends
Sound Effects
Twilio

Inspiration💡

Our inspiration is to create an environment where students and meditators alike can connect, relax, and focus while looking at beautiful scenery. Many people today get easily get distracted while studying. Melodic incorporates relaxing sound effects and songs to help people focus and achieve their goals.

What it does ⚙️

Melodic is a centralized platform for students and meditators to focus and collaborate together. It is accessible through the internet on a web app that has built-in music features such as wind, rain, waves, calm breezes, thunder, and crickets - all noises that are great to maintain focus. Furthermore, there are unlimited options for music and relaxing sessions, as users are able to input songs of their choice by URL. Meanwhile, the web page displays beautiful ocean scenery that users can relax while studying. Users are also able to keep track of their study habits. Users are also able to connect and study with their peers by sending a link to their emails.

How we built it 🔧

Melodic was built using ReactJS, HTML/CSS, JavaScript, and Twilio. The frontend was created using ReactJS, HTML, and CSS, which were used to create features such as the sidebar, relaxing scenery, and custom modals. The backend features such as the music playlist, study sessions, random waves, and customizable music options were coded using JavaScript. Users are also able to connect with their peers by sending an email link, coded by Twilio.

Challenges we ran into 🌵

We ran into many challenges such as creating the sceneries using CSS. Creating them was very time consuming and required a lot of precision to get done. Furthermore, learning new technologies such as Twilio and Netlify were difficult and needed a lot of debugging. One specific issue that we ran into was implementing different sound effect and volume features, which required a lot of logic to change multiple React states.

Accomplishments that we're proud of 🥇

We are proud of completing this web app in such a short period of time. Starting our project, it was very ambitious to create a relaxing environment for users to connect. However, looking at our accomplishments, we see that we met most of our goals and even added a few more. We learned a lot of new technologies and created beautiful sceneries such as the waves in the moonlight.

What we learned 📖

We learned so much about ReactJS and improved our abilities with CSS. Creating effects such as the random waves were very difficult, but we managed to complete it. Furthermore, it was difficult to learn new technologies such as Twilio and Netlify, which we used to send emails and deploy our web app. We also learned that communication while working was really important as all the group members made sure to give each other updates on their accomplishments and places where they needed assistance. We also learned about Firebase, which we tried to implement but ran out of time.

What's next for Melodic 📈

The next steps for Melodic is creating authentication for users to create accounts and get rewards for achieving their studying goals, such as unlocking new sceneries, background objects, and sound effects. Furthermore, we are planning on pursuing this project as a startup idea, where users can pay for monthly premium memberships to unlock the new sceneries and audio effects.