Inspiration ✨

As all of us are students, we are familiar with struggling to get a consistent regular amount of sleep each day. We also recognize that some people have trouble sleeping, which is why we made a relaxing space that makes it easy for users to have better sleep and get their sleep schedule back on track!

What it does 😴

Sleep Cycle aims to provide a simple way to track your sleep and offers every sleep-related feature you might need to get a better night of rest - all on one page. Some of the features include a mini dream journal to track the memorable dreams you may have during your slumber, song recommendations to go to sleep to, a sleep tracker, and a form to rate your sleep quality!

How we built it 🌛

Sleep cycle is built on Glitch using HTML, CSS, JavaScript, Node.js, and uses a SQLite database. Figma was used for prototyping and we used chart.js to build the sleep tracker.

Challenges we ran into 👩🏻‍💻

We had trouble with using client.js, as it was our first time using it, and since we had no prior experience with creating HTML graphs using Chart.js, we needed to figure out all aspects of it, including how to scale the graph and enter user data. It was also our first time using the Formspree API, so we had trouble connecting it to our website and getting submissions to go through. Moreover, we had issues connecting the domain name to our glitch project, because we had no experience with working with custom domains. Most of us were first time hackers and new to hackathons, so this was a very new experience for us.

Accomplishments that we're proud of 🌝

We managed to finish creating a fully functional website in a short period of time, with limited prior knowledge of HTML, CSS, and JavaScript, and we are very happy with how Sleep Cycle turned out, especially with its design.

What we learned 💻

We learned how to implement HTML graphs using Chart.js and how to use Formspree API as features to our website. We also learned how to link a registered domain to our project (sleepcycle.space)!

What's next for sleep cycle 💖

We want to turn Sleep Cycle into a mobile app for improved practicality and accessibility, as well as improve its UI/UX and add new features, such as tracking statistics in a user profile and allow users to compare their stats with friends by implementing logins through Firebase.

Share this project:

Updates