React Weather App 🌤️

A simple and responsive weather app built with React and OpenWeatherMap API. Users can enter a city name to fetch and display real-time weather information, including temperature and weather conditions. Perfect for learning React basics, API integration, and error handling.

Features ✨

• City Search: Enter a city name to fetch weather data.

• Real-Time Weather Data: Displays temperature and weather conditions.

• Error Handling: Shows error messages for invalid city names or API issues.

• Responsive Design: Clean and user-friendly interface.

Technologies Used 🛠️

• React: For building the user interface and managing state.

• Axios: For making API requests to OpenWeatherMap.

• CSS: For styling the app.

• OpenWeatherMap API: For fetching weather data.

How to Use 🚀

Prerequisites

• Node.js and npm installed on your machine.

Steps

1. Clone the repository:

git clone https://github.com/abdulrahmans0414/react-weather-app.git

2. Navigate to the project directory:

cd react-weather-app

3. Install dependencies:

npm install

4. Create a .env file in the root directory and add your OpenWeatherMap API key:

VITE_API_KEY=your_api_key_here

5. Start the development server:

npm run dev

6. Open your browser and navigate to http://localhost:5173 (or the port specified in the terminal).

Code Overview 📂

File Structure

react-weather-app/
├── public/
├── src/
│   ├── App.jsx
│   ├── styles.css
│   └── main.jsx
├── .env
├── .gitignore
├── README.md
├── package.json
└── vite.config.js

Key Files

App.jsx: Main component for the weather app.

styles.css: Styles for the app.

.env: Stores the OpenWeatherMap API key.

How It Works 🧠

1. The user enters a city name in the input field.

2. When the "Get Weather" button is clicked, the app makes an API request to OpenWeatherMap using Axios.

3. The weather data (temperature, condition, etc.) is displayed on the screen.

4. If the city is not found or there's an API error, an error message is shown.

Hiding the API Key 🔒

To hide your OpenWeatherMap API key, follow these steps:

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

VITE_API_KEY=your_api_key_here
Access the API key in your code using import.meta.env.VITE_API_KEY:

const apiKey = import.meta.env.VITE_API_KEY;

3. Add .env to your .gitignore file to prevent it from being pushed to GitHub:

.env

Future Enhancements 💡

• Add a 5-day weather forecast.

• Display weather icons for better visualization.

• Use geolocation to fetch weather for the user's current location.

• Add unit conversion (e.g., Celsius to Fahrenheit).

License 📄

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

Contributing 🤝

Contributions are welcome! If you'd like to contribute, please follow these steps:

1. Fork the repository.

2. Create a new branch for your feature or bugfix.

3. Commit your changes.

4. Submit a pull request.