Cloudy with a Chance of Caffeine
Solo Project
2023
Product Design
Web Design
Front-End Development
Outcome
A web app that recommends coffee brewing recipes based on your local weather.
It started with a simple observation: the coffee I want to make on a cold, rainy morning is completely different from what I reach for on a hot afternoon.
Cloudy with a Chance of Caffeine takes your local weather conditions and surfaces brewing recipes that match the moment.
🌧️
☀️
🏜️
🌪️
❄️
☔
The idea
When it's cold, you want a concentrated, warming brew. When it's hot, you want something iced and refreshing.
But most coffee recipe platforms present everything the same way regardless of context. The question became:
how might we use something as simple as the weather to make coffee recommendations feel personal and immediate?
The product
This is a fully coded web app, not a prototype. Built with HTML, CSS, and JavaScript, it pulls real-time weather data through a weather API and matches conditions to a curated database of recipes.
The landing experience shows your current weather alongside recipe recommendations that fit.
Each recipe card displays the drink name, brewing method, key variables, and photography.
The visual language shifts to reflect the weather context, reinforcing the connection between conditions and cup.
The entire product was designed in Figma, then hand-coded. The front-end pulls from a weather API to get local conditions, then matches those against recipe parameters to generate recommendations. No frameworks, just vanilla HTML, CSS, and JS.
