|
1 | 1 | # Weatherify |
2 | | -Clean and minimal React weather app hosted on GitHub pages. |
3 | 2 |
|
4 | | -Check it out here: https://weather.berk.au |
| 3 | +Simple weather app built with React + TypeScript + Vite and deployed to GitHub Pages. |
| 4 | + |
| 5 | +Check it out here: https://weather.berk.au |
| 6 | + |
| 7 | +## How does it work? |
| 8 | + |
| 9 | + |
| 10 | +1. Visit "https://weather.berk.au" |
| 11 | +2. Type in a city name (e.g. Melbourne) |
| 12 | +3. The backend looks up that place using Open-Meteo geocoding |
| 13 | +4. Fetches current weather + a 4-day forecast for that location |
| 14 | +5. Shows an easy-to-read dashboard with temperature, conditions, wind, humidity, rain chance, and daily highs/lows. |
| 15 | + |
| 16 | +> [!NOTE] |
| 17 | +> Automatic location detection is available but still WIP. Need to fix! |
| 18 | +
|
| 19 | +## How the codebase is organized |
| 20 | + |
| 21 | +Main app code is in `weather/`. |
| 22 | + |
| 23 | +- `weather/src/App.tsx` |
| 24 | + - Page layout and wiring between UI + hooks. |
| 25 | +- `weather/src/hooks/useWeather.ts` |
| 26 | + - Main weather logic/state (loading, errors, search, location flow). |
| 27 | +- `weather/src/services/openMeteo.ts` |
| 28 | + - API calls to Open-Meteo (city search, reverse geocode, forecast fetch). |
| 29 | +- `weather/src/components/*` |
| 30 | + - UI pieces: |
| 31 | + - `SearchPanel` for input/location prompt |
| 32 | + - `CurrentWeatherCard` for current conditions |
| 33 | + - `ForecastGrid` for 4-day outlook |
| 34 | + - `TopActionsBar` for theme toggle and top actions |
| 35 | +- `weather/src/hooks/useTheme.ts` |
| 36 | + - Light/dark theme handling (system-aware, persisted in localStorage). |
| 37 | +- `weather/src/utils/*` |
| 38 | + - Helpers: |
| 39 | + - `geolocation.ts`: browser geolocation wrappers + friendly error messages |
| 40 | + - `format.ts`: temperature/wind/percent/date formatting |
| 41 | + - `rateLimit.ts`: local lookup throttling (500 requests/hour in localStorage) |
| 42 | +- `weather/src/types/weather.ts` |
| 43 | + - Shared TypeScript types. |
| 44 | + |
| 45 | +## Data flow (high level) |
| 46 | + |
| 47 | +1. User searches city or taps "Use my location". |
| 48 | +2. `useWeather` triggers an API call via `openMeteo.ts`. |
| 49 | +3. Raw API response is transformed into a `WeatherSnapshot`. |
| 50 | +4. React state updates, and UI components render the new weather data. |
| 51 | + |
| 52 | +## Notes on behavior |
| 53 | + |
| 54 | +- Geolocation prompt preference is saved in localStorage. |
| 55 | +- Theme preference is saved in localStorage (`auto`, `light`, `dark`). |
| 56 | +- A client-side lookup cap is enforced to reduce abuse: |
| 57 | + - 500 lookups per rolling 1-hour window (localStorage-based). |
| 58 | + |
| 59 | +## Run locally |
| 60 | + |
| 61 | +From the repo root: |
| 62 | + |
| 63 | +```bash |
| 64 | +cd weather |
| 65 | +npm install |
| 66 | +npm run dev |
| 67 | +``` |
| 68 | + |
| 69 | +Then open the local Vite URL shown in the terminal. |
| 70 | + |
| 71 | +## Build for production |
| 72 | + |
| 73 | +```bash |
| 74 | +cd weather |
| 75 | +npm run build |
| 76 | +npm run preview |
| 77 | +``` |
| 78 | + |
| 79 | +Push to GitHub (main branch), then let GitHub actions take care of the rest (see the dotfile). |
0 commit comments