Weather App

A modern, responsive weather application built with Next.js, Tailwind CSS, and Axios. Get current weather conditions and 5-day forecasts for any city worldwide.

Features

• 🌤️ Current Weather: Real-time weather data including temperature, conditions, and weather icons
• 📅 5-Day Forecast: Extended forecast with daily min/max temperatures and conditions
• 🔍 City Search: Search for weather data by city name
• 📱 Responsive Design: Works perfectly on desktop and mobile devices
• ⚡ Fast Loading: Optimized performance with smooth animations
• 🎨 Modern UI: Clean, intuitive interface with Tailwind CSS
• 🔒 Secure API: Backend API routes keep your API keys safe

Tech Stack

• Frontend: Next.js 14, React 18, Tailwind CSS
• HTTP Client: Axios
• Styling: Tailwind CSS with custom animations
• API: Next.js API Routes

Getting Started

Prerequisites

• Node.js 16.8 or later
• npm or yarn

Installation

1. Clone or download the project

   cd weather-app

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env.local

   Edit .env.local and add your RapidAPI key when ready:

   RAPIDAPI_KEY=your_actual_rapidapi_key_here
   

4. Run the development server

   npm run dev

5. Open your browser Navigate to http://localhost:3000

Usage

Current Implementation (Mock Data)

The app currently uses mock data for the following cities:

• New York
• London
• Tokyo
• Paris

Simply enter any of these city names to see the weather data.

Adding Real Weather API

To use real weather data:

1. Get a RapidAPI key from WeatherAPI
2. Add your key to .env.local
3. Update /pages/api/weather.js to make actual API calls instead of using mock data

Project Structure

weather-app/
├── pages/
│   ├── api/
│   │   └── weather.js          # Backend API route with mock data
│   ├── _app.js                 # App configuration
│   └── index.js                # Main weather page
├── styles/
│   └── globals.css             # Global styles with Tailwind
├── public/                     # Static assets
├── .env.example                # Environment variables template
├── .env.local                  # Local environment variables
├── package.json                # Dependencies and scripts
├── tailwind.config.js          # Tailwind configuration
├── postcss.config.js           # PostCSS configuration
└── next.config.js              # Next.js configuration

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Features Breakdown

Current Weather Display

• City name
• Current temperature (°C)
• Weather condition description
• Weather icon representation
• Gradient background with animations

5-Day Forecast

• Date display (weekday and date)
• Weather icons for each day
• Min/max temperatures
• Weather condition descriptions
• Responsive grid layout

User Experience

• Loading spinner during API calls
• Error handling with user-friendly messages
• Welcome message for first-time visitors
• Responsive design for all screen sizes
• Smooth hover effects and animations

Customization

Adding More Cities to Mock Data

Edit /pages/api/weather.js and add more entries to the mockWeatherData object:

const mockWeatherData = {
  "YourCity": {
    city: "Your City",
    temperature: 25,
    condition: "Sunny",
    icon: "sunny",
    forecast: [
      // ... forecast data
    ]
  },
  // ... existing cities
};

Styling

The app uses Tailwind CSS with custom components defined in styles/globals.css. You can customize:

• Colors and gradients
• Animation timing and effects
• Card layouts and spacing
• Responsive breakpoints

License

This project is open source and available under the MIT License.

Contributing

1. Fork the project
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

Support

If you have any questions or issues, please feel free to open an issue on the project repository.