More Work

Weather & Route Planner

Mapbox + OpenWeather with saved routes, forecast charts, and dark mode UI.

Live App
Role
Full-stack Developer
Timeline
2 weeks
Industry
Travel / Logistics
Team
Solo
Scope
Routes, Forecast, Favorites
Impact
Faster decisions, safer routes

TL;DR

  • Weather-aware routing with Mapbox + OpenWeather
  • Saved routes and quick compare for safer timing
  • Trend charts reveal better departure windows
  • Dark, accessible UI for low-light use

⚡ Problem

Route planning without weather context leads to risky choices, delays, and poor ETAs—especially across long distances and changing conditions.

Audience & Use Cases

Primary Audience

  • Road trippers and travelers choosing safe departure windows
  • Delivery drivers and gig couriers optimizing for conditions
  • Trip planners who want a quick read on route risks

Key Use Cases

Pick a safer departure window

User tests multiple departure times and sees wind/rain pockets shift along the path—chooses a calmer 2-hour window.

Save a frequent route

Driver saves a home↔warehouse route; morning checks become one click with current conditions applied.

Share a route summary

User shares a link with expected conditions at stops so the group can plan clothing and timing.

💡 Solution

Overlay live + forecasted weather on driving routes, surface risk indicators along the path, and let users save/share routes. Trend charts and a dark UI make it quick to compare timing options.

  • Route overlays with weather layers (precipitation, wind, temp)
  • Waypoints & quick re-route with debounced address search
  • Saved routes with JWT-authenticated profile
  • Forecast trend charts (temp/rain/wind) per waypoint
  • Dark mode UI and keyboard-accessible map controls
  • City autocomplete and recent searches
  • Shareable route summaries

Requirements & Constraints

Requirements

  • Overlay weather along a multi-segment route
  • Show forecast trends per waypoint
  • Save routes to user profile with minimal auth
  • Fast map interactions on mid-range devices

Constraints

  • 3rd-party API rate limits (OpenWeather, geocoding)
  • Keep bundle size lean for quick cold starts
  • Handle intermittent connectivity gracefully

Architecture

React (Vite) renders a Mapbox map with draggable waypoints; the app queries OpenWeather for current/forecast data near the polyline. An Express API stores saved routes under JWT; TanStack Query caches requests and handles retries. Charts (Recharts) visualize trends.

Data / Request Flow

  1. User enters origin/destination; geocoding resolves coordinates.
  2. Mapbox builds a route polyline; sampling points are computed.
  3. Weather fetch for each sample (batched/throttled) populates overlays.
  4. Charts aggregate waypoint forecasts (temp, precipitation, wind).
  5. User saves route (JWT) → Express persists route & notes.
  6. On revisit, saved routes hydrate instantly from cache + server.

Domain Model

User
  • id
  • email
  • passwordHash
  • createdAt
Route
  • id
  • userId
  • origin
  • destination
  • waypoints[]
  • label?
  • createdAt
Waypoint
  • lat
  • lng
  • name?
  • order
WeatherSample
  • lat
  • lng
  • time
  • tempC
  • windKph
  • precipMm
  • icon

Trade-offs & Alternatives

  • Client-heavy overlays for responsiveness vs. server-rendered tiles (less control but simpler infra)
  • OpenWeather for breadth; specialized providers could add accuracy but increase cost/complexity
  • Recharts for speed over low-level D3 customization

Roadmap

  • Severe weather alerts along route (thresholds)
  • Wind-aware risk score for high-profile vehicles
  • Multi-day compare view with side-by-side charts
  • Offline snapshot of last known forecast
  • Export/print friendly itinerary with weather

FAQ

How accurate is the forecast along the route?

We sample multiple points along the polyline and use OpenWeather hourly forecasts. It’s designed for planning—not a guarantee. Threshold alerts are coming.

Do I need an account to save routes?

Yes—JWT auth keeps your saved routes private to your profile while keeping the sign-in flow lightweight.

Will this work offline?

Recent routes are cached locally, but live weather overlays require connectivity. We plan an offline snapshot mode.