Making an app to brew perfect coffee
When I started learning to program, I was shocked to see how many coffee related technologies existed:
Coffee is so important to programmers, I’d argue that coffee is one of the most important programming tools out there. Yet, when it comes to making coffee, there are strikingly few apps out there to help you brew perfect coffee.
I want to drink perfect coffee every day.
Coffee is something a lot of us drink every day, often more than once. Yet, we settle for less than the best, when the best is not that expensive when you make it yourself. The difficulty is in the brewing ritual. There are a few steps you have to get right:
- Grind the beans with a burr grinder at the right coarseness setting.
2. Heat water to 195 to 204 degrees.
3. Pour a small amount of water over the beans, and wait for a full minute for the bloom. The bloom is crucial, as it lets the CO2 escape from the grounds, which releases the flavor.
4. Then, pour water over the grounds at a ratio of 1g coffee / 16g water.
This is my ritual, and to get the most out of it it’s necessary to repeat the same steps each time, slightly tweaking until you get closer and closer to the perfect cup.
I searched for apps to help me pour the perfect cup, but there are surprisingly few options to choose from when you think about how important coffee is to programmers.
So, I took keyboard to code editor and started building a coffee app. I built it with Angular and ran it on a Raspberry Pi with a touchscreen.
Coffee App Version 1
This is what I came up with:
The app displays the weather and the time, since this is used often in the morning. The weather data is from the hyper local Dark Sky API.
The first row displays a selector for grams of coffee, which then calculates water grams needed for the bloom and pour. The bloom and pour each have a timer and a progress bar that fills up as the time runs out.
This version worked, but wasn’t great. There’s a UX flaw that kept bugging me: while each part of the process is visible on the screen, you only care about one small section of the screen at a time. The screen space is not used well.
So, I decided to rebuild it from the ground up.
Coffee App Version 2
To fix the screen issue, I needed to build an app that changed the screen based on the stage of brewing and only displayed relevant information for each step. Therefore, there are a few states that correspond to the brewing process.
Step 1: Brew method selection and weather
On the left, there’s the weather. Much easier to see now, with more screen real estate. The background also changes based on the weather. In addition, the right arrow button within the weather section shows precipitation chances and temperatures for the next 24 hours.
On the right, you can choose from three brew methods, which offer custom steps for each brew process.
Step 2: Coffee weight
The weight step asks you to input the amount of coffee you’re making, and also suggests a grind coarseness. When you’re ready, tap Start.
Step 3: Bloom
The bloom step tells you how much water to pour for the bloom, then starts a countdown. The background is the progress bar that fills with color, making the countdown easy to see from across the room.
Step 4: Pour
The final step is the pour, which is the same as the bloom step, but with new values. If you watch closely, you can see the background getting increasingly orange as the time runs down. If you walk across the room, it’s easy to see how much longer is left in the brew process.
Since this app takes care of the calculations and timing, the brew process is now a delicious and relaxing ritual.
You can use this app too (although the weather currently is limited to Chicago). You can view the app live at jonsamp.github.io/coffee.
You can also see the app’s code at github.com/jonsamp/coffee if you want to change the recipes/weather location.
Thanks for reading about my coffee obsession. If you enjoyed this article, please recommend it by clicking the green heart 💚!