Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rkbeatss/weather-app
https://github.com/rkbeatss/weather-app
geocoding-api nasa-apod openweathermap-api react-components reactjs
Last synced: 1 day ago
JSON representation
- Host: GitHub
- URL: https://github.com/rkbeatss/weather-app
- Owner: rkbeatss
- Created: 2020-05-19T19:49:30.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-05-29T16:34:17.000Z (over 4 years ago)
- Last Synced: 2025-02-07T17:33:53.442Z (3 days ago)
- Topics: geocoding-api, nasa-apod, openweathermap-api, react-components, reactjs
- Language: JavaScript
- Size: 1.39 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReactJS Weather App
## Description
This is a simple ReactJS project that invokes the OpenWeatherMap API in order to get a 7-day forecast. It also leverages Google's Geocode module to transform a location into coordinates. The background image is set through the Nasa Photo of the Day API.
## The main goals of this project are:
1. Understand and create React Components
2. Understand the communication between parent and child components through props
3. Make use of HTTP calls and implement an API service
4. Understand and use state object## OpenWeatherMap API
In order to use this service, you must obtain an API key from [their website](https://openweathermap.org/price) and include it in a config file.
## Geocoding API
In order to use this service, you must obtain an API key from [their website](https://developers.google.com/maps/documentation/geocoding/start) and include it in a config file.
## Nasa Photo of the day API
In order to use this service, you must obtain an API key from [their website](https://api.nasa.gov/index.html#apply-for-an-api-key) and include it in a config file.
## Run project
Make sure to clone the project and install all npm packages
```
npm install
```To start the app:
```
npm start
```![A screenshot of the app UI](public/app-UI.png)