Skyscraper - Member Service 2.2 - Angular Prototype

Welcome to the Topcoder Skyscraper Challenge Series! We are looking for amazing front end developers to jump into our new challenge series focused on rapid Angular 9 development. WIN big being part of the Skyscraper development team.

We are looking at a continuous series of Topcoder Angular Challenges until the end of 2020 with minimal development activity as Skyscrapers major application components have already been developed. Jump in to enjoy weekly prizes and enough work for parallel challenges. You will experience a clear workflow with detailed specifications, designs and a great Topcoder team looking forward to working with you.

1. Project Context:

Create an angular prototype for the provided design.  

2. Expected Outcome:

An angular prototype for the provided design.

3. Challenge Details

INDIVIDUAL REQUIREMENTS

We have created the prototype in the previous challenges. Now we would like to extend the prototype to add some new screens/pages. The tables in the new screens are already developed in the current codebase, you should reuse it in your implementation. 

Here is the design for which will cover following user stories (refer screens # 28-56): https://xd.adobe.com/view/d9f0ec6e-5700-438c-b2a5-cfa9c2ebd668-8ca3/grid

• MHS-171 (membership dashboard, screens # 28-29)
• MHS-172 (view reports, screens # 35-37)
• MHS-173 (view reports, screens # 30-34)
• MHS-174 (status report activation, screens # 38-44)
• MHS-176 (status report modification, screens # 45-50)
• MHS-179 (status report deactivation, screens # 51-56)

You need to follow the key points noted below:

• The cover screens are not needed.
• The acceptance criteria documents and other documents are provided in the forum.
• You need to use new role for these screens and make sure the code is modularized properly as it is a large project.
• Please create a new sub-folder for these screens and put all its pages inside this sub-folder. It is also required to put all page specific components inside the sub-folder of the page.
• For the tables in the design, please follow the existing table style in current code.
• Note that the existing code style should be followed, it should have no lint error and it should define interfaces properly, etc.
• Please define reasonable APIs instead of using a large JSON file.

GENERAL REQUIREMENTS

• Make sure the code best practice is followed: https://angular.io/guide/styleguide
• Secured Coding Guideline:
  • Make sure the used libraries have no vulnerabilities
  • Should avoid XSS attack

TECHOLOGY STACK

• Angular 9
• All Browsers should be supported (Chrome, Firefox, Safari, Edge and IE11)

Final Submission Guidelines

Please provide following final deliverables:

• Patch file
• Verification guide
• Change log (new components, pages, services, etc. added or updated)