Skip to content

Commit 64c2f8b

Browse files
committed
Updated README to explain what the project does
1 parent c07425d commit 64c2f8b

1 file changed

Lines changed: 77 additions & 2 deletions

File tree

README.md

Lines changed: 77 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,79 @@
11
# Weatherify
2-
Clean and minimal React weather app hosted on GitHub pages.
32

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

Comments
 (0)