SkyCast Weather App

A modern, interactive weather application built with React that provides detailed weather forecasts for any city worldwide.

Features

Core Weather Functionality

• Real-time weather data for any city
• 7-day weather forecast
• Detailed weather information (temperature, humidity, wind, UV index, sunrise/sunset)
• Color-coded temperature display
• Weather condition classification

Enhanced Features

• Current Location Detection: Get weather for your current location with one click
• Search History: Automatically saves your recent searches
• Recent Cities: Quick access buttons for recently viewed cities
• Temperature Units: Toggle between Celsius and Fahrenheit
• Local Storage: Persists search history and preferences

User Interface

• Modern, professional blue theme
• Responsive design for all devices
• Smooth animations and transitions
• Loading states and error handling
• Interactive weather cards with hover effects

Data Persistence

• Search history saved in localStorage
• Recent cities automatically tracked
• Temperature unit preferences remembered
• Offline-friendly with cached data

Technologies Used

• React 18: Modern React with hooks
• Axios: HTTP client for API requests
• Visual Crossing Weather API: Real-time weather data
• CSS3: Modern styling with animations
• LocalStorage: Client-side data persistence

Getting Started

1. Install Dependencies

   npm install

2. Start Development Server

   npm start

3. Open Browser Navigate to http://localhost:3000

Usage

Search for Weather

1. Enter a city name in the search field
2. Click "Get Weather" or press Enter
3. View the detailed 7-day forecast

Use Current Location

1. Click "Use My Current Location"
2. Allow browser location access
3. Get instant weather for your location

Switch Temperature Units

1. Use the °C/°F toggle buttons
2. Preference is automatically saved

Recent Cities

• Click on any recent city button to quickly view its weather
• Recent cities are automatically saved as you search

Project Structure

src/
├── App.js          # Main application component
├── App.css         # Application styles
├── index.js        # Application entry point
└── index.css       # Global styles

API Configuration

The app uses the Visual Crossing Weather API. The API key is currently included in the component but should be moved to environment variables for production:

REACT_APP_WEATHER_API_KEY=your_api_key_here

Features Removed

The following unnecessary Create React App files have been removed for a cleaner project:

• App.test.js - Basic test file
• logo.svg - React logo
• reportWebVitals.js - Performance reporting
• setupTests.js - Test configuration

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Performance Optimizations

• Component-level state management
• Efficient API calls with loading states
• LocalStorage for data persistence
• Responsive image and layout optimization
• Minimal bundle size with tree shaking

Future Enhancements

Potential features to add:

• Weather maps integration
• Hourly forecast view
• Weather alerts and notifications
• Air quality index
• Multiple city comparison
• Data export functionality
• Dark mode theme
• PWA capabilities