Weather App

A React-based weather application that integrates with the OpenWeatherMap API to display current weather conditions for any city.

Features

• Search weather by city name
• Display current temperature, conditions, humidity, and wind speed
• Google Material Design 3 theme with modern UI/UX
• Responsive design for mobile, tablet, and desktop
• Real-time weather data from OpenWeatherMap API
• Comprehensive error handling
• Loading states and user feedback
• Smooth animations and transitions
• Accessible design with ARIA labels

Tech Stack

• React 18 with TypeScript
• Vite for fast development and building
• Tailwind CSS with Material Design 3 color system
• Material Icons for consistent iconography
• Jest and React Testing Library for unit testing
• fast-check for property-based testing

Project Structure

weather-app/
├── src/
│   ├── components/     # React components
│   ├── services/       # API client services
│   ├── types/          # TypeScript type definitions
│   ├── utils/          # Utility functions
│   ├── App.tsx         # Root component
│   ├── main.tsx        # Application entry point
│   └── index.css       # Global styles with Tailwind
├── .env                # Environment variables (not committed)
├── .env.example        # Environment variables template
└── package.json        # Project dependencies

Getting Started

Prerequisites

• Node.js 18+ and npm

Installation

1. Clone the repository

2. Install dependencies:

   npm install

3. Set up your OpenWeatherMap API key:

   • Copy .env.example to .env
   • Get a free API key from OpenWeatherMap
   • Add your API key to .env:

     VITE_OPENWEATHER_API_KEY=your_api_key_here
     

Development

Run the development server:

npm run dev

Testing

Run all tests:

npm test

Run tests in watch mode:

npm run test:watch

Building

Build for production:

npm run build

Preview production build:

npm run preview

API Configuration

This application uses the OpenWeatherMap API to fetch real-time weather data. Follow these steps to configure your API key:

Obtaining an OpenWeatherMap API Key

1. Visit OpenWeatherMap and click "Sign In" or "Sign Up"
2. Create a free account (no credit card required)
3. After logging in, navigate to your API keys page
4. You'll see a default API key already generated, or you can create a new one by:
   • Entering a name for your API key
   • Clicking "Generate"
5. Copy your API key (it looks like: 4b2b5c4542ee7064gg87fc4g8733c083)

Note: New API keys may take a few minutes to activate. If you get a 401 error initially, wait 10-15 minutes and try again.

Setting Up Your .env File

1. In the project root directory, copy the .env.example file to create a new .env file:

   cp .env.example .env

2. Open the .env file in your text editor

3. Replace the placeholder API key with your actual OpenWeatherMap API key:

   VITE_OPENWEATHER_API_KEY=your_actual_api_key_here
   

4. Save the file

Important Security Notes:

• Never commit your .env file to version control (it's already in .gitignore)
• Never share your API key publicly
• If you accidentally expose your API key, regenerate a new one immediately from the OpenWeatherMap dashboard

Verifying Your Configuration

After setting up your API key:

1. Start the development server: npm run dev
2. Open the app in your browser
3. Search for any city (e.g., "London")
4. If configured correctly, you should see weather data
5. If you see an "Invalid API key" error, double-check that:
   • Your API key is correctly copied to the .env file
   • There are no extra spaces or quotes around the API key
   • Your API key has been activated (wait 10-15 minutes after generation)

Design System

This application follows Google Material Design 3 (Material You) principles:

Color Palette

• Primary: Purple/Blue tones for main actions and key UI elements
• Secondary: Teal/Cyan for accents and supporting elements
• Error: Red tones for error states and warnings
• Surface: Light backgrounds with subtle variations
• Background: Soft gradients for visual depth

Typography

Material Design typography scale is used throughout:

• Display: Large headings (display-large, display-medium, display-small)
• Headline: Section headings (headline-large, headline-medium, headline-small)
• Title: Subsection titles (title-large, title-medium, title-small)
• Body: Regular text (body-large, body-medium, body-small)
• Label: UI labels and buttons (label-large, label-medium, label-small)

Elevation & Shadows

Material Design elevation system (shadow-md-1 through shadow-md-5) provides depth and hierarchy.

Motion & Animation

• Duration: Short (75-150ms), Medium (200-300ms), Long (400-500ms)
• Easing: Material motion curves for natural feel
• Transitions: Smooth state changes and hover effects

Icons

Material Icons are used consistently throughout the application for a cohesive visual language.

Testing Strategy

The application uses a dual testing approach:

• Unit Tests: Test specific examples, edge cases, and component behavior
• Property-Based Tests: Verify universal properties hold across all inputs using fast-check

All tests are located alongside their source files with .test.ts or .test.tsx extensions.

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

License

MIT