72h Digital Asset Platform Angular 10 Integration 1

Challenge Objectives

• Integrate part 1 of the prototype for the Digital Asset Platform with the backend API.

 

Project Background

• Blockchain or Distributed Ledger Technology (DLT) is one of the most talked-about topics in the financial services industry today. 

• Blockchain is a combination of technologies that allow digital assets to be created and passed from party to party with guarantees that the assets are authentic and have not been copied or counterfeited, without needing a trusted third party to open and maintain accounts for customers.

• If fully adopted, it will enable banks to process payments more quickly and more accurately while reducing transaction processing costs and the requirement for exceptions.

• In order to help central banks, banks and non-banking financial corporations leverage this technology, we aim to build a digital banking product on a distributed ledger. 

 

Technology Stack

• Angular 10

• HTML5

• Javascript

• CSS

• REST

 

User Roles

The following two roles should be supported:

• Bank Treasury User

• Central Bank Operations User

 

API Integration

The purpose of this challenge is to replace the mock json data with API calls, we’ll provide a detailed screen to API mapping document in the forum to help you understand what API to call for each UI section.

 

Please note that the UI should show a spinner whenever the frontend code is calling the API to retrieve data.

 

General UI Requirements

• You should keep the UI look & feel and not break anything.

• Angular 10 must be used, and browser compatibility requirements must be covered.

• This app should be built using ngrx for state management.

• The UI should be fluid and generally responsive to different screen sizes (desktop only, but need to support smaller size laptop screens). The minimum supported resolution should be 1280 * 720.

• Make sure you don’t just copy & paste code to create the UI, it’s very important to maintain code reusability so that integration will be easier later. This will be evaluated in the scorecard as a major requirement.

• Do NOT use global z-indexes.

• No errors with production build.

• Must pass standard lint and NPM audit.

• A loading indicator must be shown when simulating API calls to the backend.

• The data to be displayed must come from local JSON files and cannot be hardcoded.

• The pages should clearly indicate invalid input as shown in the design.

• Must follow Angular best coding practices.

• These will be considered as major requirements.

 

Screen Requirements

Below is the list of screens that are supposed to be integrated in the challenge, you should cover them all unless we explicitly mention that API is not available for the page or some UI elements on the page yet.

 

Home

No specific integration needed for this page, just keep the UI unchanged.

 

CBDC

No specific integration needed for this page, just keep the UI unchanged.

 

Login

No need to integrate with an API, but on successful login please load some data from json that includes parameters to be used in later api calls, such as bankId and username.

 

Bank Treasury User

• Please integrate this page with the API as shown in the mapping document, anything not mentioned in the document is not in scope for integration.

 

Central Bank Operations User

• If the user role is Central Bank Operations User, the Run LSM button needs to be integrated with the API as described in the document.

• Anything not mentioned in the document is not in scope for integration.

 

HTML Requirements

• HTML should be valid HTML5 compliant.

• Provide comments on the page elements 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 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.

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

• 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 pages for different devices / 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.

• 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: IE 11+, Chrome (latest), Edge (Chromium based)

Mac: Safari (latest), Chrome (latest)

 

Documentation

• Prototype code

• API mapping documentation

Final Submission Guidelines

• Code that covers all the requirements.

• A detailed README file including information on how to set up, run and verify your application.