AI Weather App

An intelligent weather forecasting application that combines real-time weather data with AI-powered insights. Built with React, Vite, and powered by WeatherAPI and Google Gemini AI.

Features

• 🌤️ Real-time weather data from WeatherAPI
• 🤖 AI-powered weather insights using Google Gemini
• 🎨 Dynamic UI with temperature-based background colors
• 🔍 City search functionality
• 📱 Responsive design for all devices
• ⚡ Fast development with Vite

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v14 or higher)
• npm, yarn, or pnpm
• WeatherAPI key (free at weatherapi.com)
• Google Gemini API key (free at Google AI Studio)

Installation

1. Clone the repository:

   git clone https://github.com/x0lg0n/AI-Weather-App.git
   cd ai-weather-app

2. Install dependencies:

   pnpm install
   # or
   npm install
   # or
   yarn install

3. Create a .env file in the root directory with your API keys:

   VITE_WEATHER_API_KEY=your_weatherapi_key_here
   VITE_GEMINI_API_KEY=your_google_gemini_key_here

4. Start the development server:

   pnpm dev
   # or
   npm run dev
   # or
   yarn dev

5. Open your browser to http://localhost:5173

Available Scripts

• pnpm dev - Starts the development server
• pnpm build - Builds the app for production
• pnpm preview - Previews the production build locally
• pnpm lint - Runs ESLint

Project Structure

src/
├── components/
│   └── Siderbar.jsx
├── App.jsx
├── index.css
├── main.jsx
└── utils.js

Technologies Used

• React 19 - Frontend library
• Vite 7 - Build tool and development server
• Tailwind CSS - Utility-first CSS framework
• WeatherAPI - Weather data provider
• Google Generative AI - For AI-powered weather insights
• Axios - HTTP client
• Lucide React - Icon library
• Framer Motion - Animation library

How It Works

1. Users enter a city name in the search bar
2. The app fetches current weather data from WeatherAPI
3. Weather data is displayed in an attractive dashboard with dynamic background colors
4. Google Gemini AI generates personalized weather insights and outfit suggestions
5. Additional weather metrics like humidity, wind speed, and "feels like" temperature are shown

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Weather data provided by WeatherAPI
• AI insights powered by Google Gemini
• UI built with Tailwind CSS
• Icons from Lucide