Your daily weather, visualized smartly.
WeatherIQ is a modern, visually stunning weather dashboard for India. Get real-time weather, beautiful charts, animated backgrounds, and smart tips—all in one place.
- 🇮🇳 India-focused: All metrics and tips are tailored for Indian users.
- 🌤️ Current Weather & Forecast: Accurate, real-time data from WeatherAPI.com.
- 📈 Interactive History Graph: See temperature trends for the last 7 days.
- 🎨 Animated Weather Background: Subtle, dynamic backgrounds powered by Vanta.js.
- 💡 Smart Weather Tips: Indian weather facts and tips, shown on each visit.
- ✨ Beautiful UI: Clean, responsive, and professional design with smooth animations.
- Node.js (v16 or higher recommended)
- npm (comes with Node.js)
- Git (optional, for cloning the repo)
react,react-domtypescriptvite@emotion/react,@emotion/styledframer-motionchart.js,react-chartjs-2vanta,threedate-fns
-
Clone the repository:
git clone <your-repo-url> cd WeatherIQ
-
Install dependencies:
npm install # or yarn install -
Get a WeatherAPI.com API key:
- Sign up at WeatherAPI.com
- Copy your API key.
- Add it to your environment (see
.env.exampleor update insrc/services/weatherService.ts)
-
Start the development server:
npm run dev # or yarn dev -
Open in your browser:
- Visit http://localhost:5173
- By default, the API key is set in
src/services/weatherService.ts. - For production, use environment variables for security.
- Search for any Indian city to get real-time weather and a 7-day history graph.
- Enjoy animated backgrounds and rotating Indian weather tips.
- All data is shown in Indian metrics (°C, km/h, etc).
- WeatherAPI.com for weather data
- Vanta.js for animated backgrounds
- Chart.js for beautiful charts
- date-fns for date formatting
MIT