RainbowTimer conceived and launched in a day

Have you seen those timers on Amazon? The little clocks that let you set an alarm for 1 – 60 minutes and a rainbow gradually gets smaller as the time ticks by? Influencers are constantly pushing them as an effective way to get your kids to put their shoes on, or be able to visualise how soon it is that you actually need to LEAVE THE HOUSE.

Well I ordered one. I bought into that ideal of my kids needing a visual representation and then our mornings being smoother (and I’m not berating that ideal – I still hope it’s the case, but my timer hasn’t arrived yet).

Meanwhile though, it suddenly occured to me this morning, having told my 4 year old for the 7th time that it was time to get dressed and he couldn’t just finish his lego, that’s not how school works… that maybe I didn’t need the £11 timer – I just needed that interface on a screen. I could prop my phone up on the table for them to see, or have it on an ipad.

Vibe coding with Claude

So I did the school run, came back and had my first meeting of the day – and when I could resist the itch of a new website no longer, I asked Claude if “he” could make it… and from that single prompt that took me a minute or so to write, I had my prototype!

From thereI refined the UX – Claude had given a button for pause, reset, and sound off…. but it actually meant if you clicked the sound off button, the sound would go on… because the button was actually labelled with the current state of whether the sound was on or off. So I flagged that immediately. Claude’s quick solution was to put a clear toggle on instead – great.

I then asked if it could get a manifest file so as to become a PWA – basically a website you can store locally on your phone and use offline, with an icon on your home screen the same as an app. I then had a few other tweaks to reference my Instagram and add an Amazon affiliate link to the real-life rainbow timers if anyone wants a hard copy.

These were all things that Claude did quickly and well – but it wouldn’t have done them if I hadn’t asked for them, or hadn’t known they were achieveable things and could easily be added.

I also wanted some Troubleshooting notes – it’s very easy to use but people always have questions and I’d rather not have to personally answer them for a free tool – and clear options to “download” the PWA if you close / don’t use the initial little prompt you get.

I also had to make sure it’d work in Instagram’s built in browser – eugh – as that’s a big way of how I’ll be promoting it.

Tracking usage

I said to Claude that I wanted to know usage stats – but I didn’t want to use GA4 (Google Analytics) as I didn’t want a cookie policy. It suggested Umami for privacy friendly cookieless tracking and we discussed a few usage stats I’d want to know.

It was Claude’s suggestion to use Umami, but it came from my understanding of compliance and what I didn’t want / an easy user journey. I’m doing a talk tomorrow about the importance of having an experienced developer at the wheel of vibe coding and I lived that story today.

I could get visitor numbers from CloudFlare or Awstats without using Google Analytics, but I wanted to be sure I was filtering bots (CloudFlare would be fine with that, but Awstats maybe not so much) and ideally wanted to know how many people had it saved to their home screen and were using it that way.

I also wanted to know if people were finding it via my Insta or elsewhere – the reason being that I intend to do reels promoting it, where you need to comment a word in order to receive a ManyChat message with the link… but the first ManyChat interaction will say “Ah sorry, you need to be following me to get the link” (but worded in a less annoying way). So if people visit the site but via Google, then it’s not getting me Insta followers whereas if they come via my profile grid, or a ManyChat message, then it will.

And when it comes to domain renewal time, I need to be able to decide whether it’s worth the cost of the domain renewal – if it’s doing absolutely nothing for me, no affiliate commissions, no followers, then I might not bother to renew it.

The other side of that though, is there are now links on it to my Insta (where I have a broadcast channel to help people with their websites) so I’m very happy for Google to send people to it if that’s a way for them to discover my profile.

Either way, whether people come from Google and click to my Insta, or come via Insta because they’ve followed me to get the link, I want to know about it.

And Claude says all that’s set up! So we’ll see. If this was a client site I’d obviously test it all carefully but as it is, I’ll just let it loose and see how the tracking works in the wild. This is a fun project that is only intended to be super quick to produce.

Going live

I passed the code to Tom to upload to a server and he made a few extra UX refinements (courtesy of Claude). He made it so that on a phone you can use your finger to change the dial on the timer, which is a huge improvement, and a couple of other little things.

He also generated some great social share artwork, so it looks more appealing when I share the link in Insta DMs.

Once it was live he ran it through SiteVitals.co.uk to give it a quick audit of it’s speed, performance, security and more. We’ll leave it being monitored by SiteVitals too, to alert us if anything goes wrong.

So that’s today’s little project! You can find it at RainbowTimer.co.uk.

Although, really it’s been a day of prepping my talk for tomorrow, updating a big membership client’s annual renewal process in Xero, and helping clients with their WordPress/Woo/Lifter integrations… this fun little timer was just a fun little side project that took an hour or 2 all in (probably less).