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 work well with this workflow. 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. This can obviously be done manually, but it’s a lot easier to just use the app.

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 the current infusion number and total session duration
• Save the current session settings in case I closed the browser tab
• Give me a warning a few seconds before the timer finishes so I can prepare to strain

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

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 or the brew getting too strong or too weak.

Key features:

• Tea presets for common varieties (white, green, oolong, black, post-fermented) 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 gaiwan
• Session tracking showing current infusion number and total session duration
• Persistent state across page reloads

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
• Keyboard controls (space bar to start/pause, arrow keys for quick adjustments)
• Screen wake-lock to prevent display timeout during active brewing
• Audio notifications to not miss an alert

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