ASoD Economic Calculator App - Prototype Challenge

Challenge Objectives

• Create an Angular 7+ application based on provided design and architecture docs.

Project Background

Application Security on Demand (ASoD) is a service that we offer to our customer and currently, we use a manual excel document as an “Economic calculator” to calculate the economic benefit to our customer. In this series of challenges, we are converting the excel document to a web application with full functionality and UX.

This challenge aims to implement the UI prototype of the application. We will connect it with the back-end API in follow challenge.
 

Technology Stack

• Angular 7+
• SCSS
• REST
• Heroku
• Other

 

Code access

There is no code base available yet. We will provide in the forums:

• UI design screens with source
• We have all icons from design extracted as .svg files for you
• MarvelApp links
• Back-end architecture for reference
• Excel file itself
• All available architecture documentation

 

General requirements(Major)

• All screens from provided design are in scope. Description of each below.
• Use Angular CLI to  scaffold and maintain the application
• SCSS should be used not plain CSS.
• Angular best practices and linting should be applied to the codebase.
• Break UI into functional elements with reusable components. Identify, split and create them properly. 
• Pages reused by admin/user:
• -- Login - both roles use same UI for login.
• -- Reports - both roles use it. The user sees filtered data to only own reports but UI is the same.
• -- Economic Calculator - both users&admins can work it with full functionality.
• SCSS mixins should be created for components like buttons, forms, panels. We need to be able to modify all generic components globally.
• All data should be loaded from JSON files not hard-coded in HTML or JS. We will have integration challenge when backend ready to connect UI with API.
• Charts/diagrams are in scope. D3 is the preferred library to use but we are open for suggestions as well.
• Keep in mind that UI(with charts) will be updated in real-time as the user interacts with the application interface.
• The application should configure and implement proper routing via the Angular router. Should enforce security via route guards. As we do not have back-end yet please use a simple file to configure users/admins.

Individual Requirements(Major)

1. Login - Screens: 1_1_Login.png - 1_4_Login.png(Admin+User)

• Used for login with email/password
• Route path: /login - free for access for anyone
• Should implement validation and error messages as per design
• Click "Login" redirect to the user's or admin's dashboard based on user's role
• Slider to the left can hardcode images and text
• "FORGOT PASSWORD" form is missing in design. Please use the same look and feel to implement it. It should be a simple form. Email field with a button("RESET PASSWORD")

2. Admin Dashboard - Screens: 2_1_Dashboard.png - 2_7_Dashboard.png

• This is what the Admin see after login.
• Route path: /dashboard - only access for admins
• "Economic Calculator" tab(left) sidebar is the same as the User sees/interacts with. The idea is that Admins can also do/use the calculator in full functionality.
• Use mock data for questions, answers, charts.
• All components on the dashboard should be functional.
• We do not track download time of reports thus week/period selectors from both download charts are to be left out from implementation.
• Charts should be functional.

3. Admin Reports -  Screens: 3_1_Report.png - 3_5_Report.png

• Used by admins to manage reports.
• Route path: /reports - only access for admins/users
• Use mock data for the tables/tabs.
• Pagination will be implemented on the back-end side but should demo it in the prototype.
• Modal pops up when the user clicks the email icon. 3_4_Report@2x.png is wrong. No need to have "File Name" and type dropdown just do not implement them.
• This view is used by the user as well. The same component but user role sees only reports created from the user itself, not all reports as present to the admin.
• We have only 2 states of reports. "Complete" and "Incomplete". Therefore need only 3 tabs "All", "Complete" and "Incomplete" not as shown in the design.

4. Admin User Management - Screens: 4_1_User_Management.png - 4_3_User_Management.png 

• Used by admin to manage users in the system
• Route path: /users - only access for admins
• Use mock data for the tables/tabs.
• Pagination will be implemented on the back-end side but should demo it in the prototype.

5. Admin Data - Screens: 5_1_Admin.png - 5_7_Admin.png

• Used by admins to create/update questions in master sets of data.
• Route path: /data - only access for admins
• Each group of questions is editable via modal. All those modals have similar look and feel and need to be implemented.
• Use mock data but show all kind of question types.

6. User Dashboard  - Screens: 2_1_Dashboard.png

• User sees it after login to the application
• Route path: /dashboard - only access for users
• Could be/use the same component as admin dashboard but with hidden sections that are not allowed to users OR separated page/view
• Use mock data to create and demo it.
• The filtering on "Customer Report Status"(cog icon) is in scope and should match look and feel like admin's 2_6_Dashboard.png with same fields plus a "Status" one.
• We do not track download time of reports thus week/period selectors from download chart are to be left out from implementation.

7. User/Admin Economic Calculator - Screens: 3_0_1_Economic_Calculator .png - 3_20_Economic_Calculator .png

• User and admins use it to create ASoD reports based on master data sets and customer inputs.
• Route path: /calculator - only access for admins/users
• When this tab is hit for the 1st time there is customer selection flow. It should be implemented.
• Click on the back arrow left to user's avatar in Economic Calculator should reset the selected customer and bring app back to customer selection.
• Use mock data to create and demo.
• All components are in scope.
• No need to implement update in real-time for the charts but those should be "real" charts, not placeholder images.
• We suggest D3 as chart library but are open for suggestions as well.
• All modals involved should be created as separate components.
• Question hint popups are in scope too.

Browser Requirements

• IE11+, Edge
• Latest Google Chrome (Windows & Mac OS).
• Latest Safari (Windows & Mac OS).
• Latest Firefox (Windows & Mac OS).

Screen Specifications

• We target desktop screens only

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.

  

CSS/SCSS Requirements

• Provide comments on the SCSS code. We need SCSS 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 SCSS so developers can follow the code.
• Do not create a single .scss file for the whole app. Each component should have its own stylesheet file.
• Ensure that there are no lint errors.
• All SCSS naming should not have any conflicts.
• Write SCSS not CSS. 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 a different page for different device/layout.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural SCSS 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
• Use Angular CLI to set up the project. Latest version 7+ should be used.
• Third-party libraries are allowed when those are free to use license.

Final Submission Guidelines

Please submit to Topcoder:

• UI prototype. All source code and assets for the front-end.
• Deployment Guide
• Verification Guide
• No video required.