project weather

Step 7: Next

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

Ideas for going further.

What You Built

A fully functional weather app that fetches live data, shows current conditions and a forecast, handles errors, and lives on the web.

Keep Going

Here are some ideas to extend your project:

More data:

  • Add humidity, wind speed, UV index
  • Show hourly forecast for today
  • Add a weather map or radar

Better UX:

  • Save recent searches
  • Auto-detect location using the browser's geolocation API
  • Add weather-based backgrounds (sunny = warm gradient, rain = gray)

More platforms:

  • Turn it into a Progressive Web App (PWA) that works offline
  • Build a macOS menu bar version with ColorDrop's approach
  • Create an iOS version with SwiftUI

What You Learned in This Project

  • Building a complete web app from scratch
  • Working with external APIs
  • Responsive design
  • Error handling and edge cases
  • Deploying to the web

Next Project

Ready for a different platform? Try ColorDrop (macOS) or HabitTracker (iOS).

Or explore the Guides to learn specific techniques.

Exercises

  1. Pick one "More data" idea (humidity, wind, or hourly forecast) and write the prompt you'd give Claude to add it, then build it.
  2. Add a "Better UX" feature such as saving recent searches or weather-based backgrounds, and test it on your deployed site.
  3. Sketch a one-paragraph plan for taking this app to a new platform (PWA, macOS, or iOS) — what would change and what would stay the same.