Five Day Weather

This project was bootstrapped with Create React App.

Demo.

Description

A single page HTML app displaying the last five days of data provided by the OpenWeatherMap API.

Frontend

• React: a facebook library to build user interfaces.
• Redux: predictable state container for JavaScript apps.
• React Bootstrap: React library for the Bootstrap framework.

Dev Stack

• Babel: An es6/es7 compiler.
• Eslint: The pluggable linting utility for JavaScript and JSX.
• Flow: A Static Type Checker for JavaScript.
• Jest: JavaScript testing framework.
• Webpack: module bundler for the browser.

Setup

Assuming node and yarn (or npm) is already installed.

https://github.com/RichardWithnell/five-day-weather.git
cd five-day-weather
npm install # npm
yarn # Yarn

Dev Server

Either add your API key for OpenWeatherMap to the .env file.

.env file

REACT_APP_OPEN_WEATHER_API_KEY='Insert your API key here'

Or set your key in the current shell when starting the app:

Windows

set REACT_APP_OPEN_WEATHER_API_KEY='Insert your API key here' && npm start

Linux

REACT_APP_OPEN_WEATHER_API_KEY='Insert your API key here' && npm start

Startup the development server, the app will automatically open at http://localhost:3000.

yarn start

Test

Run automated tests using Jest and Enzyme.

yarn test

Build

Create the production ready build.

yarn build

Deploy

Deploy the latest build to gh-pages.

yarn deploy

Additional Work

Given more time there are a number of additional features that could be added to improve the user experience, development process, and deployment.

Features

• Allow a user to select the city/country, using a typeahead and a location API.

• Add a refresh button to reload the data, without refreshing the page.

• Show an overview of weather data for each day.

• Use Geolocation.getCurrentPosition() to show the weather for the users current location by default.

Testing

• Increase test coverage (especially for redux: containers, reducers, and actions).

• Add cross browser testing using Selenium.

• Utilise BDD tools (e.g. cucumber) to take each user story and ensure the associated tests pass.

Refactoring

• Improve the redux store structure, create separate objects for metadata associated with each day and the list of data, both referenced by allIds.
• Refactor component/container folder structure as repository grows, the flat directory structure doesn't scale well.
• Increase flow coverage and usage of types to improve static type checking when building.

CI/CD

• Currently just using travis to run tests on push, should report coverage to the repository as well.
• Automate deployment of the master branch when the CI stage passes.