Main project website, written in React
Web (and also Windows/Android native) application, written in Bootstrap

Inspiration

We've encountered lots of challenges in society recently surrounding mental health, as a consequence of the social isolation that has resulted from self quarantine, as well as the anxiety-inducing nature of our present circumstances. All of us competitors are orchestra members at our high school, and we were hoping we could bring what we knew about music to help out the situation a bit. Research shows that social isolation leads to pre mature mortality and listening to the certain music (celtic, indian, native american and jazz) with rain and thunder for 45 minutes results in a easy relaxer.

What it does

Melodify is a web application that can be installed via Electron to your desktop PC or Android phone, or simply run from your browser on any device. It uses scientifically backed research from the University of Nevada as well as Stanford University (https://www.unr.edu/counseling/virtual-relaxation-room/releasing-stress-through-the-power-of-music) to come up with a "sound bath" which you can personalize to your tastes that helps you relax and de-stress. This includes four different types of de-stressing "melodies," as well as customizable natural ambient noise.

How it applies

Thus app is health oriented and focused on stress during Covid-19 which thus falls under the sustainability path.

How we built it

The website for the project was built using the React framework, while the web application itself was built using the Bootstrap framework. Both revolved around a Javascript backend and HTML/CSS frontend. We then used the Electron framework to distribute the application as native on multiple operating systems, including Windows and Android.

Challenges we ran into

None of us have prior experience with web development, so the rush to learn it was quite insane. Originally, we were going to use cookies to store user data but we ran out of time, barely managing to deploy the application in time for the submission deadline.

Accomplishments that we're proud of

None of us have prior experience with web development, so gathered that we built a fully functional online web application that can be installed to three operating systems, is mobile optimized, and has a cohesive design is actually pretty cool, if we may say so ourselves.

What we learned

Lots and lots about web development. React is a beast, Bootstrap is a bit nicer to work with, preprocessors can be a pain to setup, Electron is Github's great gift to humanity.

What's next for Melödify

We plan to implement cookies for user preference and configuration saving, as well as a changing set of featured relaxing tracks, as well as deployment to more target platforms (Mac and Linux would be great, and iOS is currently being worked on).

Also, currently it only works well on Google Chrome, Edge, and other Chromium based browsers.

About Melodify Powerpoint

https://docs.google.com/presentation/d/130q-hG_I9iNxJiApT8-h77Cfcl2nGpztcfebO-Sxpko/edit?usp=sharing

People Behind Melodify

Rhea Dixit, Ryan Ma, Daniel Wei, Haoli Yin Discord: rheadixit, danielwei, ryanma, haoliyin

Built With

Submitted to

TitanHacks

Created by

I worked mainly backend and data management.

Ryan Ma
Created and linked the React pages using React-router. Also wrote the css.

Haoli Yin
I focused mostly on research behind the project (music files, data, etc) and design on individual parts of the project.

Rhea Dixit
I coded the majority of the web application using Bootstrap framework, and the usual mixture of HTML/CSS/JS. I also deployed it to Windows and Android native using Electron.

Daniel Wei
Java, Web Development, Linux, Networking