Our app helps decrease anxiety and sleep difficulties caused by the pandemic by slowly steadying your breathing rate, thus making it easier for you to stay calm and fall asleep.
This is the "About Us" page, which includes information on what DreamScape does and why, as well as what it hopes to achieve in the future.
This is the "Calibrate" page, which gathers data on the user's breathing. We then use this data to customize the app to the user.
This is the "Getting Started" page, which explains the process of setting up and using this app.
This is the "How to breath correctly" page, which includes two videos (and their summaries) on techniques which help improve breathing.
This is the "Relax" page, which provides the user with calming soundtracks and a shrinking/expanding circle used to steady their breathing.
Inspiration- Our family, like everyone else's was hit hard by the pandemic. We especially saw how much more stress our parents and friends were under and how that affected their everyday life, including their sleep, and we wanted to do something about that.
What it does- Our app helps users steady their breathing rate, thus slowing their heart rate and calming them. In this way, it decreases stress and makes it easier for users to fall asleep.
How we built it- We built it using css, html, and javascript. We took the users current breathing rate and used it to customize the speed of an expanding and shrinking circle which users were meant to follow along with through their breathing. We also provide many different audio options. We then combined all these features (which were created using javascript and html), into a beautiful design using css. Our app is different from others because we made it so that it customizes the breathing rate to match the optimal rate of that of the user. In this way, the user doesn't end up holding their breath (when the circle is too slow) or hyperventilating (when the circle is too fast).
Challenges we ran into- Overall, we faced many challenges when it came to creating many special features we provide. For example, it was very hard to figure how to get the information from the timer and get an average which we could then use for customizing the expanding/shrinking circle. Furthermore, we had the most trouble when it came to figuring out how to customize the speed the circle changed size, which was supposed to match a person's breathing. We spent at least two hours trying to figure this out and suddenly discovered two solutions at once!
Accomplishments that we're proud of- We are especially proud of being able to find two solutions for our biggest problem. Furthermore, one of those solutions used skills from a math class we learned recently so we were especially proud to have been able to use that knowledge so soon and so well. Also, we are very proud of our design because that was a huge problem for us in previous personal projects and before the hackathon we both resolved to work especially hard to create a beautiful design.
What we learned- We learned how to use features relating to time in html and javascript. For example, we learned how to get information from a timer and then apply that specific time to an animation (another new feature we learned through this project).
What's next for DreamScape- We hope to continue to help those around us during this hard time. Hopefully, we can expand beyond breathing, to other factors which affect both mental and physical health.
Log in or sign up for Devpost to join the conversation.