A silver moka pot with a black handle and top on a floral tablecloth, casting a shadow on a light-colored curtain in the background.

Cloudy with a Chance of Caffeine

A web product that takes the guesswork out of your favorite morning ritual.

Solo Project

HTML, CSS, Javascript, Figma, Notion, GitHub

Product Design
Web Design
Coding

The problem

When I first got into coffee brewing as a hobby, I did not realize the rabbit holes I was going to dive so deeply into. The pursuit of the perfect, sweetest cup brought into my collection a whole range of brewing gear and equipment like kettles, scales, drippers, percolators, and even a manual espresso machine.

A GIF of multiple coffee brewing gadgets appearing one after the other and filling up the page.

With each brewing device requiring its own recipe with different parameters, I found my patience and interest in this hobby slowly waning. Over time, I managed to organize all the information into a methodical database that I could reference at any given time. However, being faced with every recipe during each brew quickly proved to be impractical and tedious.

A detailed coffee brewing instruction table with steps for Pour-over, Aeropress, and Filter Kappi methods.

Another variable that proved itself unpredictable was the weather in New York at the time (Spring 2023). The attached screenshot shows the discrepancy from one day to the next, with one day being a sunny -1°C (or 30.2°F) and the next peaking (and raining) at 22°C (or 71.6°F).

I was faced with the challenge of deciding whether to brew a hot coffee or a cold/iced coffee and then choosing the brewing device and recipe to use for the same.

Weather forecast showing sunny, partly cloudy, and rainy conditions with temperature ranges from -1°C to 8°C, 2°C to 13°C, and 8°C to 22°C, along with 80% chance of rain.

How-Might-We

How might we brew the best possible coffee using the most appropriate brewing method despite unpredictable weather?

Final design

Cloudy with a Chance of Caffeine →

Cloudy with a Chance of Caffeine takes out the guesswork in the coffee brewing process. Once a location (city, state, country) is inputted, the website fetches its current weather and forecast and suggests an appropriate step-by-step coffee recipe for those conditions. Clicking on the “Something else” button chooses another recipe from the database while remaining appropriate to the weather condition.

A screenshot of a coffee recipe webpage titled 'Cloudy with a Chance of Caffeine'. It displays the current weather in New York as 25°C with clouds. The recipe is for an Espresso Tonic, with instructions to pour tonic water into a glass with ice, add a shot of espresso, and pour the espresso over the tonic water. There's a photo of an Espresso Tonic in a tall glass garnished with a lemon slice, being poured from a bottle, placed on a wooden surface with green plants in the background.
Smartphone screen displaying a weather app for New York with cloudy weather and 25°C, featuring a section on making an espresso tonic cocktail with a photo of a tall glass with ice, lime slice, and dark espresso water, along with step-by-step instructions and a 'Something else' button.

Sketches & Prototypes

Multiple screenshots of a weather app displaying the weather in New York, a recipe for iced pour-over coffee, and a photo of the same iced coffee on a kitchen counter. The weather app shows temperatures of 28°C and 25°C, sunny weather, and the location as New York, USA. The recipe provides step-by-step instructions for making iced pour-over coffee, including ingredients and timing. The photo features a glass of iced coffee with ice and coffee beans, sitting on a wooden surface in a kitchen setting.

Developing this website involved:

→ A mobile-first approach
→ Initial sketching and prototyping in Figma to lock down on the general look and feel
→ Creating a local JSON database for the coffee recipes and correlating them with temperature ranges (0°C-10°C, 11°C-20°C, 21°C-30°C+)
→ Finding an appropriate weather API (OpenWeather, in this case)
→ Javascript to fetch the weather from the API upon location input, choose an appropriate recipe from the JSON and display it on the screen
→ HTML and CSS for the front-end structure and aesthetics

Diagram illustrating web development process with HTML and CSS leading to JavaScript, which then produces API and JSON outputs, with icons of a sunset, a coffee cup, and a weather logo.

Challenges

→ Learning to code in a new language (JS, JSON). Youtube tutorials + MDN

→ Getting the different systems (JS, OpenWeather API, JSON, HTML and CSS) to communicate with each other

→ Recipe writing + visualization

Next steps

→ Expand database of recipes, ability to change measuring units when brewing for multiple people

→ Front-end interface to input recipes for the back-end

→ Allow community recipe input

→ Better visualization of recipes - animation, videos, GIFs

Next project →

Residents of Gulbarga Fort

Back to Home