# WeatherNow - Modern Weather App

A beautiful, minimalistic weather application that provides real-time weather information for any city worldwide. Built with React, TypeScript, and Tailwind CSS.

![WeatherNow App](https://via.placeholder.com/800x400/4A90E2/FFFFFF?text=WeatherNow+-+Weather+App)

## ✨ Features

- **City Search**: Enter any city name to get current weather information
- **Dynamic Backgrounds**: Background changes based on weather conditions (sunny, cloudy, rainy, snowy)
- **Temperature Unit Toggle**: Switch between Celsius and Fahrenheit
- **Detailed Weather Info**: Temperature, humidity, wind speed, pressure, visibility, and more
- **Responsive Design**: Works perfectly on desktop, tablet, and mobile devices
- **Modern UI**: Clean, minimalistic interface with beautiful gradients and animations
- **Error Handling**: Graceful error messages for invalid cities or API issues
- **Demo Mode**: Works with demo data when no API key is provided

## 🚀 Technologies Used

- **React 18** - Modern React with hooks
- **TypeScript** - Type-safe development
- **Tailwind CSS** - Utility-first CSS framework
- **Vite** - Fast development build tool
- **shadcn/ui** - Beautiful UI components
- **Lucide React** - Modern icon library
- **OpenWeatherMap API** - Weather data provider

## 📦 Installation & Setup

### Prerequisites

- Node.js 16+ and npm installed
- OpenWeatherMap API key (optional for demo mode)

### Quick Start

1. **Clone the repository**
   ```bash
   git clone <YOUR_GIT_URL>
   cd <YOUR_PROJECT_NAME>
   ```

2. **Install dependencies**
   ```bash
   npm install
   ```

3. **Start development server**
   ```bash
   npm run dev
   ```

4. **Open your browser**
   Navigate to `http://localhost:8080` to see the app

### Getting Live Weather Data

To use live weather data instead of demo data:

1. **Get an API key**
   - Sign up at [OpenWeatherMap](https://openweathermap.org/api)
   - Get your free API key from the dashboard

2. **Update the API key**
   - Open `src/services/weatherService.ts`
   - Replace `'demo_key'` with your actual API key:
   ```typescript
   const API_KEY = 'your_actual_api_key_here';
   ```

## 🎨 Design System

The app features a comprehensive design system with:

- **Weather-themed gradients** for different conditions
- **Semantic color tokens** for consistent theming
- **Responsive typography** and spacing
- **Smooth animations** and transitions
- **Glass-morphism effects** for modern aesthetics

### Color Themes

- **Sunny**: Warm yellows and oranges
- **Cloudy**: Cool grays and blues
- **Rainy**: Deep blues and grays
- **Snowy**: Light blues and whites
- **Clear**: Bright blues and whites

## 🏗️ Project Structure

```
src/
├── components/           # Reusable UI components
│   ├── ui/              # shadcn/ui components
│   ├── SearchBar.tsx    # City search input
│   ├── WeatherCard.tsx  # Main weather display
│   └── TemperatureToggle.tsx  # Unit toggle button
├── services/            # Business logic
│   └── weatherService.ts # Weather API integration
├── pages/               # Route components
│   ├── Index.tsx        # Main weather app page
│   └── NotFound.tsx     # 404 page
├── hooks/               # Custom React hooks
├── lib/                 # Utility functions
└── index.css           # Global styles & design system
```

## 🔧 Available Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run lint` - Run ESLint

## 🌐 API Integration

The app integrates with the OpenWeatherMap API to fetch real-time weather data:

- **Current Weather**: Get current conditions for any city
- **Error Handling**: Proper error messages for API failures
- **Rate Limiting**: Respects API rate limits
- **Demo Mode**: Fallback demo data when API is unavailable

### API Endpoints Used

- `GET /weather` - Current weather data by city name

## 📱 Features in Detail

### Dynamic Backgrounds
The app automatically changes its background gradient based on the current weather condition:
- Clear skies → Sunny gradient (yellows/oranges)
- Cloudy → Cloudy gradient (grays/blues)
- Rain/Drizzle → Rainy gradient (deep blues)
- Snow → Snowy gradient (light blues/whites)
- Thunderstorm → Stormy gradient (dark blues/grays)

### Weather Information Displayed
- Current temperature with "feels like" temperature
- Weather description and icon
- Humidity percentage
- Wind speed (km/h)
- Atmospheric pressure (hPa)
- Visibility distance (km)

### Responsive Design
- Mobile-first approach
- Adapts to all screen sizes
- Touch-friendly interface
- Optimized loading states

## 🚀 Deployment

### Using Lovable
1. Open your [Lovable Project](https://lovable.dev/projects/f128c1f8-dc8a-46d0-9662-acd19d9a983f)
2. Click "Share" → "Publish"
3. Your app will be deployed automatically

### Manual Deployment
1. Build the project: `npm run build`
2. Deploy the `dist` folder to your hosting platform
3. Configure your hosting to serve `index.html` for all routes

### Hosting Platforms
- **Vercel**: Automatic deployments from Git
- **Netlify**: Drag & drop deployment
- **GitHub Pages**: Free static hosting
- **Firebase Hosting**: Google's hosting platform

## 🔒 Environment Variables

Currently, the app uses a hardcoded API key for simplicity. For production use:

1. Create a `.env` file (not included in this template)
2. Add your API key: `VITE_WEATHER_API_KEY=your_key_here`
3. Update the service to use: `import.meta.env.VITE_WEATHER_API_KEY`

## 🛠️ Customization

### Adding New Weather Conditions
To add support for new weather conditions:

1. Update `getBackgroundClass()` in `Index.tsx`
2. Add new gradient classes in `tailwind.config.ts`
3. Define gradient colors in `index.css`

### Styling Modifications
- Modify design tokens in `src/index.css`
- Update Tailwind config in `tailwind.config.ts`
- Customize components in their respective files

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch: `git checkout -b feature-name`
3. Make your changes
4. Commit: `git commit -m 'Add some feature'`
5. Push: `git push origin feature-name`
6. Submit a pull request

## 📄 License

This project is open source and available under the [MIT License](LICENSE).

## 💡 Future Enhancements

- **5-day forecast** display
- **Geolocation** support for current location
- **Weather alerts** and notifications
- **Multiple cities** management
- **Historical weather** data
- **Weather maps** integration
- **Dark/light mode** toggle
- **Offline support** with cached data

## 🆘 Troubleshooting

### Common Issues

**Weather data not loading**
- Check your internet connection
- Verify your API key is correct
- Check browser console for errors

**App not starting**
- Ensure Node.js 16+ is installed
- Delete `node_modules` and run `npm install`
- Check for port conflicts (default: 8080)

**Styling issues**
- Clear browser cache
- Check for CSS conflicts
- Verify Tailwind CSS is properly configured

---

Built with ❤️ using modern web technologies. Enjoy using WeatherNow!