PM Applet Angular 6 Prototype Challenge #1

Project Background
Our customer, ABC Bank, has an Applet application that they are using to manage the collateral precious metals for their clients. As Applet technology is getting old, they are looking to move this application to be a web app.

Challenge Objectives
For the purpose of this challenge, we need the community to help build the UI for the PM Applet project using Angular 6 / HTML5 / CSS, we’ll provide detailed design and a flow document in the forum for this challenge.

Technology Stack

• Angular 6
• HTML5
• Typescript / Javascript
• CSS

 
API Integration
Although the API is not ready yet, you need to implement controllers (services) to fetch the data showing in the app from JSON files. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort so hard coded data is not acceptable.

Challenge Scope
The screens listed below are in scope of this challenge. Keep reading to find out more details.

Please note, it’s very important that you follow the requirements spec we attached in the forum, it contains many clear requirements about coding, component reusability, screen flow etc… and will be used as the major source during review. In case it has conflicts with the standard topcoder requirements we should follow the spec in the forum instead.

Prototype Requirements

• The data to be displayed must come from local JSON files and cannot be hardcoded.
• The main content should have fluid width to fill all available space.
• Must use Angular 6 and follow the provided design
• The pages should clearly indicate invalid input data to users, for example: if user tries to submit a page without providing a required text field, the textbox should be highlighted with an error message
• Must follow Angular best coding practices
• Must implement navigations by click and also by Function Keys (keyboard shortcuts) starting from landing page menu navigation, Deal Type Selection, Deal Capture, Search, DealTable navigations, User Settings.
• Must implement function keys (keyboard shortcuts) in all relevant screens – DealCapture, DealTable etc.
• Must implement screen features as specified in Screens and Screen Layout Sections in the provided spec.
• Must implement generic Deal Capture Component that is extendable to multiple deal types so we can reuse them later in other deal type pages. Please refer to Deal Capture section from the provided spec for more details.
• Must implement all client-side validations as stated in the provided spec.
• For more details and some other restrictions, refer to section 1.2 of the provided spec. They are all considered during review phase and will affect the final scores.

HTML Requirements

• HTML should be valid HTML5 compliant.
• Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
• Resources should be minified.
• Images should be in best quality with optimized size.
• Application should adhere to Standard Angular Style https://angular.io/guide/styleguide
• 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.

Code Requirements

• 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.
• Application should adhere to CSS Guideline : https://sass-guidelin.es/
• Please use clean INDENTATION for all CSS so developers can follow the code.
• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.
• Ensure that there are no lint errors (Report using ngLint analyzing the code quality).
• All CSS naming should not have any conflicts.
• You’re free to choose between CSS & SCSS but you need to use flex instead of float.
• Follow a clean folder structure.
• Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
• Make sure npm run build works without any errors.

Javascript Requirements

• All JavaScript must not have a copyright by a third party. 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.
• Use typescript and linter for code quality

Licenses & Attribution

• Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
• Implementation should not use any licensed Api or directive. Any special library or directive that needs to be used should be verified with us.
• Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.

Browser Requirements
Windows: Edge, IE 11+, Chrome Latest, Firefox Latest
Mac: Safari Latest, Chrome Latest, Firefox Latest
Tablets: Safari (iPad), Chrome (iPad and Android Tablets) / Landscape mode only

Individual requirements
Below is the list of screens that are supposed to be implemented in the prototype. Please cross compare this with the design, and if you see any inconsistencies or have any questions, raise them in the forum for clarification / confirmation:

• 4. 1 Main Menu
• 4.2.1 Spot Unallocated
• 4.3 Search
• 4.4 Simple Search
• 4.5 Settings
• 4.6 Splash Screen

These screens correspond to screens 1-26, and 51-59 in the marvelapp, and the following folders / files in the design source:

• 01-02 Landing Page and Personal Settings
• 02_3 Submenu
• 03 Spot Unallocated
• 14 Search
• 15 Deal List
• 16-17 Display Type and Console Log

Please note:

• Screen 57 is invoked by hitting “Show” on the result table
• Screen 58 is invoked by a hot key from any screen, you can pick one that doesn’t conflict with the other hot keys and clearly mention it in your readme, closing screen 58 will go back to the original screen

 
Documentation
Register to download the following documents we provided in the forum

• Full Design
• MarvelApp Link
• Requirements Spec

Final Submission Guidelines

What To Submit

• Full code that covers all the requirements.
• A detailed README file including information on how to setup and run your application.