Weather App

Description

This is a simple weather application built with React and TypeScript. It fetches weather data from the OpenWeatherMap API and displays it to the user.

Features

• Fetch Weather Data: Retrieves weather information (temperature, description, humidity, etc.) for a specified location.

• Location Input: Allows the user to enter a city name to get the weather for that city.

• Display Weather Information: Presents the fetched weather data in a user-friendly format.

• Error Handling: Handles cases where the API request fails (e.g., invalid city name).

• Loading State: Displays a loading indicator while fetching data.

• Custom Hook: Uses a custom hook (useWeatherData) to encapsulate the weather data fetching logic.

• Configuration from .env: Loads API key and URL from a .env file.

• Enhanced UI: Includes interactive elements like hover effects, transitions, and improved visual feedback.

Technologies Used

• React
• TypeScript
• Vite
• axios
• CSS Modules
• OpenWeatherMap API

Installation

1. Clone the repository:

   git clone <repository_url>
   

2. Navigate to the project directory:

   cd weather-app
   

3. Install dependencies:

   yarn
   

4. Set up the .env file:

   • Create a .env.local file in the root of the project.

   • Add your OpenWeatherMap API key and API URL to the .env.local file:

     REACT_APP_API_KEY=YOUR_API_KEY
     REACT_APP_API_URL=[https://api.openweathermap.org/data/2.5/weather](https://api.openweathermap.org/data/2.5/weather)
     

     Replace YOUR_API_KEY with your actual API key.

5. Run the application:

   yarn dev
   

   The application will be accessible at http://localhost:<port>.

File Structure

weather-app/
├── .env.local          # Environment configuration file
├── public/             # Static assets
├── src/
│   ├── App.tsx         # Main application component
│   ├── components/
│   │   ├── WeatherForm.tsx     # Form component for city input
│   │   ├── WeatherDisplay.tsx  # Component to display weather data
│   │   ├── WeatherForm.module.css # CSS Module for WeatherForm
│   │   ├── WeatherDisplay.module.css # CSS Module for WeatherDisplay
│   ├── hooks/
│   │   ├── useWeatherData.ts # Custom hook for fetching weather data
│   ├── index.css       # Global styles
│   ├── main.tsx        # Entry point of the application
│   ├── vite-env.d.ts   # TypeScript declarations for Vite environment variables
├── index.html          # HTML template
├── package.json        # Project dependencies and scripts
├── README.md           # Project documentation
├── tsconfig.json       # TypeScript configuration
└── yarn.lock           # Yarn lock file

Components

• App: The main component that manages the application state and renders the other components.

• WeatherForm: A component that contains the input field and button for users to enter a city name.

• WeatherDisplay: A component that displays the weather information.

Custom Hook

• useWeatherData: A custom hook that encapsulates the logic for fetching weather data from the OpenWeatherMap API. It manages the loading state, error handling, and weather data.

Configuration

The application uses a .env.local file to store sensitive information such as the API key. This file is not committed to the repository to protect the API key.

• REACT_APP_API_KEY: Your OpenWeatherMap API key.

• REACT_APP_API_URL: The base URL for the OpenWeatherMap API.

Styling

The application uses CSS Modules for component-specific styling and index.css for global styles.

Notes

• The application uses the OpenWeatherMap API to fetch weather data. You will need to sign up for a free API key at https://openweathermap.org/ to use the application.

• The application is built with Vite, which provides a fast development environment and optimized builds.

• The application is written in TypeScript, which provides static typing and improves code maintainability.