Coffee Brewer’s Guide -Dev Diary

As the name implies I am making a coffee brewers guide. This article will be a series of smaller sections, where I intend to present specific areas of my development of a new webapp that I am working on. This means that the text itself will constantly evolve as new sections are added and more info is presented.


We drink a lot of coffee. It’s everywhere – in schools, businesses, officess, and the streets, as well as in our homes. in 2016 Norwegians consumed approximately 10kg per capita per year – the second highest in the world, after our finnish neighbours, which consumed 12kg (

While coffee consumption has been fairly stable for a long time. The coffee trade itself has seen a large evolution these past ten-ish years, with what is described as speciality coffee, or third wave of coffee.

This is a movement to produce high-quality coffee, and a move from just brewing a consumable container for caffein delivery, and into presenting coffee as an artisanal foodstuff, comparable to wine, rather than a commodity.

To achieve this, there has been done large improvements in all stages of production – from improving coffee plant growing, to harvesting, and processing. As well as stronger relationships between growers, traders, and roasters.

Third wave coffee aspires to the highest form of culinary appreciation of coffee, so that one may appreciate the subtleties of flavor, varietal, and growing region.

This is done through the direct trade of coffee, from single origins, and plantations (as opposed to blends), and lighter roasting of the green beans from the plantations.

Accompanied by this increased focus on the base product and production line, third wave coffee also focus a lot on alternative methods of coffee preparation – or brewing, using a multitude of different devices such as: Chemex, Hario V60, Aeropress, Moka Pots, french press, Kalita Wave, vacuum coffee, etc.

It is here that my project is focused – brewing fantastic speciality coffee at home.

Accompanied with this increased focus on quality and appreciation of the wonders of coffee, multiple competitions and brewing recipes has appeared throughout the years – all providing their own uniqueness to the final brewed cup.

I want to provide a ‘one-stop-shop’ for everything necessary to facilitate the brewing of great coffee, this means providing full recipes, with timed out steps, and directions, for all of the different devices one may have available at home.

This means that I want the user to be able to select for instance the V60 pour over system, and find a comprehensive list of recipes, and the possibility to select one, type in the desired amount of coffee, and find step by step instructions, accompanied by a timer, for how to get the best cup possible out of their beans.

Step 1: Pre-production / Design

Posted: 28.01.2019

The first step in the development was to establish requirements, and a preliminary architecture for the system.


The main purpose of the requirements phase is to find and weed out problems as early as possible. And to have clear and concise idea of exactly what is being developed.

“To design a system is to find problems early, e.g. a misplaced wall on an architect’s plan can be moved by the stroke of a pen, but once the wall is built, changing it is not so easy”

Interaction Design Foundation

This system is overall a very simple, ‘one purpose’ system, intended for one goal, and to complete that goal as well as possible:

To provide the user with a structured platform for finding coffee brewing recipes, for a variety of home brewing devices, and steps in for how to achieve the specific brew.

From this goal, a set of requirements was formulated:

Functional Requirements

  • Present recipes for brewing
    • Aeropress
    • V60
    • Chemex
    • Clever
    • Abid
    • Brewt
    • Cold Brew
    • French Press
    • Flair
    • ROK
    • Iced Coffee
    • Moka Pot
    • Kalita Wave
    • Woodneck
    • Stovetop (Koke kaffe)
    • Siphon
    • Vacuum
    • Turkish
  • Aeropress – Random chance brewing (Brew dice)
  • Step by step instructions for each recipe
  • Timer for each step / entire brew
  • Calculate amount of coffee (beans to water ratio)

Non-functional requirements

  • Should be possible to complete with a one man development team
  • Completed in a reasonable timeframe (1/1.5 month-ish)
  • Navigation and usage of the system, should be as easy as possible
  • The system should require no need for learning of advanced skill (with computers, or otherwise)


  • No local storage for the user (at first)
    • May allow the user to save favorites etc. at a later time

Environmental Requirements

  • Readability while brewing coffee

Technological Requirements

  • Run natively on the web (React.js) or Flutter?
  • Responsive design for all screen sizes

This was the base list of requirements at the start of development. Although they may be revisited in the future, in order to add or subtract something.


As with my previous work, I turned to Adobe XD for the construction of my architecture. For the visual presentation, I used my own designed presentation, which leans towards concepts such as UML.
The intent behind the Architecture itself, is for me to have a clear idea of how the system is organized and structured, which is able to present the entirety of the system, and how each parts connects to each other.

The architecture is then used in both the design, and development of the system, in tasks such as studying the flow of users through the system, i.e what is the intended path to get to one specific area of the system, how many steps is needed, and on what page is what specific information presented.

Development Discussion: React Vs. Flutter

Posted: 29.01.2019

When considering the actual development of the system, I was split. On one hand I had the intent on building it using React.js, on the other however, due to the fact that the largest use case for the system is to have it next to the users chosen brewing device on a mobile phone, having it app based would make sense. Therefore I came to a crossroad – React, or Flutter.


  • Ios, and Android
    • Hummingbird for Web
  • A lot for free (widgets etc)
  • Complete integration with Material ui
  • Google made, in order to build with material


  • Pure web, no apps
  • More flexibility – mold however I see fit
  • More Code
  • Material ui through React Material UI
  • More experienced with React

Both languages are completely capable of providing the necessary building blocks for the system, so the choice would come more down to areas such as comfort in development, expediency, and efficiency.

However, since this is also a project focused a lot around learning, and gaining experience. I settled on setting up the project for both, then leaving the final choice for a later time. I may for instance end up building the system in react for web, and flutter for mobile – a likely possibility depending upon how far along the hummingbird flutter converter has come along for integrating flutter on the web.