In the long and distant past, most meeting rooms had an analog clock at the back, allowing you to keep track of your allocated presentation time.

Then, presentation software provided speaker notes and a timer. This requires you to use two screens, and fiddling around with this was distracting and never played out smoothly, at least for me. I was dreaming about a simple countdown timer that could run on my phone. Yet even though this appears to be straight forward, I would never get down to it. The ones I found on the net were not quite covering my needs, for various reasons. Alas, my proffiency in front end programming is not very high either. I made a couple of attempts to acquire competency and enthusiasm, but it never materialized.

Then, vibe coding came along, and in my role as tech lead I am obliged to stay informed. The countdown timer appeared to be a good use case for trying out AI-assisted coding.

So, I decided to create a simple application that can be served as a static web page, using Typescript and React. This would allow me to explore coding using an AI assistant, and learn about CSS, Typescript and React with - hopefully - minimal effort. For instance, dear AI, explain useEffect to me.

Based on the recommendation of a collegue, I created the skeleton using v0.app and modified it using Cursor.

The first naive and hopefull attempt didn’t produce a good result. The initial prompt was not specific enough, along the lines of "create a countdown timer showing remaining time in a inner circle, and visualizing remainging time as an outer circle". Amazingly enough, this created something that worked. Yet, subsequent modifications made the code worse, fixing a problem by creating a new one.

One challenge when displaying a web page on the mobile phone with no interaction, is that after a certain amount of time, the screen lock kicks in. In the first version, I tried to handle this by storing countdown timer state - like start time - in local storage, and then continue the countdown when the screen was unlocked based on that. It didn’t work. I didn’t know how the mechanics around this on a mobile phone were.

As in real life and coding, and pointed out by many, one has to formulate prompts that are specific. This is not a special skill required from coders, it is a necessary one. Every subject matter export should be able to engineer good prompts eventually.

So, I had another go. This time, I formulated the solution as a state machine. The result was much better. I asked the AI how the screen can be prevented from locking, and learned about the Wake Lock API. Sweet. (On Android, support for this API is better in Chrome than Firefox.)

The countdown timer is here, and the code is here. All prompts are documented in the README file. So far, most everything was done using the AI agent.

AI code assistents are fascinating and can be very useful. I used it to teach me about frontend coding. I managed to create a useful application in a couple of hours, much quicker than if I had attempted it on my own.

Happy coding!