Find the current weather and 5 day forecast with an Alert of any city with this web app
Simple React web application written with jsx that returns the current weather. The app utilizes:
- OpenWeatherMap's API.
- Webpack for bundling
- React Router
- Axios for easy http requests
- Express for a simple server to run our application
- Foundation for styling
- Sass Loader & node-sass
How to run the app locally:
- Run
npm install
to install all needed dependencies. - Navigate to OpenWeatherMap's and get a free API key. Then, create a file named
.env
in the project root and add the following line:API_KEY=yourkeyhere
. This will give you access to API_KEY as a global variable anywhere in the client. It allows you to use your API Key while keeping it secret from everyone else. - Get a key to access the Google Places API.
- Open
index.html
and replace this url on line 11:https://maps.googleapis.com/maps/api/js?key=AIzaSyBWcVjtZJPe-zwnKYHoSeyDd7XETs2qWxQ&libraries=places
with your own version of the link. Your API key should go after the=
and before the&
. See below:https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places
- If you don't have webpack installed on your machine, run
npm install webpack -g
. - Open up two command prompts. In one, run
webpack -w
. This lets webpack watch for changes to your files. After any saved changes, webpack automatically runs and updates yourbundle.js
file. - In the other command prompt run
npm start
ornode server.js
. These commands do the same thing: Starting your server to host the web app. - Navigate to
localhost:3000
to see the app in action