FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
valdottown
valdottowntest-claude
Public
Like
test-claude
Home
Code
1
README.md
Branches
3
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
README.md
Code
/
README.md
Search
5/22/2025
Viewing readonly version of claude-4 branch: v4
View latest version
README.md

Weather Dashboard

A beautiful, responsive weather dashboard built with React and Hono on Val Town.

Features

  • šŸŒ¤ļø Current weather conditions
  • šŸ“… 5-day weather forecast
  • šŸ“ Location-based weather (geolocation + search)
  • šŸŽØ Beautiful, responsive design with TailwindCSS
  • šŸŒ”ļø Temperature, humidity, wind speed, and more
  • šŸŒ… Sunrise/sunset times
  • ā˜” Precipitation probability

Tech Stack

  • Backend: Hono (TypeScript)
  • Frontend: React 18.2.0 + TailwindCSS
  • Weather API: Open-Meteo (no API key required)
  • Styling: TailwindCSS via Twind

Project Structure

ā”œā”€ā”€ backend/
│   └── index.ts          # Main Hono server & weather API
ā”œā”€ā”€ frontend/
│   ā”œā”€ā”€ index.html        # Main HTML template
│   ā”œā”€ā”€ index.tsx         # React app entry point
│   └── components/
│       └── App.tsx       # Main dashboard component
ā”œā”€ā”€ shared/
│   └── types.ts          # Shared TypeScript interfaces
└── README.md

API Endpoints

  • GET / - Serves the main dashboard
  • GET /api/weather/current?lat={lat}&lon={lon} - Current weather
  • GET /api/weather/forecast?lat={lat}&lon={lon} - 5-day forecast
  • GET /api/geocoding?q={query} - Location search

Usage

The dashboard automatically detects your location or allows you to search for any city worldwide. Weather data is provided by Open-Meteo API.

Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
Ā© 2025 Val Town, Inc.