72h Quantum UI Prototype Challenge

Challenge Objectives

• Build a UI prototype with 2 unique screens and a modal popup using Angular 8.

 
Project Background

• For the purpose of this challenge, we need the community to help build the UI prototype following the provided design.

 
Technology Stack

• Angular 8
• HTML5
• Javascript
• CSS

 
API Integration
Although the API is not ready yet, you need to implement simple controllers to fetch the data showing in the app from 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.
 
Screen requirements
Below is the list of screens that are supposed to be implemented in the prototype, we are referring to the slides / pages from the PDF we provided in the forum. 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.
 
Screens not mentioned below are NOT in scope.
 
Landing Page
Slide #2 is the landing page of this prototype (slide #1 from PDF is not in scope).
 
On this page:

• The banner at the top is static, the UI needs to be replicated but the UI elements don’t need to respond to user actions.
• A list of projects are shown, which may either have Pending or Approved status.
• The design indicates Approved projects
• The action icons for Approved projects are shown as disabled, this is a design mistake. They should be enabled as well because users can edit / submit / re-submit any projects.
• Pagination needs to work on this page.
• If the user clicks the action icon in a row, it will navigate to the details page (described in the next section)
• The “Confirm unbilled efforts” button is disabled until some projects are selected, then clicking the button would also navigate to the details page.

 
Details Page

• The banner at the top is static, the UI needs to be replicated but the UI elements don’t need to respond to user actions.
• PDF slides #3 to #9 show different states of the details page. #3 is what the page looks like on entering.
• Please note the column consists of 3 different parts: columns “Emp name” to “Effort” are fixed to the left, Total column is fixed to the right, the other columns in the middle should be scrollable horizontally and there can be as many as 21 numeric columns there.
• The design of the details page only shows one project, but there could be multiple projects showing on this page, which needs to be implemented by this prototype.
• The header section allows users to filter results by project, date or free text input, see slide #4 from the PDF, these need to be implemented by the prototype.
• Clicking the Edit button will switch the page into editing mode, see slide #5 from the PDF, please note only the Revised unbilled efforts rows need to be editable.
• The total calculation should be done in real time for each editable row, and rightmost Total column will include both actual and revised unbilled hours.
• Each of the editable row has an icon that can be clicked on the right side. Once the icon is clicked, a popup will be shown to let users select a reason, see slides #6 and #7 from PDF. Please note that this icon is only enabled / visible if the revised total hours are different from the actual total hours.
• When edits are saved, reasons can be viewed by clicking the icon, see slide #8 from PDF. Notice that the icon looks different when there’s no reason provided vs reason provided vs in edit mode.
• Finally, the page can be submitted by clicking the Submit button, see slide #9 from PDF. On clicking Accept, the prototype should navigate back to the landing page.

 
General Requirements

• 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.
• The data to be displayed must come from local JSON files and cannot be hardcoded.
• The main content should have fluid width to fill all available space.
• Pagination should work whenever applicable.
• Must use Angular 8 and follow the provided design.
• The pages should clearly indicate invalid input data to users, for example: if a user tries to submit a page without providing a required text field, the textbox should be highlighted with an error message.
• Must follow Angular 8 best coding practices.
• You are expected to create a detailed README file including information on how to setup, run and verify your application.

 
HTML Requirements

• HTML should be valid HTML5 compliant.
• Provide comments on the page elements to give 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, Firefox Latest
Mac: Safari Latest, Chrome Latest, Firefox Latest
 
Documentation

• Design Source File
• PDF with screenshots of design

Final Submission Guidelines

• Full code that covers all the requirements.
• A detailed README file including information on how to setup and run your application.