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

• 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

• 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

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

1. Clone the repository

   git clone YOUR_GIT_URL>gt;
   
   cd YOUR_PROJECT_NAME>gt;

2. Install dependencies

   npm install

3. Start development server

   npm run dev

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

To use live weather data instead of demo data:

1. Get an API key

   • Sign up at OpenWeatherMap
   • 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:

   const API_KEY = 'your_actual_api_key_here';

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

• 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

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
tem
esign system

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

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

• GET /weather - Current weather data by city name

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)

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

• Mobile-first approach
• Adapts to all screen sizes
• Touch-friendly interface
• Optimized loading states

1. Open your Lovable Project
2. Click "Share" → "Publish"
3. Your app will be deployed automatically

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

• Vercel: Automatic deployments from Git
• Netlify: Drag & drop deploymentment
• GitHub Pages: Free static hosting
• Firebase Hosting: Google's hosting platform

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

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

• Modify design tokens in src/index.css
• Update Tailwind config in tailwind.config.ts
• Customize components in their respective files

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

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

• 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

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!