A sleek and modern Single Page Application (SPA) weather app built using React + Vite, TanStack Query, Context API, TailwindCSS, and daisyUI. Get real-time weather information for any city around the globe in an instant!
- 🔥 Instant weather search by city name
- 🌎 Uses the browser's Geolocation API to get coordinates on page load.
- ⚡ Global weather data (temperature, humidity, weather condition)
- 🌓 Light/Dark mode support
- 🛠️ Powered by Context API for state management
- 📱 Fully responsive and mobile-friendly
- 🎨 Beautiful UI with
TailwindCSSanddaisyUI
| Tech | Description |
|---|---|
| React + Vite | Frontend framework & build tool |
| TanStack Query | For making API calls to weather services |
| Context API | Global state management |
| Geolocation API | Get coordinates |
| TailwindCSS | Utility-first CSS framework |
| daisyUI | Tailwind Components Library |
git clone https://github.com/tbs96/weather-app-react.git
cd weather-appnpm install- Sign up at OpenWeatherMap (or any weather API you prefer).
- Create a
.envfile in the root of the project and add your API key:
VITE_WEATHER_API_KEY=<YOUR_API_KEY>npm run devYour app will be running at http://localhost:5173 🎉
npm run dev -- --host– Start development servernpm run build– Build app for productionnpm run preview– Preview production build locally
Contributions, issues, and feature requests are welcome!
Feel free to open a pull request.