Things have been pretty crazy lately. It can be difficult to find ways to focus and stay calm. Well, our team has always been a big fan of Lo-Fi hip-hop music to listen to when we are studying or writing code. It has a certain way of being so simple, and yet it doesn't get old. Now, there are a lot of YouTube streams that provide Lo-Fi music, but these streams don't feel very personal. We thought there could be a better solution. A solution that adapts to your own environment and fits your mood. That's why we built drizzle.

What it does

drizzle is an all-in-one solution for listening to Lo-Fi music. First off, it uses a variety of instrumental samples and machine learning algorithms to generate calming Lo-Fi hip-hop music. As you use the app, unique melodies will be generated and new instruments will come in to create an infinite, soothing listening experience.

However, drizzle goes beyond creating you your own Lo-Fi. It also uses your location to detect the weather and future forecast. It will then use the weather at your current location and what time of day it is to give you an image that reflects your environment. If it is a cold, rainy night outside your window, we'll give you a beautiful image to reflect that. Then, if you want to escape your own location, you can set your destination to anywhere else in the world and experience their time and weather.

Lastly, drizzle keeps track of the time for you, and every 20 minutes it will notify you to look off at something 20 feet away from 20 seconds. This follows the 20/20/20 rule that is designed to reduced eye strain. We often struggle to do this ourselves, and we're really excited that drizzle exists to help us fix our bad habits.

How we built it

We built an electron desktop app so it wouldn't take up another tab in your browser and could just sit off on the side of your screen. We still used React for all of the styling to make it look great, and all of the CSS was written from scratch to enable an interface that really fit our app. We also referenced a great repo that led the way for us to implement our Lo-Fi music generation. While it took care of most of the AI, we had to reconfigure so much of it to get it to work with React and our app's own needs. We also used the OpenWeatherMap API to get the local weather data and moment.js to deal with all the time manipulation.

Challenges we ran into

First off, neither of us had ever worked with Electron so that was a whole experience in itself. Then, we spent most of our time just trying to get Lo-Fi hip-hop to generate itself over time. The repository we used was great to show us how to do it, but it was in such a different codebase that we ended up rewriting really big portions of it to get all of the sounds loaded and working. Getting the design to be responsive was also quite difficult, but we're happy with how it turned out.

Accomplishments that we're proud of

We're super proud of how much we accomplished. We came up with a list of features we wanted at the beginning, and I can't believe we got nearly all of it done with just the two of us. I was really worried after spending most of the first day just getting the music sounds to load and run. However, we put in the work overnight to make an app that is very responsive and can be used for so many different things. It is also very customizable so people can use it however they want. The UI is clean and it flows well, so we're very proud to be the developers behind drizzle.

What we learned

Well, we learned a lot. Electron is the first big thing that we had no idea how to use, but now we feel way more comfortable with it. Also, neither of us is musically-talented whatsoever. Thus, being able to get to know stuff about different chords, melodies, and notes and how they work together to create things was really cool. When we were trying to get the music to vary more we really had to learn about what would still make it sound good. Also, we learned a ton about small styling things and getting design to be responsive.

What's next for drizzle

There's so much more that we can do with drizzle. Just now, my partner and I are still coming up with new features that could make it better. We'd love to add more instruments to the Lo-Fi generation and try to detect the mood of certain melodies so we can better fit them with the weather. We've had a great time and learned so much already, and I think working on it more will be very exciting!

Built With

Share this project: