Weather App Project

This project displays weather information for different cities using React and styled with Tailwind CSS.

Deployment Link

• https://weather-app-ashy-pi-42.vercel.app/

Table of Contents

• Introduction
• Features
• Technologies Used
• Installation
• Usage
• Project Structure
• Contributing
• Conclusion

Introduction

This project is a React application that displays weather details for various cities using data from a weather API. The application is styled with Tailwind CSS to ensure a responsive and modern design.

Features

• Display current weather information for selected cities
• Responsive design using Tailwind CSS
• Search functionality to find weather details for specific cities
• Display temperature, humidity, wind speed, and weather conditions

Technologies Used

• Frontend: React
• Styling: Tailwind CSS
• Data Fetching: Axios
• API: OpenWeatherMap API (or any other weather API)

Installation

Follow these steps to set up the project locally.

Prerequisites

• Node.js and npm installed on your machine
• Git installed on your machine

Steps

1. Clone the repository

   git clone https://github.com/malthaf9/Weather-App-React
   cd weather-app-project

2. Install dependencies

   npm install

3. Start the development server

   npm start

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

Usage

How to use the application

1. Search for a city

   • Use the search bar to find weather information for specific cities.

2. View weather details

   • The app displays current weather details including temperature, humidity, wind speed, and general weather conditions for the searched city.

Project Structure

Here's an overview of the project structure:

weather-app-project/ ├── public/ │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src/ │ ├── components/ │ │ ├── Forecast.js │ │ ├── Inputs.js │ │ ├── TemperatureAndDetails.js │ │ ├── TimeAndLocation.js │ │ └── TopButtons.js │ ├── services/ │ │ └── weatherService.js │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── .gitignore ├── README.md ├── package-lock.json ├── package.json └── tailwind.config.js

Contributing

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

Steps to Create a Pull Request

1. Fork the repository

   • Navigate to the repository you want to contribute to.
   • Click the "Fork" button in the top right corner of the repository page. This will create a copy of the repository in your GitHub account.

2. Clone your forked repository

   git clone https://github.com/malthaf9/Weather-App-React
   cd weather-app-project

3. Create a new branch

   • It is important to create a new branch for your changes to keep your main branch clean and to make it easier to manage multiple pull requests.

   git checkout -b feature-name

4. Make your changes

   • Make the necessary changes in your local repository.

5. Commit your changes

   • Commit your changes with a descriptive commit message.

   git commit -m "Add some feature"

6. Push your changes to your forked repository

   • Push your changes to the branch you created on your forked repository.

   git push origin feature-name

7. Create a Pull Request

   • Navigate to the original repository on GitHub.
   • Click on the "Pull requests" tab.
   • Click the "New pull request" button.
   • Select the branch you created in your forked repository and compare it with the original repository's main branch.
   • Add a title and description to your pull request explaining what changes you have made.
   • Click the "Create pull request" button.

Conclusion

• This project showcases how to use React and Tailwind CSS to create a dynamic, responsive weather application. Contributions are welcome to improve and expand the project. Thank you for your interest and happy coding!