React Progress Bar

Written by Philip A Senger

philip.a.senger@cngrgroup.com | mobile: 0404466846 | CV/Resume | blog | LinkedIn | twitter | keybase

TOC

• Active Websites
• Environment Variables
• Available Scripts for Command Line
• Technologies used
• Requirements
• Developer Notes
• Known Issues

Active Websites

• Click here to see a live website in action
• Click here to see the JavaScript Documentation
• Evidence of testing with BrowserStack

Environment Variables

Mandate	Name	Purpose	ex
required	API_URL	The base Url to the hosted api server. If not set, it assumes localhost	prod
required	PUBLIC_URL	The Url to the public html server. Values will be embedded into the processed HTML.	prod
required	NODE_ENV	When you deploy, you should set this to 'production'. This will turn off the Redux Logger.	export NODE_ENV=production

NOTE:

A local server ( for development and testing ) is used if none of these values are set. The server configuration is configured in the file config/webpackDevServer.config.js

Available Scripts for Command Line

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Technologies used

This project was bootstrapped with Create React App and uses the following technologies

• ReactJS
• Redux
• Redux-Saga
• Immutable
• WebPack
• esdoc
• eslint
• babel
• Jest
• enzyme
• Fetch ( polyfilled )
• WCAG 2.0 AA
• Version controlled / tagged with Github
• Issues tracked with Github
• automated Travis CI
• automated code coverage report

Requirements

• Must read data from the endpoint.
• Multiple bars.
• One set of controls that can control each bar on the fly.
• Can't go under 0.
• Can go over 100%, but limit the bar itself and change its colour.
• Display usage amount as a percentage, centered on each bar.
• Write tests for your code (hint: TDD strongly preferred).
• Implement a responsive solution: testing it on mobile, tablet, etc. Getting it working nicely.
• Animate the bar change, make sure it works well when you tap buttons quickly.
• Version control.
• Setting it up as a project.
• Setting up some automated tools.
• Linting, code quality, etc.
• Comment code.

Developer Notes

Im pretty happy with these results. If I could get time to do a few more things:

• spend more time on the tests, they are not up to my standards.
• we need a loading mask. when the api server is coming up or slow to respond the screen looks bad.
• I would use a third party for the widgets or create my own component library to reuse these.
• I dont like how slow the app is in IE, I would maybe look into SSR.
• I would get the App.js spec test running, its just to hard to figure out how to wire the whole thing together.
• I would add night watch to dial up Browser Stack to run end to end tests on all the browsers.
• spend more time on the docs.

Known Issues

1. When the API comes up or is in the middle of sending data, the page looks odd. Parts of it are missing. Issue #1