Skip to content

ArunasNorvaisa/react-weather-app

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 

Weather application

React weather app

Weather app made with ReactJS. Automatically recognizes user's location, based on browser's settings or IP. Weather can be searched both by location on the map or entering city in the search bar.

Made using React hooks (useState, useEffect, useContext) and React context (absolutely unnecessary for a small application like this, but it was fun to learn).

Version

  • 3.1.0

Demo

Usage:

$ git clone git@github.com:ArunasNorvaisa/react-weather-app.git
$ cd react-weather-app
$ npm i -d (OR $ yarn)
$ touch .env
$ touch ./proxy/env.json
  • Get 2 (two) API keys from Google and 1 (one) from Open Weather Map.
  • Update .env file in the project root (that was created at the previous step) directory with the following content:

API_KEY_GOOGLE_GEOCODING = YOUR_GOOGLE_GEOCODING_API_KEY
API_KEY_GOOGLE_MAPS = YOUR_GOOGLE_MAPS_API_KEY
API_KEY_OW = YOUR_OPENWEATHERMAP_API_KEY

This will prevent keys to be uploaded to the git repository, however anyone with at least half of the brain still be able to see them in plain text.

If (and ONLY if) you care about security of your API keys:

We'll be using 2 PHP proxies to access the Openweathermap and Google geocoding services from the backend, so the keys wouldn't be exposed to anyone who knows how to use browser's dev tools.

  • Update ./proxy/env.json file with the following content (please note the quotes - they are required here, unlike in .env):
{
  "API_KEY_GOOGLE_GEOCODING" = "YOUR_GOOGLE_GEOCODING_API_KEY"
  "API_KEY_OW": "YOUR_OPENWEATHERMAP_API_KEY"
}
  • Update ./proxy/.htaccess file to reflect your referring domain.
  • Read comments in /components/Weather.jsx and /components/App.jsx to either enable or disable proxy.

Run your App:

$ npm run start (OR $yarn run start)

App will be accessible at http://localhost:8080

Build your App:

$ npm run build:prod (OR $yarn run build:prod)
  • Open /build/index.html in your browser and, if everything works as intended,
  • Upload contents of BUILD folder to your hosting provider.

Support: