John Hancock MAM Project Intake and Status - React prototype conversion

In this challenge, competitors will work to create a responsive UI prototype using React JS.

We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development. 

There are two sets of storyboards, one for desktop and one for mobile. Both are in scope.

React JS:

For this application, we are going to target:

* React JS
* Desktop and mobile layouts

Please ensure that you use React best practices and properly encapsulate and "component-ize" the design so that it's lean and reusable.

Layout:
This challenge will focus on the phone and desktop layouts provided.  Only portrait orientation for the mobile layout is required.
 
Code encapsulation and quality:

All created native ReactJS components must re-usable and well encapsulated.  The goal is a clear, modular approach to implementing the prototype.

- Use Linter, ES6, Jest and other best practice libraries to maintain your code quality. 
- Put clear comment/documentation for all ReactJS elements. 
- Images, Icons (SVG), etc... should be in a consistent folder
- style.css - use this name for all custom css.
- Please use proper ids and classes in your naming conventions.

3rd party scripts
- It is fine to use MIT and BSD licensed code and libraries.  You are encouraged to use 3rd party libraries especially for things like the graphs.  Please get approval for GPL / LGPL libraries in the forum.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

Styling
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean indentation for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS style when create all styling.

Assets/Images

- Wherever it makes sense, you can use icon fonts instead of images.

Hardware Requirements
- iOS 10
- Android 7

You are free to only focus on either iOS or Android, but note that the reviewers may use a different environment, so it's probably in your best interest to test both, if possible.

Test data:

The data shown in the converted UI should be easily editable via JSON files so we can tweak as we present the solution to the client.  Make sure to create React Services to pull all data from the JSON.  Also, please see the bonus below - the next step will be integrating parts of this with a REST API.

Screen Requirements:

You need to register to see the screens that are in scope.  Further details can be found in the challenge forum.

Sizing:

Please make sure your submission looks good at 1x, 2x, and 3x resolution scalings.  The graphics in the PSD should be able to be exported as vector graphics for scaling

Submission:

Your submission should include:

* The code that implements the requirements
* A video showing the UI working properly