F1 Hero

A simple JavaScript web application used as a basis for building React apps with Redux, Sagas, React Router v4, Normalizr, Reselect, Axios and Jest/Enzyme for unit testing.

Overview

This application only serves as an example of how to construct a React.js application. Its main focus is keeping business logic out of React viewa/components entirely while maintaining a clean state tree, and optimizing networking via caching and cancellation. For example purposes, it leverages the excellent Ergast Developer API. While this app was built to respect the API's terms of use - please be respectful of this public api if you intent to play around with this example.

Setup

To run the application you will need Node.js installed. You will also need NPM to install dependencies and run the application. If you need instructions on installing NPM, check out this link.

Once you have installed Node and npm, the following steps are required to run the application:

git clone the application into a desired directory.
cd into the root of the project.
run npm install. This may take a minute or two
Once the installation is complete, run npm run dev. This will build the project and spin up a simple web server provided by webpack
Open up your favorite browser (Latest versions of Chrome, Safari, and Firefox are tested) and navigate to http://localhost:8080
You should be presented with F1 Hero landing screen.
To run application unit tests, run npm run test from the root of the project.

Implementation Notes

Cache

Out of respect of the Ergast API Terms of Use as well as to improve percieved performance, the application implements a caching layer (basically a simple browser based fork of the excellent https://github.com/AlbinoDrought/cachios project) that currently is using Session Storage as its persistence layer. If you wish to clear the cache, simply close the tab you are running the app in and restart it in a new one.

Cancellation