A responsive weather app with city search, unit toggling, and 7-day + hourly forecasts.
Live Demo: weather-now-rrn.vercel.app
Weather Now is a feature-rich weather application powered by the Open-Meteo API. Search any city to get current conditions, a 7-day forecast, and an hourly breakdown. Toggle between Imperial and Metric units, and switch specific measurements for temperature, wind speed, and precipitation independently.
- Search weather by city name
- Current conditions — temperature, feels like, humidity, wind speed, precipitation
- 7-day forecast with daily high/low temperatures and weather icons
- Hourly forecast with day selector
- Toggle between Imperial and Metric unit systems
- Independent unit controls for temperature (°C / °F), wind speed (km/h / mph), and precipitation (mm)
- Responsive layout across mobile, tablet, and desktop
- Hover and focus states for all interactive elements
| Category | Technology |
|---|---|
| Framework | React + Vite |
| Language | TypeScript |
| Styling | Tailwind CSS |
| UI Components | Radix UI |
| State Management | Zustand |
| Date Formatting | date-fns |
| Weather Data | Open-Meteo API |
- Node.js
v18+
git clone https://github.com/nofuenterr/weather-now.git
cd weather-now
npm installnpm run previewnpm run build| Desktop | Tablet | Mobile |
|---|---|---|
![]() |
![]() |
![]() |
- Geolocation detection on first visit
- Favorites / saved locations
- Compare locations side-by-side
- UV index, visibility, and air pressure data
- Sunrise/sunset times with indicators
- Animated weather backgrounds based on conditions
- Voice search
- Dark/light mode that adapts to time of day
- Progressive Web App (PWA) support
- City search
- Current weather conditions
- Additional metrics (feels like, humidity, wind, precipitation)
- 7-day forecast
- Hourly forecast with day selector
- Imperial / Metric toggle
- Independent unit controls
- Responsive layout
- Hover and focus states
This project is for personal/portfolio use.
- Weather data provided by Open-Meteo (free, open-source API)
Developed by RR Nofuente


