Weather App

A modern, responsive weather application built with React and TypeScript that displays current weather conditions and a 3-day forecast. The app features dynamic backgrounds that change based on weather conditions and time of day.

Features

• 🌤️ Current Weather Display: Shows temperature, feels-like temperature, weather conditions, humidity, and wind speed
• 📅 3-Day Forecast: Displays upcoming weather with min/max temperatures
• 🎨 Dynamic Backgrounds: Background changes based on weather conditions (Clear, Rain, Snow, etc.) and time of day (day/night)
• 📍 Location Detection: Automatically detects and displays weather for your current location
• 🔍 Location Search: Search for weather in any city worldwide (format: "City, State" or "City, Country")
• 🌡️ Smart Units: Automatically uses Imperial units (°F, mph) for USA locations and Metric units (°C, km/h) for others
• ♿ Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• 🔒 No API Keys Required: Uses public APIs that don't require registration

Technologies Used

• React 18 - UI framework
• TypeScript - Type-safe development
• Open-Meteo API - Free weather data API (no registration required)
• CSS3 - Styling with gradients and animations
• Jest & React Testing Library - Comprehensive test coverage

Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd weather-app-demo

2. Install dependencies:

npm install

3. Start the development server:

npm start

The app will open in your browser at http://localhost:3000.

Available Scripts

npm start

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

The page will reload when you make changes. You may also see any lint errors in the console.

npm test

Launches the test runner in interactive watch mode. The test suite includes:

• Unit tests for all utility functions
• Component tests for UI elements
• Integration tests for the complete app workflow

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time.

Project Structure

src/
├── components/          # React components
│   ├── CurrentWeather.tsx
│   ├── Forecast.tsx
│   ├── SearchBar.tsx
│   ├── LoadingSpinner.tsx
│   └── ErrorMessage.tsx
├── hooks/              # Custom React hooks
│   └── useWeather.ts
├── services/           # API services
│   └── weatherService.ts
├── types/              # TypeScript type definitions
│   └── weather.types.ts
├── utils/              # Utility functions
│   ├── weatherUtils.ts
│   └── logger.ts
├── __tests__/          # Test files
│   ├── App.integration.test.tsx
│   ├── SearchBar.test.tsx
│   ├── CurrentWeather.test.tsx
│   ├── Forecast.test.tsx
│   ├── LoadingSpinner.test.tsx
│   ├── ErrorMessage.test.tsx
│   └── weatherUtils.test.ts
├── App.tsx             # Main application component
└── index.tsx           # Application entry point

Architecture

The application follows React best practices with a modular architecture:

• Components: Reusable UI components with single responsibilities
• Hooks: Custom hooks for state management and side effects
• Services: API integration layer with error handling
• Utils: Pure utility functions for data transformation
• Types: TypeScript interfaces for type safety

API Usage

This app uses free public APIs that require no API keys or registration:

• Open-Meteo Geocoding API: Converts location names to coordinates
• Open-Meteo Weather API: Provides current weather and forecast data
• BigDataCloud Reverse Geocoding API: Converts coordinates to location names (for current location detection)

Features in Detail

Dynamic Backgrounds

The app displays different background gradients based on:

• Weather Conditions: Clear, Clouds, Rain, Snow, Thunderstorm, Fog, etc.
• Time of Day: Daytime backgrounds (sunrise to sunset) vs nighttime backgrounds

Location Search

Enter locations in the following formats:

• New York, New York (City, State for USA)
• London, UK (City, Country)
• Tokyo, Japan

Unit System

• USA Locations: Temperature in Fahrenheit (°F), wind speed in mph
• Other Locations: Temperature in Celsius (°C), wind speed in km/h

Error Handling

The app gracefully handles:

• Geolocation permission denials
• Network failures
• Invalid location searches
• API errors

All errors are logged to the console with timestamps for debugging.

Testing

The app includes comprehensive test coverage:

npm test

Test coverage includes:

• ✅ Component rendering and interactions
• ✅ Weather utility functions
• ✅ Error handling
• ✅ Integration tests with mocked APIs
• ✅ Responsive behavior

Browser Support

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

Known Limitations

• Geolocation requires HTTPS in production (or localhost in development)
• Open-Meteo API has rate limits for free tier usage

Future Enhancements

Potential features for future versions:

• Hourly forecast
• Weather alerts and warnings
• Multiple location favorites
• Dark/light mode toggle
• Weather radar maps
• Historical weather data

License

This project is licensed under the MIT License.

Acknowledgments

• Weather data provided by Open-Meteo
• Icons and UI inspired by modern weather applications
• Built with Create React App

---

Made with ❤️ using React and TypeScript