Challenge Overview

The goal of this challenge is to build an Angluar 2.0 app prototype from provided Wireframe following the design styling of an existing client app.

Challenge Requirements

You are provided with the following input:
- Wireframe mockup contains all the pages in flow
- A design/prototype to follow its design styling to implement the prototype

What you will do:
- Convert all pages in the wireframe to angular 2.0 app, you will use bootstrap 3.0 with theme following the existing design/prototype styling/theme.
- Use JSON files for mock data, it will be replaced with API at a later stage.

Input Files

The wireframe to convert, the existing prototype/design are provided in challenge forums.

Required Pages

You will address all pages in the wireframe, please note the wireframe is interactive, so here we will list the pages in scope with some notes, if you have any questions please post in the forums :
- Header and Footer
    - It should be same as the existing prototype. Basically the general page layout (footer, header, background colors, colors) should follow provided prototype.
    - Use FAYA word as logo.
- Login page
   - You need to simulate same login behavior in wireframe, each user role will take to different dashboard page.
   - Implement invalid login styling.
- User Dashboard page
   - You will use google charts for the charts.
- SEC Fund Review page
- Fund Review - 30 days details page
- Fund Review - MM page
- Fund Review - FIE page
- SEC Holding View page 
- Holding View - MM page
- What if analysis page
   - TIPS page
   - Equity page
   - Convertible Funds page
   - Steps Bonds page
   - Mortgage Backed Security page
- Report page
  - The action column, the icons should be dead links.
- Approver Dashboard page
  - The action column should be dead links.
- Approver Details page
- Admin Dashboard Page

General Notes

- You must use Bootstrap 3.0 framework.
- Use the provided angular 2.0 app scripts and folder structure in this challenge.
- Provide a README file for how to build, configure, and deploy the app.
- Most of the page consist of tables, tabs, and forms, you can find similar design styling for these in the existing prototype/design, simply reuse the styling, if there is a style that you cannot easily produce please post in forums and we will give you support.
- User login, and all pages data must be loaded from mocked JSON data files.
- The flow/navigation between pages must be implemented.
- Use NPM or Bower for Library Package Manager. DO NOT just put raw javascript library inside your prototype
- Use SCSS for CSS Pre-Processor
- Follow wireframe, if buttons don't have any action, they should be dead link, otherwise, follow the flow as in the wireframe for that button.

Client Priorities (The items that are considered highest prototype priorities)

- Creating quality and efficient AngularJS 2.0 app that works in all the requested browsers.
- Matching the provided design/prototype (as close as possible) across the required browsers.
- Best Practice AngularJS 2.0 code

CODE REQUIREMENTS

HTML/HTML5

- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

SCSS (CSS3)

- Provide comments on the SCSS code. We need SCSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION so developers can follow the code.
- All naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.

Javascript

- Angular 2.0 is a must, don't use JQuery.
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- 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.

Images

- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.

Browsers Requirements

- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser