Digital Asset Platform Angular 10 Prototype 1

Challenge Objectives

• Build part 1 of the prototype for the Digital Asset Platform using Angular 10.

*** NOTE: there's a full spec with links to screens in the challenge forum, please use that one instead after you register to the challenge. ***

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

 

User Roles

In this prototype please support the following two roles but keep in mind we might add more roles later, so the framework needs to be flexible:

• Bank Treasury User

• Central Bank Operations User

 

API Integration

Although the API is not ready yet, you need to implement local controllers/services to fetch the data showing in the app from local 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. This is evaluated as a major requirement.

 

General UI Requirements

• You are expected to build the prototype following the provided design unless otherwise specified.

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

• 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 implemented in the challenge. 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.

 

Home

The home page must be implemented, this includes the following:

• 65989752

• 68112425

• 68112426

• 68112427

 

The circles under the “What We Offer” section should enlarge on mouse hovering, and clicking on any one of them should load to the Login page.

 

Clicking the Login button on the top right corner should lead to the login page as well.

 

Clicking on the “Central Bank Digital Currency” tab at the top should lead to the CBDC page mentioned below.

 

Everything else on the page can be static.

 

CBDC

Please implement this page (68112429) as per design. Clicking Login will navigate to the login page, clicking the digitalAsset logo will go back to the Home screen.

 

Login

Please implement login for the two mentioned roles above. Please implement validation on this page (wrong credentials for example).

 

Clicking the big “Digital Asset Platform” title should go back to the Home page.

 

Everything else on this page can be static.

 

Bank Treasury User

• If the user role is Bank Treasury User, they will land on the dashboard screen: 65989753 (There are 4 comments on marvelapp  about some label changes to this screen, please make sure they are covered in development)

• On this dashboard page, all the data needs to be coming from json files and no data should be hardcoded, the charts need to be build on the fly using data from the json files as well

• The token to cash exchange function needs to be implemented as shown in the following screens:

  • 65989754 - 65989757, 65989759 - 65989762. For screen 65989757 and 65989762 please make the look and feel better for the results here. The number of tokens should appear clearly.

  • Please make this part a reusable component (or multiple reusable components) since it’s used on other pages as well (request history page below for example)

• Clicking Request History on dashboard or on the conversion result popup should navigate to this page: 65989763 (Please remove the status column from the table)

  • On this page, all the data needs to be coming from json files and no data should be hardcoded

  • Filtering by date and pagination needs to work on this page

  • Cash and token conversion needs to function just like on the dashboard

• Other things on this page can be static for now

 

Central Bank Operations User

• If the user role is Central Bank Operations User, the following screens will be shown:

  • 65989775

  • 66981375 (There are 2 comments on marvelapp about some label changes to this screen, please make sure they are covered in development)

• On this dashboard page, all the data needs to be coming from json files and no data should be hardcoded, the charts need to be build on the fly using data from the json files and pagination needs to work as well

• Other things on this page can be static for now

 

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

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

• Design Source File (in Sketch format)

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.