WeatherFinder

A React web-app that display weather based on the city entered by the user.

Features

Start typing a city name and autosuggestions will appear

Autosuggestions in Desktop

Weather information

Respoonsive React App - works well in tablet and mobile views

Installation Instructions

• After cloning the repo, go to the directory and run npm install to install the node_modules.
• Inside the APIKeys folder, specity your GooglePlaces API key and OpenWeatherMap API key in the respective files.
  • Instructions to generate API keys:
    • To setup API key for Google Places API
    • Generate OpenWeatherMap API key after signing up
• Run npm start to run the app!

Technical Details

APIs Used:

Google Places Autocomplete API

• To show suggestions based on the city typed in input box

• Endpoint to Display list of cities based on initials of input

  • Will return JSON object of list of cities that start with "Ahme"

• React component to use Google places Autocomplete API

• Instruction to setup API keys for Google Places API

  • Checkout what restrictions you need to add

OpenWeatherMap API

• To display weather based on city, country, latitude, longitude, etc.

OpenWeatherMap API Endpoints

• Display weather based on City and Country name

• Display weather based on City

• Display weather based on Latitude longitude

Weather display data JSON details

• Type of weather
  • weather[0].description
• Weather type icon
  • weather[0].icon
• latitude, longitude
  • coord.lon, coord.lat
• temperature (given in K) = (K-273) celcius
  • main.temp
• Humidity in %
  • main.humidity
• Wind speed (given in m/s) = ms*3.6 kmph
  • wind.speed