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 installto install all needed dependencies. - Navigate to OpenWeatherMap's and get a free API key. Then, create a file named
.envin 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.htmland replace this url on line 11:https://maps.googleapis.com/maps/api/js?key=AIzaSyBWcVjtZJPe-zwnKYHoSeyDd7XETs2qWxQ&libraries=placeswith 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.jsfile. - In the other command prompt run
npm startornode server.js. These commands do the same thing: Starting your server to host the web app. - Navigate to
localhost:3000to see the app in action
