What is it?

Tea Timer is a progressive web app I built for tracking tea brewing sessions with precision. If you’ve read my tea passion page, you know I’m pretty into specialty loose-leaf tea and brewing it the traditional Chinese way (Gong Fu Cha). That means multiple short infusions with the same leaves – sometimes ten or more steeps from a single session.

Most kitchen timers don’t understand this workflow. You’re not just setting a single timer – you’re managing a sequence of infusions where each one needs a slightly different time. Tea Timer was built to eliminate the mental overhead of tracking all that.

Live at: https://tea-timer.com/

Why I built it

I’m of the faction that does everything very precisely when it comes to tea brewing. I always have a tiny scale and a thermometer around – not because I stick to strict guidelines, but because if I try something new, I want to know exactly how I arrived at that brew.

I wanted an app that would:

• Let me set up an infusion timer and run it
• Track current infusion number and total session duration
• Save the current session settings in case I closed the browser tab (because I definitely do that)
• Give me a warning a few seconds before the timer finishes so I can prepare

After not finding anything that came close, I figured I should just develop my own. Classic programmer move, I know.

How it works

The app is designed around the concept of sessions – each tea can be steeped multiple times, with time adjustments between infusions to account for the leaves opening up.

Key features:

• Tea presets for common varieties (white, green, oolong, black, pu-erh) with recommended infusion times
• Custom brewing profiles where you set your own initial time and per-infusion increments
• Countdown timer with visual progress bar and audio alerts
• “Ready to pour” warning at T-minus 5 seconds so you can prepare your cup
• Session tracking showing current infusion number and total session duration
• Persistent state across page reloads – pick up where you left off if interrupted

Tech stack

Tea Timer is a single-page PWA built with Vue.js and Vite, styled with Bulma for responsive layouts. It runs entirely in the browser with no backend – all session data is stored in local storage.

• Vue 3 + TypeScript for reactive state management and type safety
• PWA capabilities for offline use and home-screen installation
• Dark mode with automatic detection and manual toggle
• Keyboard controls (space bar to start/pause, arrow keys for quick adjustments)
• Screen wake-lock to prevent display timeout during active brewing
• Audio notifications with customizable alerts

The app is hosted on GitHub Pages with automatic deployments via GitHub Actions.

What I learned

Building this reinforced that sometimes the best tool is the one you make for yourself. I use Tea Timer every single day, and having it work exactly the way I want (without unnecessary features or friction) has been worth the effort.

It’s a small, focused tool that does one thing well: help you brew better tea without thinking too hard about the clock.