Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ahmednassar7/weather-application

A weather application utilizing React and Material-UI, with open API for current weather
https://github.com/ahmednassar7/weather-application

api css html javascript json material-ui openapi react reactjs weather-app

Last synced: 1 day ago
JSON representation

A weather application utilizing React and Material-UI, with open API for current weather

Awesome Lists containing this project

README 

        
# Weather App

![Haze](https://github.com/nadaaosman/Weather-application/assets/84284180/a11d4baa-d805-4585-a807-50dbb2008c87)



![ThunderStorm](https://github.com/nadaaosman/Weather-application/assets/84284180/459f0730-bb08-4104-81c9-570dba4716bb)



![Mist](https://github.com/nadaaosman/Weather-application/assets/84284180/92af3a80-1873-47a1-8bac-177d4d86f798)



![Rain](https://github.com/nadaaosman/Weather-application/assets/84284180/3a23bd99-a21a-4d76-a4d1-9546158c73cf)



![Clear](https://github.com/nadaaosman/Weather-application/assets/84284180/a44185d2-1e70-4aff-808b-efe94acf82d3)



![Clouds](https://github.com/nadaaosman/Weather-application/assets/84284180/8b0ae833-8729-4766-848e-713fd3630410)



## 📙 About 



This is a simple weather application built using React and Material-UI. 

It fetches current weather data from an open API and displays it to the user.



## 💻 Technology 

## Technologies Used



- ![React](https://img.shields.io/badge/React-%2300599C.svg?style=for-the-badge&logo=react&logoColor=white) - A JavaScript library for building user interfaces. [Learn more](https://reactjs.org/)



- ![Material-UI](https://img.shields.io/badge/Material--UI-%230081CB.svg?style=for-the-badge&logo=material-ui&logoColor=white) - A popular React UI framework for designing modern and responsive user interfaces. [Learn more](https://material-ui.com/)



- ![Axios](https://img.shields.io/badge/Axios-%233A99D8.svg?style=for-the-badge) - A promise-based HTTP client for making API requests. Used for fetching data from external APIs. [Learn more](https://axios-http.com/)



- ![OpenWeatherMap API](https://img.shields.io/badge/OpenWeatherMap%20API-%23FDB813.svg?style=for-the-badge) - An open API used to fetch current weather data. [Learn more](https://openweathermap.org/api)



## 👌 Features 

- Display the current weather conditions for a given location.

- Use Material-UI for a modern and responsive user interface.

- Fetch weather data from an open API.

- Easily customizable for further development.



## 🚀 Getting Started 



Clone this repository to your local machine:

```

git clone https://github.com/AhmedNassar7/Weather-Application.git

```

Install the project dependencies:

```

npm install

```

Create a .env file in the project root and add your API key. You can obtain an API key from the OpenWeatherMap API:

```

REACT_APP_API_KEY=your_api_key_here

```

Start the development server:

```

npm start

```

## 🖥️ App Demo  



https://github.com/nadaaosman/Weather-application/assets/84284180/0fc3e861-225b-46c6-9c58-de2edffcde18



https://github.com/nadaaosman/Weather-application/assets/84284180/3880642c-378c-484c-a5b3-f960b3edeca0



## ❄️ Usage 



- Select a country then the city.



- The app will display the current temperature, weather conditions, and other relevant information.



## Dependencies 

- React: https://reactjs.org/

- Material-UI: https://material-ui.com/

- Axios: https://axios-http.com/



## API Used 

This application uses the OpenWeatherMap API to fetch weather data. You can find more information about the API here: https://openweathermap.org/api



## License



> This software is licensed under MIT License, See [License](https://github.com/Waer1/Crazy-Delivery/blob/master/LICENSE.txt) for more information.