Show HN: I'm 15 and made a bedtime calculator with React JavaScript
sleepsources.com
sleepsources.com
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 :)
You've launched something and you've managed to get some very positive feedback. That's more than a lot of other people manage. Make sure you remember how good it feels, and use it as motivation to keep building and launching more projects. I hope we see more 'Show HN's from you.
I think the calculator itself isn't really useful, though I could be wrong. (The reason why I think it's not really useful is that I think the "90 minutes" cycles varies quite a lot between people, and the time between going to bed and to sleep can vary by half that length between people)
But what I really like, is that it is kinda (reasonably) click-baity, while it actually is a short, sourced, clean, no-ad, straight to the point, FAQ about sleep, which is useful to raise awareness of those issues.
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
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.
I will definitely use this feedback to improve the page. Thank you again for all the encouragement and advice.
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.
1. Read lots.
2. 30 Days to a More Powerful Vocabulary by Norman Lewis. Some the words I have inly encountered once or twice in the intervening 25 years since I read it, but many others I hear every day.
3. The Elements of Style by Strunk and White. It’s like any other instruction manual. It’s worth reading, even if you don’t follow them.
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.
I'm curious how this tool relates to the rest of the site: 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?
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.
Definitely continue! You're on the right path.
My gf’s prolonged use of alarm “snooze” is, imho, a dangerous antipattern.
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.
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!
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.
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.
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
I hope this kid has found a way to make money out of this.
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.
Doing things like this get you valuable experience, more useful to actually working than school.
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 :)
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!
If you want to get the site-size down, like the top-comment suggested, you can switch from React to preact.
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...
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.
Me with a sleeping disorder: lol
(No offence, awesome product!, but I can't use it)
Personal favorite: “the time” in the Gaza Strip depends on whether you are Israeli or Palestinian...
I've also used this style react time picker and woosh not a fan them for usability
I like the UI & UX of your website.
All the best!
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.
Marketing play is doubtless; whether the age is genuine or not is a coin toss—as tends to be with affiliate sites, developers go out of their way to avoid referencing a real persona.
It’s entirely possible that it was built by a teenager, but then a stronger accomplishment to advertise would’ve been “I have developed an affiliate marketing site at 15 years old”.
"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."
> 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.
"I am a 15 year old front-end web developer and am working on growing sleepsources.com"
Nobody can convince me this isn't a spam ring.