https://github.com/subramanyaks/weather-app
⛈A simple and responsive Weather Application using openweathermap API build with react js which gives current weather details of the cities across the world.
https://github.com/subramanyaks/weather-app
node nodejs openweathermap-api react react-hooks react-weather-app react-weather-application reactjs weather weather-api weather-app
Last synced: about 1 year ago
JSON representation
⛈A simple and responsive Weather Application using openweathermap API build with react js which gives current weather details of the cities across the world.
- Host: GitHub
- URL: https://github.com/subramanyaks/weather-app
- Owner: SubramanyaKS
- License: mit
- Created: 2022-09-29T14:16:51.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-02-09T05:54:17.000Z (over 1 year ago)
- Last Synced: 2025-04-02T17:52:53.911Z (about 1 year ago)
- Topics: node, nodejs, openweathermap-api, react, react-hooks, react-weather-app, react-weather-application, reactjs, weather, weather-api, weather-app
- Language: JavaScript
- Homepage: https://subramanyaks.github.io/Weather-app/
- Size: 2.86 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# ⛈ Weather App
A simple weather app built with React.js and utilizes the OpenWeatherMap API to fetch and display weather information for a given location.
#### API
The Application Programming Interface is a set of rules and regulations and standards that allows software programs to interact with each other. It acts as a middleman between two applications, allowing them to exchange data and information
## Features
- The application features a robust search functionality for user-friendly access.
- Ensuring a seamless experience, the UI is responsive and adapts to various devices and screen sizes.
- Users can expect precise and reliable results when utilizing the search feature.
- Current weather conditions, encompassing temperature, humidity, wind speed, and a detailed weather description, are prominently displayed.
- The application efficiently retrieves weather data by either detecting the user's location or accepting a manually entered city name.
- In beta stage, the voice search option provides an innovative and hands-free alternative for user interaction.
## Technology Used
* 
* 
* OpenWeathermap API
* 
## API Details
the details used from the `openweathermap API` is follows:
1. `id` City ID.
2. `name` City name.
3. `sys.country` Country code (GB, JP etc.)
4. `main.temp` Temperature. Unit Default: Kelvin, Metric: Celsius, Imperial: Fahrenheit.
5. `main.feels_like` Temperature. This temperature parameter accounts for the human perception of weather. Unit Default: Kelvin, Metric: Celsius, Imperial: Fahrenheit.
6. `main.pressure` Atmospheric pressure (on the sea level, if there is no sea_level or grnd_level data), hPa
7. `main.humidity` Humidity, %
8. `main.temp_min` Minimum temperature at the moment. This is minimal currently observed temperature (within large megalopolises and urban areas). Unit Default: Kelvin, Metric: Celsius, Imperial: Fahrenheit.
9. `main.temp_max` Maximum temperature at the moment. This is maximal currently observed temperature (within large megalopolises and urban areas). Unit Default: Kelvin, Metric: Celsius, Imperial: Fahrenheit.
10. `coord.lon` City geo location, longitude.
11. `coord.lat` City geo location, latitude.
12. `weather.description` Weather condition within the group. You can get the output in your language.
13. `weather.icon` Weather icon id
## Pre Requisite
* Install 
* Installation of [](https://nodejs.org/en/) is mandatory with 
* Login in to [Openweathermap](https://openweathermap.org/api) api website to get your `API key`
## Run and Setup
1. Fork the Project and clone Repository using git clone
```
git clone https://github.com/SubramanyaKS/Weather-app.git
```
2. Navigate to the project directory:
```
cd Weather-app
```
3. Install all dependency in package.json
```
npm install
```
4. Obtain an API key from OpenWeatherMap:
Visit the OpenWeatherMap website and sign up for an account.After signing in, go to your account dashboard and generate an API key.
5. Create a .env file in the root directory of the project and add your API key:
```
REACT_APP_API_KEY=
```
6. Start the development server using command:
```
npm start
```
7. Open your browser and navigate to `http://localhost:3000` to see the app running.
## Contribution
We welcome contributions! If you'd like to contribute to Weather-app, please follow our [Contribution Guidelines](https://github.com/SubramanyaKS/Weather-app/blob/main/CONTRIBUTING.md).
## Deploy
Weather App is live and ready for you to explore! Visit [WeatherApp](https://subramanyaks.github.io/Weather-app/)
## Author
[Subramanya K S](https://subramanyaks.github.io/)
## LICENSE
This project is distributed under MIT License read `LICENSE` file for more details .
## Credits
[Openweathermap API](https://openweathermap.org/api)
[Fontawesome Icons](https://fontawesome.com/v6/icons)
If you like the project 🌟 the repository.
Thank you with ❤ Subramanya KS