What is it? Coffier is a minimalistic coffee timer that focuses on improving the user experience through reduced visual clutter, helping users quickly identify key information in a timely manner so even beginners can easily make use of time-sensitive recipes.
One of the members of our team (Andrew) is an avid coffee brewer and enjoys brewing many types of coffee to drink. One specific brew is the V60, which is very timing intensive and requires many actions to be executed sequentially within seconds. For example, the V60 coffee recipe steps are:
0m00s: Pour 50g of water to bloom 0m10s - 0m15s: Gently Swirl 0m00s - 0m45s: Bloom 0m45s - 1m00s: Pour up to 100g total (40% total weight) 1m00s - 1m10s: Pause 1m10s - 1m20s: Pour up to 150g total (60% total weight) 1m20s - 1m30s: Pause 1m30s - 1m40s: Pour up to 200g total (80% total weight) 1m40s - 1m50s: Pause 1m50s - 2m00s: Pour up to 250g total (100% total weight) 2m00s - 2m05s: Gently swirl
Naturally, this poses a challenge to beginners as they would need to juggle keeping track of timings in addition to precise weight measurements and their technique.
What it does
Our app acts as a companion to James Hoffman's videos on his recipes for various methods of making coffee including v60 and Aeropress, conveniently embedded within our app. By relying on this alternate mode of instruction, we are able to make assumptions about the users' knowledge such as of the technique required when pouring water, or what to look out for during the coffee. This way, we can reduce the amount of information required to be conveyed to the user to just finer harder to remember details, calculations and minimal reminders about which step we are at.
Beginners should therefore be able to watch the video then plug and play, so we hope more people can learn how to make better coffee without fear and impress their friends.
How we built it
Using React Native, we created a menu listing every coffee recipe. Pressing it leads to a Timer component with different time intervals according to a preset JSON file which is read from.
Challenges we ran into
version control management (using git). our teammate (Terence) spent 3 hours fixing a broken commit/merge. UI Kitten also has unexpected behaviour in certain scenarios, and linter features for React Native in VSCode is not infallible, resulting in our code malfunctioning in unexpected ways.
Accomplishments that we're proud of
- Proud of managing to use React Native without much experience in it
- Pretty decent UI/UX
- Gaining coffee-making skills
What we learned
- How to embed Youtube videos into React Native
- How to use version control management
- How to use useContext hooks in React Native instead of just prop drilling
What's next for Coffier
Custom recipes and adding more recipe variants, locked behind a Pro mode to not confuse new users