Sleep Log
Log when you slept and see what your weeks actually look like.
BeginnerWeb appDashboard8–16hAI-buildable 5/5no setupworth shipping
A sleep tracker visualised as a hypnogram-style chart where each night is a bar positioned by clock time. Patterns like weekend drift become instantly obvious. The chart is the whole value, and the date handling around midnight crossings is genuinely fiddly.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Log a sleep and wake time per night
- Each night renders as a bar positioned by clock time
- Nights crossing midnight render correctly across the axis
- Average duration, bedtime and wake time are calculated
- Weekday and weekend patterns are compared
- A quality rating can be attached per night
- Data persists and exports
The interesting part
- A time axis where the interesting range spans midnight
- Averaging clock times, where the naive mean is wrong
- Handling naps and fragmented sleep
Once it works
- Add correlation with a tracked variable like caffeine
- Add a consistency score
- Add import from a wearable's export
Suggested stack
reacttypescripttailwinddate-fnslocalstorage