HK Weather

A fast, mobile-first Hong Kong weather web app. It combines Hong Kong Observatory (HKO) official data with Open-Meteo model forecasts — free and ad-free.

Live demo: https://henrylok0.github.io/hkweather/

Features

• Now — current conditions, feels-like temperature, rain/UV/wind, outing tips, and a short hourly strip
• Forecast — 24-hour Open-Meteo outlook and official 9-day HKO forecast
• HK-wide — city summary and district temperature / rainfall rankings
• Pro — full advanced mode (48h risk, 18-district rain table, radar, model analysis) via lazy-loaded Weather.jsx
• 18 districts — searchable picker with favourite districts (up to 3)
• Bilingual UI — Traditional Chinese and English (HKO API language follows UI)
• Dark mode — light, dark, or follow system
• PWA-ready — installable, with manifest shortcuts for each tab
• Responsive — bottom nav on mobile, sidebar on desktop
• URL tabs — #home, #forecast, #region, #pro persist on refresh

Data sources

Source	Used for
HKO Open Data API	Warnings, regional readings, 9-day forecast
Open-Meteo	Hourly precipitation, UV, wind; daily rain probability

No API keys are required.

Tech stack

• React 19 + Vite 6
• Tailwind CSS 4
• Deployed to GitHub Pages (base: /hkweather/)

Project structure

src/
├── app/
│   ├── WeatherApp.jsx          # App shell, routing by URL hash
│   ├── components/             # Views, header, nav, district picker, etc.
│   └── hooks/                  # Weather data, locale, theme, pull-to-refresh
├── lib/
│   ├── constants.js            # Districts, API URLs, tabs
│   ├── format.js               # Date/time helpers
│   ├── hko.js                  # HKO response parsers
│   ├── weather.js              # Open-Meteo labels, advice builder
│   └── i18n/                   # Translations (zh / en), theme preferences
├── Weather.jsx                 # Pro mode (full legacy weather page)
└── index.css                   # App layout and theme
public/
├── icon.svg
└── manifest.json

Getting started

Prerequisites

• Node.js 18+
• npm

Install and run locally

git clone https://github.com/HenryLok0/hkweather.git
cd hkweather
npm install
npm run dev

Open the URL shown in the terminal (usually http://localhost:5173/hkweather/).

Build for production

npm run build

This regenerates PNG/ICO favicons from public/icon.svg, then writes output to dist/.

To refresh icons only:

npm run icons

Preview production build

npm run preview

Deploy to GitHub Pages

npm run deploy

This runs vite build and publishes dist/ with gh-pages.

Ensure the repository GitHub Pages source is configured for the gh-pages branch (or adjust the deploy script to match your setup).

Configuration

Item	Location	Notes
Base path	vite.config.js → base	Default /hkweather/ for project pages
Default district	localStorage key hkweather-selected-district	Set via UI
Language	localStorage key hkweather-locale	zh or en
Theme	localStorage key hkweather-theme	light, dark, or system
Favourite districts	localStorage key hkweather-favorite-districts	Up to 3 IDs

Disclaimer

• HKO data is official; Open-Meteo and Pro-mode model outputs are non-official and for reference only.
• Always follow HKO warnings and bulletins during severe weather.
• This project is not affiliated with the Hong Kong Observatory.

License

Private repository — check with the owner before redistribution.