Skip to content
Back to projects
  • Product Design
  • Front-End

Wheely Weather

A cycling weather app that turns forecast data into a clear ride recommendation, the best window to go, and weather-based kit guidance.

Role
Solo product design and front-end development
Year
2025
Visit live app
Wheely Weather app showing an “IDEAL RIDE CONDITIONS” verdict on a deep green background for Seattle.

Overview

Wheely Weather answers one near-term riding question: is it worth going now? General forecasts show the numbers, but they still leave cyclists to translate wind, rain, temperature, daylight, and air quality into a decision.

I designed and built it as a focused web app: verdict first, evidence close, and a next ride window when the answer is no.

Question
Is it worth riding right now?
Audience
Recreational and commuter cyclists planning short-term rides.
Core decision
Score the weakest weather signal instead of averaging risk away.
Shipped as
A focused Astro and React app on Cloudflare Pages using Open-Meteo and NWS data.

The Decision Moment

Before a ride, I was checking one weather app and falling back to another when the first came up short. The data was available, but the call was not. Six conversations with recreational and commuter cyclists confirmed the same pattern: feels-like temperature mattered more than the actual number, wind canceled more rides than rain, and one bad condition could override an otherwise decent forecast. That last point drove the most important system decision: average the signals and you smooth away the condition that was actually going to cancel the ride. Scoring by the weakest signal instead kept the verdict honest.

That kept the scope tight. The app had to work at a glance on a phone, state the recommendation clearly, and still show enough evidence for riders who wanted to check the call.

Product Direction

  • Lead with a five-level ride rating: Great, Good, Fair, Poor, or Bad.
  • Score the weakest riding signal instead of averaging bad conditions away.
  • Name the limiting condition when the ride rating drops.
  • Keep the raw weather signals visible for riders who disagree with the recommendation.
  • Point to the next usable window before asking anyone to study a chart.
  • Guide kit selection from the same data, so no separate clothing app is needed.
Wheely Weather verdict for Seattle on a deep green ride-day card.
Wheely Weather verdict for Raleigh on an orange rest-day card calling out heavy humidity.
The verdict adapts to conditions, green when it’s worth going and orange when it isn’t, and names the limiting factor when the answer is no.

System Design

The screen order follows the rider’s question sequence instead of the shape of a forecast API: can I go, why did it get that rating, what should I wear? The verdict card uses color and a plain-language label rather than a numeric score — a number would push the threshold decision back onto the rider, which is exactly what the app is trying to resolve. The Numbers panel keeps the raw signals close to the verdict, so the recommendation stays explainable.

The Numbers panel showing rain chance, feels-like temperature, wind, air quality, dewpoint, UV index, sunrise, and sunset on individual cards.
  • Raw signals stay visible
  • Scored on the weakest signal
Each signal gets its own card, and the one dragging the rating down is flagged inline.

Riding Windows

A bad current rating shouldn’t end the session. Hour by Hour turns a “not now” into a specific window, while the Week Ahead surfaces the best day to ride when today isn’t promising.

Hour-by-Hour panel with a ride-quality chart, a Now marker on the current hour, and Today’s Kit below.
  • The dip shows the window closing
The chart reads as a window, not a forecast: ride quality by hour, a Now marker, and kit guidance below.
The Week Ahead panel showing eight days of ride ratings with the best riding days highlighted.
  • Best ride day, starred
When today is off the table, the Week Ahead points to the day worth watching.

Outcome

Wheely Weather shipped as a focused web app on Cloudflare Pages, built with Astro, React, Tailwind, Open-Meteo, and NWS forecast data. I use it before every ride now, which is the outcome I was building toward. Next, I want a quick way to log when the verdict feels wrong on a ride, so I can sharpen the thresholds against my own disagreements before opening it up further.