Weather Dashboard

\n \n\n",[],[182,188],[182],{"_104":197,"_95":198,"_154":199,"_156":-5,"_157":138,"_158":200,"_160":161,"_106":201,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":202,"_99":211},"d60e8bfc-3746-11f0-a1e4-9e149126039e","shared","833ae505-8844-4482-ba24-5defd2d92935",5,["D",1747943782691],[203],{"_104":204,"_95":205,"_154":206,"_156":199,"_157":138,"_158":200,"_160":161,"_106":207,"_100":32,"_163":175,"_165":208,"_166":22,"_167":-5,"_168":209,"_99":210},"d60e68d4-3746-11f0-a1e4-9e149126039e","types.ts","d60e69ba-3746-11f0-a1e4-9e149126039e",["D",1747943782691],"// Shared types for weather dashboard\n\nexport interface WeatherLocation {\n name: string;\n country: string;\n latitude: number;\n longitude: number;\n timezone: string;\n}\n\nexport interface CurrentWeather {\n temperature: number;\n weatherCode: number;\n windSpeed: number;\n windDirection: number;\n humidity: number;\n pressure: number;\n visibility: number;\n uvIndex: number;\n isDay: boolean;\n time: string;\n}\n\nexport interface DailyForecast {\n date: string;\n weatherCode: number;\n temperatureMax: number;\n temperatureMin: number;\n precipitationProbability: number;\n windSpeed: number;\n sunrise: string;\n sunset: string;\n}\n\nexport interface WeatherData {\n location: WeatherLocation;\n current: CurrentWeather;\n daily: DailyForecast[];\n}\n\nexport interface GeocodingResult {\n name: string;\n country: string;\n latitude: number;\n longitude: number;\n admin1?: string;\n}\n\n// Weather code mappings for icons and descriptions\nexport const WEATHER_CODES: Record = {\n 0: { description: \"Clear sky\", icon: \"☀️\", color: \"text-yellow-500\" },\n 1: { description: \"Mainly clear\", icon: \"🌤️\", color: \"text-yellow-400\" },\n 2: { description: \"Partly cloudy\", icon: \"⛅\", color: \"text-gray-400\" },\n 3: { description: \"Overcast\", icon: \"☁️\", color: \"text-gray-500\" },\n 45: { description: \"Fog\", icon: \"🌫️\", color: \"text-gray-400\" },\n 48: { description: \"Depositing rime fog\", icon: \"🌫️\", color: \"text-gray-400\" },\n 51: { description: \"Light drizzle\", icon: \"🌦️\", color: \"text-blue-400\" },\n 53: { description: \"Moderate drizzle\", icon: \"🌦️\", color: \"text-blue-500\" },\n 55: { description: \"Dense drizzle\", icon: \"🌧️\", color: \"text-blue-600\" },\n 61: { description: \"Slight rain\", icon: \"🌧️\", color: \"text-blue-500\" },\n 63: { description: \"Moderate rain\", icon: \"🌧️\", color: \"text-blue-600\" },\n 65: { description: \"Heavy rain\", icon: \"🌧️\", color: \"text-blue-700\" },\n 71: { description: \"Slight snow\", icon: \"🌨️\", color: \"text-blue-300\" },\n 73: { description: \"Moderate snow\", icon: \"❄️\", color: \"text-blue-400\" },\n 75: { description: \"Heavy snow\", icon: \"❄️\", color: \"text-blue-500\" },\n 80: { description: \"Slight rain showers\", icon: \"🌦️\", color: \"text-blue-400\" },\n 81: { description: \"Moderate rain showers\", icon: \"🌦️\", color: \"text-blue-500\" },\n 82: { description: \"Violent rain showers\", icon: \"⛈️\", color: \"text-blue-700\" },\n 95: { description: \"Thunderstorm\", icon: \"⛈️\", color: \"text-purple-600\" },\n 96: { description: \"Thunderstorm with hail\", icon: \"⛈️\", color: \"text-purple-700\" },\n 99: { description: \"Thunderstorm with heavy hail\", icon: \"⛈️\", color: \"text-purple-800\" },\n};",[],[198,205],[198],{"_104":213,"_95":214,"_154":215,"_156":-5,"_157":138,"_158":216,"_160":22,"_106":217,"_100":32,"_163":191,"_165":218,"_166":22,"_167":-5,"_168":219,"_99":220},"ce24e9f4-3746-11f0-9af1-9e149126039e","README.md","ce24eac6-3746-11f0-9af1-9e149126039e",4,["D",1747943769420],"# Weather Dashboard\n\nA beautiful, responsive weather dashboard built with React and Hono on Val Town.\n\n## Features\n\n- 🌤️ Current weather conditions\n- 📅 5-day weather forecast\n- 📍 Location-based weather (geolocation + search)\n- 🎨 Beautiful, responsive design with TailwindCSS\n- 🌡️ Temperature, humidity, wind speed, and more\n- 🌅 Sunrise/sunset times\n- ☔ Precipitation probability\n\n## Tech Stack\n\n- **Backend**: Hono (TypeScript)\n- **Frontend**: React 18.2.0 + TailwindCSS\n- **Weather API**: Open-Meteo (no API key required)\n- **Styling**: TailwindCSS via Twind\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main Hono server & weather API\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React app entry point\n│ └── components/\n│ └── App.tsx # Main dashboard component\n├── shared/\n│ └── types.ts # Shared TypeScript interfaces\n└── README.md\n```\n\n## API Endpoints\n\n- `GET /` - Serves the main dashboard\n- `GET /api/weather/current?lat={lat}&lon={lon}` - Current weather\n- `GET /api/weather/forecast?lat={lat}&lon={lon}` - 5-day forecast\n- `GET /api/geocoding?q={query}` - Location search\n\n## Usage\n\nThe dashboard automatically detects your location or allows you to search for any city worldwide. Weather data is provided by Open-Meteo API.",[],[214],"files",[151,170,180,186,196,203,212],"counts",{"_225":32,"_226":227,"_228":32,"_229":32},"pulls","branches",3,"forks","envVars","contents",[232,235,238,241],{"_104":152,"_95":153,"_154":155,"_156":-5,"_157":138,"_158":159,"_160":161,"_106":233,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_99":234},["D",1747943807153],[153],{"_104":181,"_95":182,"_154":183,"_156":-5,"_157":138,"_158":101,"_160":161,"_106":236,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_99":237},["D",1747943815554],[182],{"_104":197,"_95":198,"_154":199,"_156":-5,"_157":138,"_158":200,"_160":161,"_106":239,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_99":240},["D",1747943782691],[198],{"_104":213,"_95":214,"_154":215,"_156":-5,"_157":138,"_158":216,"_160":22,"_106":242,"_100":32,"_163":191,"_165":218,"_166":22,"_167":-5,"_99":243},["D",1747943769420],[214],"upstreamProject","upstreamBranch",{"_104":141,"_106":247,"_248":249,"_95":43,"_139":105,"_100":32,"_140":-5,"_142":-5,"_250":-5,"_108":-5,"_148":22,"_110":111,"_147":94,"_16":119,"_146":96},["D",1747940073337],"updatedAt",["D",1747940073337],"lockfileKey","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":98,"_100":101,"_99":72,"_102":257,"_149":262,"_221":284,"_191":-7,"_230":285,"_294":295,"_298":161,"_299":-5,"_300":137,"_301":32,"_302":303},{"_104":105,"_95":96,"_106":258,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":259,"_132":260,"_135":261,"_148":22},["D",1747940073337],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":98,"_104":138,"_139":105,"_140":141,"_142":32,"_143":111,"_144":105,"_145":119,"_146":96,"_147":94},[263,269,275,281],{"_104":152,"_95":153,"_154":155,"_156":-5,"_157":138,"_158":159,"_160":161,"_106":162,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":264,"_99":268},[265],{"_104":171,"_95":172,"_154":173,"_156":155,"_157":138,"_158":159,"_160":22,"_106":174,"_100":32,"_163":175,"_165":176,"_166":22,"_167":-5,"_168":266,"_99":267},[],[153,172],[153],{"_104":181,"_95":182,"_154":183,"_156":-5,"_157":138,"_158":101,"_160":161,"_106":184,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":270,"_99":274},[271],{"_104":187,"_95":188,"_154":189,"_156":183,"_157":138,"_158":101,"_160":161,"_106":190,"_100":32,"_163":191,"_165":192,"_166":22,"_167":-5,"_168":272,"_99":273},[],[182,188],[182],{"_104":197,"_95":198,"_154":199,"_156":-5,"_157":138,"_158":200,"_160":161,"_106":201,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":276,"_99":280},[277],{"_104":204,"_95":205,"_154":206,"_156":199,"_157":138,"_158":200,"_160":161,"_106":207,"_100":32,"_163":175,"_165":208,"_166":22,"_167":-5,"_168":278,"_99":279},[],[198,205],[198],{"_104":213,"_95":214,"_154":215,"_156":-5,"_157":138,"_158":216,"_160":22,"_106":217,"_100":32,"_163":191,"_165":218,"_166":22,"_167":-5,"_168":282,"_99":283},[],[214],[263,265,269,271,275,277,281],[286,288,290,292],{"_104":152,"_95":153,"_154":155,"_156":-5,"_157":138,"_158":159,"_160":161,"_106":233,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_99":287},[153],{"_104":181,"_95":182,"_154":183,"_156":-5,"_157":138,"_158":101,"_160":161,"_106":236,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_99":289},[182],{"_104":197,"_95":198,"_154":199,"_156":-5,"_157":138,"_158":200,"_160":161,"_106":239,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_99":291},[198],{"_104":213,"_95":214,"_154":215,"_156":-5,"_157":138,"_158":216,"_160":22,"_106":242,"_100":32,"_163":191,"_165":218,"_166":22,"_167":-5,"_99":293},[214],"upstream",{"_104":141,"_106":296,"_248":297,"_95":43,"_139":105,"_100":32,"_140":-5,"_142":-5,"_250":-5,"_108":-5,"_148":22,"_110":111,"_147":94,"_16":119,"_146":96},["D",1747940073337],["D",1747940073337],"showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]