Skip to content

A website that allows you to keep track of your sleep, simply.

Notifications You must be signed in to change notification settings

lizageorge/hypnos-ii

Repository files navigation

Hypnos

A website that allows you to keep track of your sleep, simply.

This repository will keep track of my progress in my second try at this project, and what I learn along the way.

View the latest version of the project here; https://hypnos.vercel.app/


GOAL:

The purpose of this project is twofold. The first is to build a very simple website that can be used as a sleep tracker, which is legitimately just something I need to help get my sleep schedule back under control. The second purpose of the project is to act as a way for me to learn new web development tools and techniques. I’ll start by making the website using vanilla JS, CSS, and HTML (a basic front-end-only façade). Once I finish that version, I will recreate the project using a new tool or framework that I'm learning, and then repeat this process adding additional functionality along the way.

TIMELINE:

*subject to change, I’ll update this README as necessary. I start a different coding bootcamp in July and college in August, so a lot of this schedule is up in the air depending on how much free time I get. UPDATE August 31st; as expected, the time I get during college to work on this is very limited. I expect to pick this project up again during winter break of 2021, but it will have to go on the backburner until then.

6/14/21 - 6/30/21: vanilla JS/HTML/CSS

8 days: re-learn how to add backend functionality/connect to a database (using AWS?)

3 days: add that backend functionality

7 days: remake using a styling front-end framework and improved design (Bootstrap? Tailwind?)

10 days: remake using a front-end framework (React or Vue)


IDEAS TO EXPLORE IN THE FUTURE

Tools/Knowledge
  • using some better, digital way to design page layout and flow?? idk what it's called yet
  • do some more research on what makes a good website and web design and implement that (changes to font, font size and line spacing and line lengths, colours used and where they're used, the overall layout, etc.)
Features
  • log in (creating a hypnos account? connecting to other things like google? needs a lot more research)
  • changing background design (morning/night sky) based on time of day (so at nighttime, if logging right before sleep, it would be in darkmode and background like night sky, and then in daytime if logging right after waking up, it would be in lightmore and background like a pale sunset)
  • settings
    • adjust if the day being tracked is the day of the morning or night before (but in the bkgd it's always the morning)
    • dark mode/varying background
    • military or regular time (but in the bkgd it's always military)
  • adding calender and clock widgets to form for logging sleep time
  • adding histogram widget to view sleep trends over time
  • connect to a way to track changes in health, mood or productivity?
  • analyizing sleep data
    • variations by weekday and weekend
    • allow user to set their ideal sleep range and colour-code! or just grade those different days, find any trends, etc.

About

A website that allows you to keep track of your sleep, simply.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published