Weather App React

A responsive weather application built with React and Tailwind CSS, designed primarily for mobile use but fully responsive for all devices. This project was developed as a personal initiative to explore React capabilities, API integration, and mobile-first development.

Features

• Search Weather: Search any city worldwide to get detailed weather information
• Geolocation: Get weather data for your current location
• Search History: View your previous weather searches
• Dynamic Backgrounds: Background changes based on:
  • Current weather conditions
  • Time of day
  • Weather type (rain, snow, clear, etc.)

Technical Details

Built With

• React
• Tailwind CSS
• OpenWeatherMap API
• Geolocation API

Key Implementation Features

• Responsive design for mobile and desktop
• WebP image optimization for better performance
• Royalty-free images for dynamic backgrounds
• Local storage for search history management

Pages

1. Search Page

   • City search functionality
   • Detailed weather information display
   • Dynamic background based on weather and time

2. Location Page

   • Geolocation-based weather data
   • Nearest city weather information
   • Real-time updates

3. History Page

   • Compact view of past searches
   • Quick access to previous weather data

Future Improvements

• Integration of weekly and monthly weather forecasts
• Enhanced API integration for more detailed weather data

Getting Started

1. Clone the repository
2. Install dependencies:

`npm install`

3. Create a .env file with your OpenWeatherMap API key
4. Run the app:

`npm start`

Note

This project was created as a self-learning initiative to explore React, API integration, and responsive design principles.