- 🔍 Smart City Search — Autocomplete powered by Open-Meteo Geocoding API (true prefix search, no API key needed)
- 📍 Live Location — One-click current location weather via Geolocation API
- 🕐 Per-Hour Forecast — Accurate hourly data from current time to midnight via Open-Meteo
- 📅 7-Day Forecast — Full week outlook with high/low temps and weather icons
- 🌬️ Live Conditions Panel — Humidity, wind speed, pressure + sparkline temperature trend
- 🧭 Wind Compass — SVG compass with real-time directional arrow
- 🕘 Recent Searches — Quickly re-fetch your last 4 searched cities
- 🌡️ Independent Unit Toggles — Temperature (°C / °F) and wind speed (km/h / mph) controlled separately from Settings
- 🌙 Dark / Light Mode — Smooth theme toggle with CSS custom properties
- 📱 Fully Responsive — Mobile bottom nav, overlay search bar, right-panel content inline on small screens
- 🔁 301 Redirects —
weather-now-jimut.netlify.apppermanently redirects toweather-now.jimut.in
| Layer | Technology |
|---|---|
| Framework | React 19 + Vite 6 |
| Styling | Tailwind CSS v4 + CSS custom properties |
| Package Manager | pnpm v11 |
| Weather Data | OpenWeatherMap API |
| Hourly / Daily Data | Open-Meteo API (free, no key) |
| City Autocomplete | Open-Meteo Geocoding API |
| Icons | Lucide React |
| Hosting | Netlify |
+----------+------------------------------+--------------+
| | Header (search + location) | |
| Sidebar +------------------------------+ Right Panel |
| (nav) | Hero Weather Card | |
| | Hourly Forecast to midnight | Live Conds |
| Home | 7-Day Forecast | Recents |
| Forecast| | Wind Info |
| Settings| | Made w/ <3 |
+----------+------------------------------+--------------+
On mobile: sidebar collapses → bottom nav. Right panel moves inline below the main cards.
# Clone
git clone https://github.com/java-c-ier/Weather_Website.git
cd Weather_Website
# Install dependencies
pnpm install
# Add your OpenWeatherMap API key
echo "VITE_OPENWEATHER_API_KEY=your_key_here" > .env
# Start dev server
pnpm devGet a free API key at openweathermap.org.
Hosted on Netlify with a custom domain via GoDaddy CNAME.
| URL | Behaviour |
|---|---|
weather-now.jimut.in |
Primary domain (HTTPS) |
weather-now-jimut.netlify.app |
301 → weather-now.jimut.in |
src/
├── App.jsx # Root state, data fetching, layout
├── index.css # CSS variables, grid layout, animations
├── main.jsx
├── components/
│ ├── Header.jsx # Search autocomplete, location, theme toggle
│ ├── Sidebar.jsx # Desktop nav
│ ├── BottomNav.jsx # Mobile nav
│ ├── HeroWeather.jsx # Main weather card
│ ├── HourlyForecast.jsx # Per-hour forecast to midnight
│ ├── WeeklyForecast.jsx # 7-day daily forecast
│ ├── LiveConditions.jsx # Humidity, wind, pressure + sparkline
│ ├── WindInfo.jsx # SVG wind compass
│ ├── RecentSearches.jsx # Last 4 searched cities
│ ├── RightPanel.jsx # Desktop right column
│ └── SettingsPanel.jsx # Unit toggles
└── utils/
└── wmoIcons.js # WMO weather code → OWM icon mapping
Made with ❤️ by Jimut