Register
Submit a solution
The challenge is finished.

Challenge Overview

  • Create Angular application from provided story board and using the given Mock API

We will give a $200 bonus to the winner at our own discretion if the Angular coding and CSS quality is excellent.

Project background

  • Our client is looking to create a marketplace for commonly used APIs which can be used by financial institutions like banks

Technology stack

Challenge Assets

  • Storyboard - Marvel link with handoff is shared in the forum

  • Sketch source file is provided in the forum

  • Mock API code with UI to API mapping document is shared in the forum

  • API is hosted at https://openbanking-api.herokuapp.com/api/v1

  • Postman collection for API is provided in the forum

  • Swagger is viewable here

Individual requirements

  • The prototype will be extended to support tablet layout in future, hence please make proper use of grids everywhere to ensure that prototype can be modified later to support tablet layout easily. We understand that this may result in the prototype not being pixel perfect.

  • Good quality prototype with clean reusable components will be given higher importance compared to pixel perfect prototype with nonoptimal implementation

  • Requirements for each and every screen are added as comments in the Marvel app and please pay attention to the UI to API mapping document in forum.

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

  • Angular material components should be used for UI development

  • Please use the Angular CLI version specified in Specs

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

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

  • Please use lazy loading for child components and every module should have it’s own routing module

  • Please use toastr to display error messages from API if there is no other place to display errors. E.g. Non validation errors

  • 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 / Grids to load each page in different device layouts. Do not build a different page for different devices / 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 existing lint script to ensure that there are no lint errors

Platform

  • Desktop: latest version of all browsers Chrome, Firefox, IE, Edge, Safari

Unit tests

  • Unit tests are not in scope

Important Notes:

  • Please pay attention to the details shared in Spec, forum and Marvel app.

  • Appeals phase for this challenge is shorter than usual. Please make note of the timelines. 

  • If you have any doubts, Please feel free to post it in the forum. We will be happy to resolve your queries as soon as possible.



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

ELIGIBLE EVENTS:

2020 Topcoder(R) Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30115666