[72 hrs] Business Online Application - Angular Prototype

• Create a simple Angular application from the provided storyboard

Submission, Review and Appeals phase for this challenge is shorter than usual. Please make note of the timelines.

Project background

• Our client is looking forward to convert an application built in JSF to Angular in phases. To demonstrate the capability, we are building an angular application from scratch based on the provided storyboard which is created from the screenshots of existing application

Technology stack

• Angular 6

• Angular CLI 6.2.4

• NodeJS

• HTML

• SCSS

• Typescript

Challenge Assets

• Storyboard - https://marvelapp.com/cb3e847

• Please request for Zeplin access in the forum

• Mock API is accessible at https://hercules-mock-api.herokuapp.com

• Postman collection for Mock API is provided in the forum

Individual requirements

• Every screen in Marvel app https://marvelapp.com/cb3e847 is in scope

• Labels in the left pane, headers and tabs are hardcoded

• Every other data should come from API

Payment type Search and List Screen:

• Link - https://marvelapp.com/cb3e847/screen/60460090

• Searching payment type is supported from this screen

• Sample API call - https://hercules-mock-api.herokuapp.com/paymentTypes?customer_agreement=HK%20NAM%20PES

Payment type View Screen:

• Link - https://marvelapp.com/cb3e847/screen/60460092

• User should be able to view the payment type from this screen

• Buttons Authorise, Audit and Decline are not in scope

• Sample API call - https://hercules-mock-api.herokuapp.com/paymentTypes/payment-type-0

• Clicking on the Delete button will trigger the pop up - https://marvelapp.com/cb3e847/screen/60495022

• Please note the change here - https://marvelapp.com/cb3e847/screen/60495024 (Success alert should always be highlighted in green like https://marvelapp.com/cb3e847/screen/60460087 even if it’s deleting a payment type)

Payment type Create / Update Screen:

• Link - https://marvelapp.com/cb3e847/screen/60460093

• Create and update payment screens are similar except that values are already populated in update payment screen based on the existing values and payment type name will not be editable

• `Add statement reference type` in this screen https://marvelapp.com/cb3e847/screen/60460098 is not in scope

• Once the payment type is saved, it will return back to search screen

Validation errors or API errors:

• Link - https://marvelapp.com/cb3e847/screen/60495023

• If there is a single validation error, it will be highlighted in red as it is given on the screen.

• If there are multiple validation errors, we need to create a link to open a modal with all error messages https://marvelapp.com/cb3e847/screen/60511123

Unit tests:

• We need sample unit tests for all components, services and directives in scope. It can be just one test case per component too

• Code coverage is not a problem here

General requirements

Layout

• The UI should support resolution 1366x768 and above

• The application layout should match the storyboard as much as possible

• Please make use of reusable components as much as you can

• SVG icons are preferred over PNG or JPEG images

Angular specific

• Please follow angular style guide while creating components, writing tests, etc..

• Please pay attention to angular security guide and follow the principles strictly.

• Ensure that npm run build --prod doesn’t throw any error and build is successful.

HTML Specific

• HTML should be valid HTML5 compliant.

• All HTML code naming should not have any conflicts or errors.

• Please use clean INDENTATION for all HTML code so future developers can follow the code.

• 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.

CSS Specific

• 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.

• Use CSS3 Media Queries to load different styles for each page. Do not build a different page for different device/layout.

• You may use SCSS in the project.

Javascript Specific

• All JavaScript used must not have any copyrights to any 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.

• 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.

Code formatting

• Make sure the code is well documented, all classes, methods, variables, parameters, return values must be documented in every single code file, and appropriate inline comments should be provided too where the code is not straightforward to understand.

• Use appropriate linter to lint your code and ensure that there are no lint errors

Platform

• Desktop: Chrome latest, Firefox latest

• Chrome is the main browser

Final Submission Guidelines

• Zip your codebase and submit the zip file using the submit link in the challenge.

• After submitting, please ensure that you are able to download your submission from Online Review