Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dyslex7c/react-weather-app
A weather app made using react.js which shows real-time weather forecast for user's current location as well as any location looked up by the user.
https://github.com/dyslex7c/react-weather-app
frontend reactjs real-time weather-api weather-forecast
Last synced: about 1 month ago
JSON representation
A weather app made using react.js which shows real-time weather forecast for user's current location as well as any location looked up by the user.
- Host: GitHub
- URL: https://github.com/dyslex7c/react-weather-app
- Owner: Dyslex7c
- License: mit
- Created: 2024-06-17T16:23:31.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-07-12T12:37:34.000Z (7 months ago)
- Last Synced: 2024-11-08T21:47:54.633Z (3 months ago)
- Topics: frontend, reactjs, real-time, weather-api, weather-forecast
- Language: JavaScript
- Homepage: https://react-weather-app-dauphine.vercel.app/
- Size: 11.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-Weather-App
A weather app made using React JS which shows real-time weather forecast for user's current location as well as any worldwide location looked up by the user. It uses Rapid API and OpenWeatherMap API. It also consists of a toggle button to enable the user to switch between light and dark mode.
Upon viewing this react-app, the app prompts the user requesting for their general location. If access is granted, the app shows weather forecast based on the user's current location. If, however, access is denied, the app sits idle until the user starts interacting.
The present-day weather is displayed in a box which shows temperature, description of the weather along with other components of weather like humidity, wind speed, pressure, etc. The weather forecast of the preceding 7 days is also displayed in rectangular divs, containing the minimum and maximum temperature of that day along with description (such as broken clouds, overcast clouds). Relevant weather icons has also been displayed wherever applicable.
Apart from the user's current location, the app can also display weather forecast of a city the user has searched for. A component called `AsyncPaginate` imported from `react-select-async-paginate` library has been used for creating this search bar. The user can search for cities all around the globe having a minimum population of 1000 and infer its climate.
## Credits
Slobodan Gajic - Weather App