Real-time weather updates, auto-detected location, forecast charts, favorites, dark mode, and a clean modern UI. Powered by OpenWeatherMap and built for performance. ⚡🌍
🌐 Live Demo
📁 GitHub Repo
- 🔍 Search weather by city
- 📍 Auto-detect current location using the browser's Geolocation API
- 🌤️ 5-Day weather forecast with visual charts
- ❤️ Add and manage favorite cities (persisted in localStorage)
- 🌗 Toggle between Light & Dark modes with system preference support
- 🔄 Refresh button to manually re-fetch weather data
- 📊 Forecast trend charts with Recharts
- ⚡ Optimized data fetching using TanStack Query
- 🔔 Toast notifications using Sonner
- 🎨 Clean, accessible design with Shadcn and Tailwind CSS
- 📱 Fully responsive for all screen sizes
On initial load, the app will:
- Prompt the user for permission to access their current location using
navigator.geolocation. - If granted, it fetches the user's latitude and longitude.
- The app uses these coordinates to query the OpenWeatherMap API for accurate weather data in that area.
✅ If location access is denied or fails, the app falls back to a default city (e.g., New York), ensuring functionality remains uninterrupted.
✅ Users can also manually search and favorite cities anytime.
| Tech | Purpose |
|---|---|
| React + TypeScript | Front-end framework with static typing |
| Tailwind CSS | Utility-first styling |
| Shadcn UI | Pre-styled, accessible components |
| TanStack Query | Caching & background fetching |
| Recharts | Forecast visualizations |
| Sonner | Lightweight toast notifications |
| React Router v7 | Client-side routing |
| OpenWeatherMap API | Weather data provider |
| date-fns | Lightweight date formatting |
| Geolocation API | Detect user location |
This app uses the OpenWeatherMap API to retrieve weather data.
- Clone the repo
git clone https://github.com/solan117/weather_app.git
cd weather_app
- Install dependencies
npm install
- Set up environment variables
Create a .env file in the root:
VITE_WEATHER_API_KEY=your_openweather_api_key🔐 Your API key is kept safe and out of version control via
.gitignore.
- Start development server
npm run dev
Visit http://localhost:5173 to view the app.
✅ Provides clean structure, utility aliases, and Lucide icon support.
src/
├── components/ # UI components (CityCard, ForecastChart, etc.)
├── hooks/ # Custom hooks (useLocalStorage, useWeather)
├── lib/ # Utility functions
├── pages/ # Page views (e.g., Home.tsx)
├── services/ # API services (weatherAPI.ts)
├── App.tsx
└── main.tsx
- 🌡️ Unit toggle: Celsius ↔ Fahrenheit
- 🧪 Testing with Vitest or Jest
- 🛜 Offline mode with service workers
- 📲 Convert to PWA
- 📍 Map-based location picker
Karan Solanki
Full-Stack Developer | ReactJS · Java · Spring Boot · AWS
MIT — Free to use, fork, and contribute.
“Built with ❤️ to blend beautiful design with reliable weather insights.”