lunaceee/wishyouwerehere

Wish You Were Here Weather App

Wish You Were Here

A simple app for finding out the weather by clicking on a map!

The purpose of this example is to show how to keep api keys secret. (Hint: use a lambda!)

If your browser allows it, the app will find your location when you load the page.

Demo: www.wishyouwerehere.online.

Dependencies

This project was bootstrapped with Create React App.

You'll need an api key from OpenWeatherMap API to retrieve weather data.

You'll also need a Google Maps api key.

Installation

  printf 'WEATHERAPI=<your-api-key>\nREACT_APP_WEATHER_ENDPOINT=/weatherHandler\nREACT_APP_GOOGLE_MAPS_API=<your-api-key>' > .env
  npm install

Running the application

Open a terminal window and run the netlify server:

npm run start:lambda

In another terminal run the app:

npm start

Running the tests

npm test

Deploy to Netlify

npm install netlify-cli -g
netlify deploy

You will need to add two Build Environment Variables to Netlify:

• REACT_APP_WEATHER_ENDPOINT=your-domain/.netlify/functions/weatherHandler
• REACT_APP_GOOGLE_MAPS_API=your-api-key
• WEATHER_API=your-api-key