🌤️ WeatherForecastee

AI-powered weather forecasting with cinematic video reports

Overview

WeatherForecastee is a cutting-edge web application that transforms traditional weather forecasts into engaging, cinematic video experiences. By leveraging Google's Gemini AI and Veo video generation models, the app creates personalized 8-second weather forecast videos for any city worldwide.

✨ Features

• 🌍 Global Coverage: Enter any city name to get localized weather forecasts
• 🤖 AI-Powered Summaries: Natural language weather summaries generated by Gemini
• 🎬 Cinematic Videos: 8-second weather forecast videos created with Veo
• 📊 7-Day Forecasts: Detailed weather data including temperature, precipitation, and wind conditions
• 🎨 Modern UI: Dark-themed interface with smooth animations and loading states
• 📱 Responsive Design: Optimized for both desktop and mobile devices
• 🔐 API Key Management: Secure handling of API credentials

🏗️ Architecture

The application follows a clean, modular architecture:

WeatherForecastee/
├── components/           # UI Components
│   ├── PromptForm.tsx    # City search form with validation
│   ├── VideoResult.tsx   # Video display and summary component
│   ├── LoadingIndicator.tsx  # Animated loading states
│   ├── ApiKeyDialog.tsx  # API key management dialog
│   └── icons.tsx         # Custom icon components
├── services/             # Business Logic Layer
│   ├── geminiService.ts  # AI generation services (text & video)
│   └── weatherService.ts # Weather API integration
├── types.ts              # TypeScript interfaces and enums
├── App.tsx               # Main application component
├── index.tsx             # Application entry point
└── vite.config.ts        # Build and dev configuration

🚀 Technology Stack

Core Technologies

• React 19.2.0 - Modern frontend framework with latest features
• TypeScript 5.8 - Type-safe development with enhanced productivity
• Vite 6.2.0 - Fast build tool and development server
• Tailwind CSS - Utility-first CSS framework (via CDN)

AI & APIs

• Google GenAI SDK - Google's Generative AI SDK
• Gemini - Text generation for weather summaries
• Veo - AI video generation model
• Open-Meteo API - Free weather data service (no API key required)

Development Tools

• Lucide React - Comprehensive icon library
• ESLint & Prettier - Code quality and formatting
• Path aliases - Clean import statements with @/* support

🔄 How It Works

1. Input: User enters a city name
2. Geocoding: Convert city name to coordinates using Open-Meteo API
3. Weather Data: Fetch 7-day forecast including:
   • Temperature ranges (max/min)
   • Weather conditions and codes
   • Precipitation probability and amounts
   • Wind speed and gusts
   • Snowfall predictions
4. AI Processing: Generate natural language summary using Gemini
5. Video Creation: Produce cinematic 8-second weather video with Veo
6. Display: Show video alongside detailed weather summary

🛠️ Installation & Setup

Prerequisites

• Node.js 18+ - Latest LTS version recommended
• Google Cloud Account - With billing enabled for video generation
• Gemini API Key - From Google AI Studio

Local Development

1. Clone and install dependencies:

   git clone <repository-url>
   cd WeatherForecastee
   npm install

2. Environment setup: Create a .env.local file in the root directory:

   GEMINI_API_KEY=your_gemini_api_key_here

3. Run development server:

   npm run dev

   The app will be available at http://localhost:3000

4. Build for production:

   npm run build
   npm run preview

💡 Usage

1. Start the app and wait for the initial load
2. Enter a city name in the search field (e.g., "Tokyo", "New York", "London")
3. Wait for processing - the app will show animated loading states for:
   • Fetching weather data
   • Generating AI summary
   • Creating the video
4. View results - watch your personalized weather forecast video alongside detailed information

🚨 Important Notes

API Key Requirements

• Video Generation: Veo 3 requires a paid Google Cloud account with billing enabled
• Cost Management: Monitor your Google Cloud usage to avoid unexpected charges

Weather Data

• Source: Open-Meteo API provides reliable, free weather data
• Coverage: Global coverage with accurate 7-day forecasts
• No Authentication: No API key required for weather data

Development Guidelines

• Follow TypeScript best practices
• Use meaningful component and function names
• Implement proper error handling
• Maintain consistent code style
• Add appropriate TypeScript types

📝 License

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

🔗 Links

• Demo Video: https://drive.google.com/file/d/1iiAx7JxJt5SOrJnsKtDPDElondGs1Ml9/view?usp=sharing
• Google AI Studio: https://aistudio.google.com
• Open-Meteo API: https://open-meteo.com
• Gemini Documentation: https://ai.google.dev/docs
• Veo: https://deepmind.google/technologies/veo/

---

Made with ❤️ using React, TypeScript, and Google's AI technologies in Berlin