Find the current weather and 5 day forecast of any city on earth with this simple little web app
Live Demo on Heroku
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
This project was featured during DigitalOcean's 2016 HACKTOBERFEST! Thanks to everyone who contributed in both discussion and coding!
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=AIzaSyBvieYHDi4AvoL33XpHgCUrYr3tEfOz6kQ&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