React Weather

A weather application that displays the current weather based on the entered geolocation data.

Go here for live demo.

The weather application is composed of the following components:

• Search-box - Gets City and country input from the user

• CurrentWeatherDisplay - Displays weather information for the entered locatio data in time.

• Min&Max - Displays minimum expected temperature and maximum expected temperature

The following services are used to obtain weather data:

• WeatherService - A wrapper that is responsible for integrating with the [OpenWeather Api]. It provides an interface that allows one to obtain current weather information.

Features:

• Display current weather
• Display minimum expected temperature
• Displays maximum expected temperature
• Displays an Image showcasing the weather condition

This project also demonstrates:

• a typcial React project layout structure
• [OpenWeather API] integration

Screenshots:

---

Developed With

• Visual Studio Code - A source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring
• Node.js - Javascript runtime
• React - A javascript library for building user interfaces
• Babel - A transpiler for javascript
• Webpack - A module bundler
• SCSS - A css metalanguage
• Bootstrap 4 - Bootstrap is an open source toolkit for developing with HTML, CSS, and JS
• Axios - Promise based HTTP client for the browser and node.js
• [OpenWeather API] - Provides weather information

---

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

The following software is required to be installed on your system:

• Node 8.x
• Npm 3.x

Type the following commands in the terminal to verify your node and npm versions

node -v
npm -v

Install

Follow the following steps to get development environment running.

• Clone 'weather-App' repository from GitHub

  git clone https://github.com/AdityaKumawat97/weather-App

  OR USING SSH

  git clone [email protected]:AdityaKumawat97/weather-App.git

• Install node modules

  cd weather-App
  npm install

Before continuing, the following steps are required:

1. Get API keys

   • OpenWeather API

     Have a look at OpenWeather API

     Get an API key here

Build

• Build application

  This command will also run ESLint as part of build process.

  npm run build

• Build application and start watching for changes

  This command will also run ESLint as part of build process.

  npm run build:watch

Run ESlint

• Lint project using ESLint

  npm run lint

• Lint project using ESLint, and autofix

  npm run lint:fix

Run

• Run start

  This will run the 'serve' npm task

  npm start

• Run webpack dev server

  npm run serve:dev

• Alternatively run live-server (simple development http server with live reload capability)

  npm run serve

---

References

https://github.com/akashyap2013/Weather_App