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: 3 months ago
JSON representation
A weather application utilizing React and Material-UI, with open API for current weather
- Host: GitHub
- URL: https://github.com/ahmednassar7/weather-application
- Owner: AhmedNassar7
- Created: 2024-01-12T18:11:38.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-31T22:26:04.000Z (almost 2 years ago)
- Last Synced: 2025-04-13T09:18:38.971Z (about 1 year ago)
- Topics: api, css, html, javascript, json, material-ui, openapi, react, reactjs, weather-app
- Language: JavaScript
- Homepage:
- Size: 7.81 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Weather App
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
-  - A JavaScript library for building user interfaces. [Learn more](https://reactjs.org/)
-  - A popular React UI framework for designing modern and responsive user interfaces. [Learn more](https://material-ui.com/)
-  - A promise-based HTTP client for making API requests. Used for fetching data from external APIs. [Learn more](https://axios-http.com/)
-  - 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.
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
- 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.