CLCHAD LUMANSystems + Web

Weather Dashboard

  • Home
  • / Weather Dashboard
Live demo screenshot of the Weather Dashboard app
Live weather search
github.com/chadluman/weather-dashboard

Weather Dashboard

Weather Dashboard is a Vite-powered React project that connects to OpenWeatherMap. It includes reusable search, weather card, and error message components so users can look up weather quickly from a responsive interface.

ReactViteTailwind CSSOpenWeatherMap API

Demo source / ee98bc3a

Built directly from the repository source; weather requests use the portfolio server API.

Back to projectsOpen live demoView source on GitHub

Highlights

  • Component-based search and result cards
  • Environment-based API key configuration
  • Responsive Tailwind layout

Run Locally

  1. 1Set OPENWEATHER_API_KEY on the portfolio server
  2. 2Open /weather-dashboard/index.html

Case Study

Problem

Look up current weather quickly, without a cluttered interface or a silent failure when a city is not found.

Constraints

  • Third-party API key must not be shipped in the client
  • Errors (unknown city, network failure) need a legible state, not a blank card

Decisions

  • Vite + React with reusable search, weather-card, and error-message components
  • Weather requests routed through the portfolio server API with an environment-based key

Outcome

A working, responsive search that handles error states explicitly. Kept deliberately modest: its value is as a clean API-integration example, not a product claim.

Demo limits

Live search requires OPENWEATHER_API_KEY on the portfolio server; without it, the UI loads but a real lookup cannot complete.

Next step

Saved cities, forecast view, and geolocation — only if they do not clutter the core search.