/ webdev

Well-brewed tea made easy, thanks to technology!

My girlfriend and I have taken up a new shared hobby - enjoying Japanese and Chinese loose-leaf tea. To get the most out of the tea experience, there are many things to take into account.

In fact, to have a perfectly brewed tea it should have the following aspects taken care of:

  • water temperature,
  • water quantity
  • water hardness,
  • tea quality,
  • tea quantity,
  • brewing time,
  • etc.

We quickly found out that controlling all of these variables at the same time meant doing lots of calculation of tea quantities and infusion times while juggling a kettle, digital scales, and a thermometer which made everything a bit more cumbersome than we wanted. Luckily, technology came to our rescue!

Water Quantity, Temperature and Hardness

First of all, we dropped the kettle and bought ourselves an automated hot water dispenser. Since we also live in an area where water has a high hardness, the built-in Brita filter system takes care of removing some of the dissolved minerals, improving the taste of the tea. After setting everything up, the kettle will pump the desired quantity of water into a heating unit, heat it to the desired temperature and dispense it into a cup or kettle. Our only disappointment with the hot water dispenser is that temperatures can only be set as 100°C, 95°C or 85°C but this gets reasonably close to the ideal temperatures for most teas.

Tea Quantity and Brewing Time

After having the water taken care of, the main leftover work is to calculate the correct amount of tea to brew and how much brewing time each of the infusions take. Instead of looking up formulas such as "2 grams per 100ml" or "30 seconds plus 10 seconds for each additional infusion" and doing the calculations in our head, we made an app that would combine these formulas with an automatically-set timer. The result is OCTea!

OCTea tea brewing app

If you are as crazy about tea brewing as us, you are invited to give OCTea a try at:

https://octea.ndim.space

It should work well on modern desktop and mobile phone browsers. Please do let us know what you think about it as we would like to keep improving the app to make sure your needs are covered when using it.

Implementation Notes

OCTea is a Vue.js application that uses localStorage to save user settings. After downloading the statically compiled HTML+CSS+JS, no more round-trips to the server are necessary. We are only collecting statistics on the number of visitors to the app and how often and what is brewed using our self-hosted Piwik instance. The layout and design is using Bulma with the default color scheme.

Getting timers and delayed-playback audio to work in JavaScript can be tricky on mobile devices since power saving can cause setInterval et al to not fire when you are expecting them to. We used HackTimer as a workaround for timers and also save the start time to calculate how much time has really elapsed. For playing delayed audio, we trigger playback of the audio element when the user clicks the "Start timer" button and immediately pause it. Once time is up, the audio is unpaused. Take that, power saving and anti-spam features!

Vue.js is nice, very nice and I will probably use it for all my frontend development from now on.
(Stefan)

Conclusion

With these two modifications to our tea brewing, tea brewing is now as simple as:

  1. Pick a tea and brewing style in OCTea. The cup sizes typically stay saved from last time.
  2. Measure the correct amount of tea using a digital scale
  3. Set the temperature and volume in the hot water dispenser
  4. Dispense water and time the brewing using OCTea
  5. Repeat step 4 until tea drunk :D

we can now focus on enjoying tea and don't have to spend as much time and effort on getting the brewing process right.

Next Steps

Some ideas that didn't make it into the app. Let us know if you want to collaborate on making some of these a reality :)

  • Better support for imperial units (switchers for °C/°F and ml/fl oz, better rounding for imperial units)
  • Hooking up the water dispenser to an Arduino or Raspberry Pi to set the volume and temperature using a REST API directly from the tea app
  • User-configurable temperature and brewing profiles