React Weather

A weather application that displays the current weather, daily forecasts, and hourly forecasts based on your current geolocation.

Go here for live demo.

The weather application is composed of the following components:

• Header - A heading that displays application title

• WeatherDashboard - The primary (root) component that manages state for all underlying components. It is also responsibly for connecting to and retrieving data from a weather and geolocation service.

• CurrentWeatherDisplay - Displays weather information for the current point in time based on current location.

• DailyWeatherDisplay - Displays a 7 day weather forecast in the form of a scrollable carousel.

• DailyWeatherForecastCard - Displays weather summary for a given day

• HourlyWeatherDisplay - Displays a 24 hour weather forecast in the form of a scrollable carousel.

• HourlyWeatherForecastCard - Displays weather summary for a given hour

Component Diagram

The following services are used to obtain weather and location data:

• WeatherService - A wrapper that is responsible for integrating with the OpenWeather Api. It provides an interface that allows one to obtain current weather, daily forecast, and hourly forecast information.

• GeolocationService - A wrapper that is responsible for integrating with the Google Geolocation API. It provide an interface that allows one to obtain the current GPS coordinates. These coordinates are used by the WeatherService to obtain weather information.

Service Diagram

Features:

• Display current weather
• Display 7 day weather forecast
• Display 24 hour weather forecast

This project also demonstrates:

• a typcial React project layout structure
• babel setup and configuration
• webpack setup and configuration
  • dotenv setup included
• Third party React component integration using 'React Owl Carousel 2'
• eslint setup and configuration
• SCSS setup and configuration
• OpenWeather API integration
• Google Geolocation 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
• Google Geolocation API - Provides geolocation information
• React Owl Carousel 2 - A third party react carousel component
• Surge - Static web publishing for Front-End Developers

---

Related Projects

• react-starter

  A basic template that consists of the essential elements that are required to start building a React application

• react-clicker

  A basic React app that allows one to increase, decrease, or reset a counter

• react-clock-basic

  A basic clock that displays the current date and time

• react-timer-basic

  A basic timer that will start a countdown based on an input of time in seconds

• react-timer-advanced

  A countdown timer that offers an advanced UI experience

• react-masterminds

  A basic game of guessing a number with varying degrees of difficulty

• react-movie-cards

  A basic application that displays a list of movies as a list of cards

• react-calculator-standard

  A calculator that provides the essential arithmetic operations, an expression builder, and a complete history of all expressions

• react-bitcoin-monitor

  An app that monitors changes in the Bitcoin Price Index (BPI)

---

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 'react-weather-standard' repository from GitHub

  git clone https://github.com/drminnaar/react-weather-standard.git

  OR USING SSH

  git clone git@github.com:drminnaar/react-weather-standard.git

• Install node modules

  cd react-weather-standard
  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

   • Google Geolocation API

     Have a look at Google Geolocation API

     Get an API key here

2. Setup envrionment variables

   One is required to setup a few envrionment variables that are used by the WeatherService and GeolocationService to authenticate against external API's.

   Please follow the following steps:

   • Add '.env' file

     Create a file called '.env' at the root of the application

   • Add environment variables to '.env' file

     GOOGLE_GEOLOCATION_API_KEY=YOUR_API_KEY_GOES_HERE OPEN_WEATHER_API_KEY=YOUR_API_KEY_GOES_HERE

   For more information about '.env', please visit dotenv-webpack

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

---

Versioning

I use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Douglas Minnaar - Initial work - drminnaar