React Weather - Daily Weather Forecast App

🌍 Demo

Experience React Weather in action:

• Live Demo: react-weather

📌 Core Features

• Location-based weather detection
  • Automatic city detection based on user's IP
  • Manual city search with autocomplete
• Comprehensive weather information
  • Current temperature
  • Min/Max temperature
  • Humidity levels
  • Wind speed
  • Atmospheric pressure
• Dynamic weather visualization
  • Weather condition icons
  • Temperature graphs
• Multi-city management
  • Add multiple cities
  • Remove cities
  • Update weather data
• Temperature unit conversion
  • Celsius/Fahrenheit toggle
• 24-hour forecast
  • Detailed hourly weather data
  • Temperature trends

🛠️ Project Features

➤ Integration with External Services

• OpenWeatherMap - Weather data provider
  • Current weather conditions
  • Hourly forecasts
  • Weather icons and descriptions
• IPInfo - Location detection service
  • City detection based on IP
• HERE Maps - Location autocomplete
  • City search suggestions
  • Geographic data validation

➤ Technology Stack

• React - UI library
• TypeScript - Type safety
• Redux Toolkit - State management
• React Router - Navigation
• Materialize CSS - Styling framework
• Weather Icons - Weather icon font

🔧 Required Environment Variables

Create a .env.local file in the root directory:

REACT_APP_API_KEY="your_openweathermap_api_key"
REACT_APP_LOCATION_API_KEY="your_ipinfo_api_key"
REACT_APP_AUTO_COMPLETE_API_KEY="your_here_api_key"

🚀 Quick Start

1. Clone the repository:

git clone https://github.com/your-username/react-weather.git

2. Install dependencies:

npm install

3. Set up environment variables (see above)

4. Start development server:

npm start

5. Build for production:

npm run build

📂 Project Structure

react-weather/
├── src/
│   ├── app/                # Redux store configuration
│   │   ├── hooks.ts        # Custom Redux hooks
│   │   ├── store.ts        # Store setup
│   │   └── weatherSlice.ts # Weather state management
│   ├── components/         # React components
│   │   ├── Alert/          # Error notifications
│   │   ├── Success/        # Success notifications
│   │   ├── Warning/        # Warning notifications
│   │   └── ...            # Other UI components
│   ├── pages/             # Route components
│   │   ├── Home.tsx       # Main weather display
│   │   ├── SingleCityList # Detailed city forecast
│   │   └── NotFound.tsx   # 404 page
│   ├── utils/             # Helper functions
│   │   ├── fetchDataLocation.ts
│   │   ├── getWeatherDate.ts
│   │   └── iconsMark.ts   # Weather icon mapping
│   └── interfaces.ts      # TypeScript interfaces
├── public/               # Static assets
└── package.json         # Project dependencies

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.