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 dev
Your 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.