
Show HN: I'm 15 and made a bedtime calculator with React JavaScript - joshternyak
https://www.sleepsources.com/bed-time-calculator/
======
joshternyak
Ever wake up feeling groggy, even though you thought you had enough sleep? It
turns out that by timing your wake up time based on REM cycles, you can wake
up more refreshed and more productive.

This got me thinking, why don't I put my front-end web development skills to
the test and build a tool that will help people optimize their sleep schedule?

So, I built a bedtime calculator with React JS, as well as some fancy CSS
animations.

Looking forward to your feedback and suggestions :)

~~~
gms
I have nothing to say other than to encourage you to keep going and ignore any
haters. This is really great - I wish I was doing things like this when I was
your age.

------
Hnrobert42
Wow! The site and its functionality are cool. I am not a web dev, so I can’t
say much more than that.

What really impresses me is the site’s collection of information and its
presentation. It is very thoughtful. Not too much. Not too little. You even
included sources for most of your information. Fantastic! Don’t lose focus on
your writing skills as you develop your technical skills. Both will serve you
well. Great work!

If I may make a few suggestions, please consider:

1\. The calculator says you should try to “fall asleep at <time>.” Maybe
calculate a “bedtime” by including “time to fall asleep.” Default to 20
minutes, but allow the user to adjust.

2\. The first sentence tripped me up. “ You should go to bed 5-6 90 minute
sleep cycles before your wake up time.”

a. It should be 90-minute. See rule 4:
[https://www.grammarbook.com/punctuation/hyphens.asp](https://www.grammarbook.com/punctuation/hyphens.asp)

b. Consider breaking it into smaller sentences that lead the reader to your
point. Something like:

People sleep in 90-minute cycles. They need five or six complete cycles to
feel refreshed. Waking up mid-cycle feels worse than waking up earlier at a
cycle boundary. Use this calculator to determine an ideal bedtime based on
when you need to wake up.

Anyhow, just some minor thoughts. Overall, it is a great site, and not just a
for a 15-year-old.

~~~
xupybd
Any tips on improving technical writing beyond what you've mentioned here?

~~~
NamTaf
Write in active voice. That's the single most important lesson I learnt when
writing technical specifications.

The #1 goal of technical writing is to be clear and accurate, so passive voice
should take a back seat unless you cannot phrase it otherwise. Active voice
lets you convey clearer, more concise statements that describe a concept.

Take for example "the ball was thrown by the man" vs "the man threw the ball".
The latter is much more concise and easier to parse because the active object
preceeds the passive one and so the concept unfolds linearly.

If you're using Word for writing, go into options > proofing > find 'writing
style' and hit 'settings' > turn on 'passive sentences'. I just throw it to
the default 'grammar & style' because I'd prefer to know of and actively
decide against style issues than not. It's helped drill my writing
significantly.

~~~
valbaca
Thanks for the tip for Word! Those settings are put real deep in the options.

------
jedberg
I've been using [https://sleepyti.me](https://sleepyti.me) for many years.
It's simple and easy, which is usually good when I'm tired near bedtime.

I actually like your time picker better, but amusingly since I actually wanted
to get up at 8am, I had to flick it slightly back and forth first.

Also, sleepyti.me gives me more options, including the "not so healthy"
options, which I sometimes need because I don't do the calculation till late
in the night but I still want to time my REM cycles.

They also have the "I'm going to bed now" button, which tells you when to wake
up, accounting for the 14 minutes to fall asleep. I use that button a lot.

Overall this is great! Just wanted to provide some comparative analysis.

~~~
joshternyak
Thanks so much for the feedback!

------
jasonlfunk
Great work!

I'm curious how this tool relates to the rest of the site:
[https://www.sleepsources.com](https://www.sleepsources.com)

Is it a family-run site that let you create and launch the calculator? Or did
you build the whole site? What's the bigger story here?

------
sidyapa
Keep making stuff like these, this habit will be the biggest force multiplier
in your life. I wish I had started so early. All the best.

~~~
joshternyak
Thanks! I will.

------
191101
This is quite nice but I feel a bit too simple. Sleep cycles vary widely from
70-120 minutes per person. I think an advanced mode where a person can input
their own record of sleep duration would be nice. Or even getting a couple of
sliders to play with varying REM, NREM cycles would be nice.

~~~
natdempk
I never knew this. How can someone determine how long their sleep cycle is?
I’d love to figure out how long mine is.

~~~
crooked-v
A good sleep tracking device with an accelerometer can generally record light
sleep vs heavy sleep periods. See worn devices like Fitbit Versa 2 or (with
the new watchOS 7) Apple Watch 3 and later, or devices that sit on the
mattress itself like Withings Sleep.

------
teniutza
This is really cool and nicely made! Congratulations! I'm assuming you don't
have years of programming experience (feel free to correct me!) which makes it
even more impressive when looking at the things you got right. This include
the idea/functionality, layout, source and that cool Moon animation!

I would suggest improving a couple of things:

1) defaults:

    
    
      a) some people don't like pickers (especially this "modern" hour then time thingy) and would like to just click the "Calculate" button. I think that the value that you have already set in the picker is good enough for most.
    
      b) eliminates issues where the value is not visible in the GUI but it is set in the program. Right now, if you open the picker and click on "Cancel" (or outside the picker) without selecting a time, the input does not show a value but you can click on the "Calculate" button and it calculates using the default value.
    

2) tables of data: if there's not much data in a table, like in the one the
recommended sleep time, do consider copying the data instead of rendering the
image. It makes the data searchable (accessibility is important) and, usually,
saves an additional request for that resource.

Definitely continue! You're on the right path.

~~~
joshternyak
Thanks for the in-depth feedback! I really appreciate it and will look into
the issues you found with the app.

------
jfax
I will put aside my anti-JavaScript zealotry and say this is good, nice,
informative, etc. Couldn't be more simple to use.

------
rswail
I started playing with computers when I was that age. That was 40 years ago.
Still play but also get paid for it :)

~~~
joshternyak
Wow, that's interesting.

------
gumby
This is great. I have used REM cycle quanta to set my nap times for decades
and it has made an enormous difference.

My gf’s _prolonged_ use of alarm “snooze” is, imho, a dangerous antipattern.

~~~
joshternyak
Thanks! I'm glad it is a useful tool

------
INTPenis
Does your site explain how to calculate ones own sleep cycle? I couldn't find
it, and it's a simple trick I learned from a teacher many years ago.

Just choose an evening where you wait until you're feeling sleepy but don't go
to bed, start a timer, stay up and after 20 minutes or so you'll start
becoming less sleepy.

It might help to do something like watching a video program or playing a game.

After a while you'll start getting sleepy again, hit the timer. That's a rough
estimate of your cycle. Because everyone is different.

~~~
joshternyak
Wow that's interesting, thanks for the tip

------
Accacin
I've recently started going to bed at 2000-2100 and it's nice to not need to
worry about this stuff anymore. I start work at ~0800 and I'm usually awake
from 0400-0600 so I never risk oversleeping, and my body gets as much sleep as
necessary.

I'm also a morning person, so using the first two hours of the day to work on
personal projects or stuff I want to learn is working out well. I guess my
professional work can suffer as I start to lose concentration about 1400 but I
can live with that!

~~~
joshternyak
I see, thanks for the comment :)

------
blauditore
Those calculations should be taken with a grain of salt: Sleep cycle length of
90 minutes is just a rough average. It varies throughout the night and gets
affected by other factors, like sleep deprivation. There are also individual
differences.

Even more important than the amount of sleep is a consistent go-to-bed time.
People tend to sleep better if they do it around the same time every night,
maintaining a consistent biological day-night cycle.

~~~
joshternyak
True, I agree. I'll add that consideration to the list

------
gosslot
The site looks pretty nice. I have no experience in web design, so no real
technical input from my side, but I noticed it is inconsistent with the time
representation.

You use the 12-hour AM/PM representation in the "I have to wake up at..."
picker and in your text below that.

But the actual calculated bed time uses the (imo better) 24-hour format. This
could lead to confusion, but at least is somewhat inconsistent.

------
abhi_kr
So I happened to open this site on Firefox on Android and it's giving me
strange bed timings.

For wake-up time at 6:00AM, it's showing me the following bed timings: 3:30PM,
5:00PM, 6:30PM

Further, I went ahead and opened it on Safari on iPhone where the timings are
correct but time format is 24-hrs instead of 12-hrs

On Chrome, it works as expected.

I'm not a Front-End end dev, so I'm quite curious about what could be causing
this difference.

BTW, great website. It's very slick and useful. I sent to this my parents who
believe Sleeping amounts to wasting time and always keep me nagging about
sleeping too much :P

~~~
joshternyak
That's strange, I'll definitely take a look into that bug. Thanks!

------
xupybd
What's the link to sleep sources?

I hope this kid has found a way to make money out of this.

~~~
petargyurov
Why does every project have to make money? Sometimes a side project is just a
side project.

~~~
crispyporkbites
It’s sponsored content, there’s a link at the bottom

------
globular-toast
Cool. I learnt some things. I don't care that you're 15, though.

~~~
joshternyak
Thanks!

------
Semaphor
My two best changes for my sleep quality and restfulness were waking up very
early (normally between 4 and 5), and usually sleeping for only 6h (7.5 when
especially tired).

I add 20 minutes as buffer to fall asleep.

My Alarm Clock lets me choose between setting an alarm at a certain time, as
usual, but also for a certain time span. I have it preset to the time span, so
I just enter 6h20m (which is normally already picked from the night before)
and I’m good to go.

~~~
joshternyak
Nice, I see.

------
mchusma
Great project! Happy to see young hackers at work.

Doing things like this get you valuable experience, more useful to actually
working than school.

~~~
joshternyak
Thanks, I think so too. I'm really glad that I'm able to work on my projects
from home instead of going to school right now.

------
ryannevius
I thought sleep cycle length is variable to an extent. I once calculated my
own to be around 110 minutes per cycle, rather than 90 minutes. Using that as
a base for calculating bed time has worked well for me. If cycle length
variability is indeed a thing, it would be an interesting parameter to add to
the calculator. Thanks for sharing!

~~~
joshternyak
I'll look into it, thanks so much!

------
nooyurrsdey
Nice work! I really like that i could drag the minute hand on the clock and it
"snap" to the 30 minute value. That's a small but important touch.

This is a simple and straightforward. Don't bloat up the site too much and
this will be a great project to show off and easy to maintain. Keep building
stuff like this :)

~~~
joshternyak
Thanks! Sounds good

------
lohoho
I forgot my password, went ALL the way into my email inbox to reset, and then
had to think of a new password. It was a lot, as you guys understand, for my
tiktok length attention span.

But it was worth to say love the builder spirit and what you created. I'm
going to try it out. Keep up the good work!

------
cel1ne
Nice work!

If you want to get the site-size down, like the top-comment suggested, you can
switch from React to preact.

~~~
joshternyak
Ok, thank you for your suggestion!

------
themacguffinman
This is great. I've traditionally eye-balled it to be 90 min or 3hr cycles
which works as a quick hack, but I'll consider this calculator next time. Can
I just say, it looks like you have good design instincts, I hope it takes you
far.

~~~
joshternyak
Thanks!

------
RugnirViking
This is really cool. My only critisism is based on the text below, i can't
figure out if the times shown take into accound the 10-20 minuites to fall
asleep, or if I should get into bed and shut my eyes 10-20 mins before those
times.

~~~
joshternyak
I'll make sure to make that less confusing in the page. You should take into
account how long it takes people to fall asleep when calculating your go-to-
bed time.

------
senectus1
I'm a long time user of sleepyti.me but i like this interface better.

It would be even better if the times displayed and the "try another time" was
all on the same page. I dislike having to scroll for instant one off
information bytes...

~~~
joshternyak
Thank you so much! I tried hard to make the interface nice by adding cool CSS
animations (check out the moons glow!)

Good point about the "try another time" feature. I also want to add a "Go to
bed now" feature, that will tell you what time to wake up if you want to fall
asleep right now.

------
jtchang
Cool site. I actually didn't realize I could scroll down. Maybe a small arrow
or something to show that you can go down after you click?

~~~
teniutza
That's the beauty of the good old scroll bar: if it's there, you know you can
scroll! This does not happen on smartphones and tablets due to the limited
space.

------
martinvol
Website: Since it usually takes around 15 minutes to fall asleep

Me with a sleeping disorder: lol

(No offence, awesome product!, but I can't use it)

~~~
joshternyak
Lol thanks no worries

------
Octopuz
Nice idea. The clocks are one hour off here: the text says 00:55 but the clock
shows 11:55 pm, and so on.

~~~
joshternyak
Oh I'll look into it, thanks!

~~~
alasdair_
I’ve been coding professionally for almost twenty years. Time (especially DST
and edge cases like December 31st and leap years) problems are always going to
be a problem.

Personal favorite: “the time” in the Gaza Strip depends on whether you are
Israeli or Palestinian...

------
kenneth
Does not setting an alarm and walking up naturally help avoid waking up during
the wrong part of the cycle?

------
KaiIrwin
This is great! Keep up the good work!

~~~
joshternyak
Thanks!

------
dosethree
Sweet app, nice job.

I've also used this style react time picker and woosh not a fan them for
usability

------
cvaidya1986
Congratulations on wonderful design and shipping product! :) Keep making
beautiful stuff!

~~~
joshternyak
Thanks!

------
Tade0
Good work - no fluff, straight to the point. I got value out of this in under
a minute.

~~~
joshternyak
I'm glad, thanks!

------
r0rshrk
Amazing project. I especially liked all the useful info provided

------
naveen_
Hey man,

I like the UI & UX of your website.

All the best!

~~~
joshternyak
Thank you!

------
KaiIrwin
This is great! Keep up the good work:)

~~~
joshternyak
Thanks!

------
xariusdrake
Wake up. You can done more.

------
anon9001
Hey kid, welcome to the club. Career software person here.

Here's some unsolicited advice for improvements:

* Focus relentlessly on the calculator experience. Why am I pressing "calculate"? What are some ways you could rework it so that I can give quicker input and get more meaningful output? Your goal should be to reduce friction. Maybe let me type in the time in addition to having the android-style clock widget. Definitely show me a series of clocks as I'm updating the picker as I change the time. It's important to let your users play so that they can intuit about the concepts. Also, maybe show extra times for oversleep/undersleep, but accented in such a way that the user knows they're not healthy choices. Maybe include "in x minutes" with the times too. Maybe start the page with the current time + 8 hours selected, showing the live updating output.

* Bury all the sleep health and science stuff. It's probably great for SEO, but the star of the show here is the calculator widget. If anything, maybe instead have a short promotional video that explains the science/health stuff briefly and explains what the calculator does.

* This would be more useful on my phone, possibly as a native widget. And it would be useful paired with an alarm clock. I'd really like an app (ideally with a widget) that shows me wakeup times based on the current time and lets me quickly set alarms. I always check my phone right before I go to sleep anyway, so it would be easy to click a widget and get proper alarms set. You're probably going to need to learn React Native at some point anyway, might as well do it now.

Take this simple calculator, polish it to absolute perfection, give it away
for free, and promote it wherever you can. Having one successful app at your
age, even if you don't make a dime, will open up so much opportunity for you
that it's 100% worth it.

Also, it's super hard to get software "right", and it's a drifting target.
Look at how much Apple and Google have changed their basic Clock apps over the
years. I think doing everything perfectly is usually terrible advice, but at
your age and with the simplicity of this project, it's worth trying to be a
perfectionist. You'll learn that everything is a lot harder than it looks and
that you should be terrified of software development :)

Side rant: OP led with "I'm 15", which makes sense, and this wouldn't have
frontpaged without that context. I understand that touches a nerve with people
who believe the frontpage should be 100% dictated by objective merits. If this
place gets overrun with industrious 15 year olds trying to show off their
projects to an audience, well, we could have worse problems than that.

~~~
joshternyak
Hi, thanks so much for the helpful feedback! I'll definitely look into
improving the app.

------
shafkathullah
Beautiful, really nice!

~~~
joshternyak
Thanks!

------
mikeymz
did you make the mattress and bed frame site as well?

------
cvaidya1986
Very nicely done!

~~~
joshternyak
thanks!

------
sverhagen
If this is done by a fifteen year old, well done. Given the poor quality of so
many web sites, well done regardless. And my apologies if I'm entirely off
here, but given how integrated the bedtime calculator is with the mattress
sales part of the site, I can't shake the idea anymore that we all fell for
clever marketing, here, instead of that we're presumed to be looking at an
aspiring, young developer's plea for recognition.

~~~
bemmu
Reminds me of this part in Derek's new book on music promotion, on how the
very same thing can be perceived very differently based on context.

 _" Imagine you see a caged feather on a museum wall. The sign underneath says
the artist is a political activist in jail.

Imagine that same caged feather again. But instead the sign says the artist is
a high school kid in Florida.

Or imagine that the only way to see it is to crawl deep into a shrinking
tunnel that opens into a room of mirrors, where the caged feather is suspended
by a thread.

Same feather. Very different perceptions."_

~~~
goblin89
Lately I can’t help wondering how emergence of aggregating platforms like
YouTube (your video is in the same place as “500 Funniest Fails 2020”) or
Spotify (your song appears next to generated muzak by fake artists) and
arrival of mobile devices (your work, no matter how special to you, can be
absorbed by someone sitting on a toilet) are shifting the context in which art
is perceived and affecting the art itself.

~~~
mcintyre1994
It's not quite the same thing, but on your comment about the platform
affecting the art, you might find this dicussion about music interesting:
[https://www.theverge.com/2019/5/28/18642978/music-
streaming-...](https://www.theverge.com/2019/5/28/18642978/music-streaming-
spotify-song-length-distribution-production-switched-on-pop-vergecast-
interview)

> One of the main things that has changed is how people are getting paid, and
> it’s is affecting how songs are being written. In the past, you used to get
> paid if you sold an album or a single. In 1995, we had songs that were
> coming in at four minutes and 30 seconds. Today, songs are down to three
> minutes and 42 seconds, because of the difference in how artists are getting
> paid now. Instead of getting paid by physical sales, you’re getting paid in
> a stream, which only counts if someone listens to 30 seconds of a song. It
> actually makes sense if you can have more songs streamed at a time, which
> means that you want to pack your album full of much shorter songs. So if you
> have an album like Drake’s Scorpion, which is a really long double album
> coming in at almost 90 minutes, he’s got a ton of really short songs on
> there, because he gets paid for every song you listen to, whether or not you
> listen to the whole album.

> Not only are songs getting shorter, but the way artists are introducing
> their songs is changing. Gone is the era of long intros that sort of slowly
> get you into the song. Today, we are not only seeing songs getting shorter,
> but there is a sort of a new song structure that we’ve observed that we’ve
> called the pop overture, where basically a song, at the very beginning, will
> play a hint of the chorus in the first five to 10 seconds so that the hook
> is in your ear, hoping that you’ll stick around till about 30 seconds in
> when the full chorus eventually comes in.

------
jakehop
Well done!

~~~
joshternyak
Thank you!

