Challenge Overview
Page Requirements
Prototype Requirements
- The data to be displayed must come from local JSON files and cannot be hardcoded (this includes the data on the graph as well)
- The options for the checkboxes should come from local JSON files instead of hardcoded on the pages.
- Must use Angular 5 and Material design
- The behavior of components should match with the branding guidelines
- Please use angular cli for development of modules creation
- The project structure and components should be modular
- The pages should clearly indicate invalid input data to users, for example: on login screen if users hit login without entering username, the textbox should be highlighted in red with an error message too
- Must follow Angular best coding practices
- Create README.md file that explains your UI prototype structure
- Your submission must follow the Responsive UI best practice
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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
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.
Screen Specifications
- Must support desktop.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
- Source Code
- README file
- The submission must follow the Atomic Design Principles, use latest angular material compatible with Angularjs 5, with node 6.9+, and customize the components as per guidelines and package it as npm installable library. (Note that you only need to customize components that are in scope for the challenge)
- Refer Marketplace-Functional-Flow.docx for the workflow and the pages in scope for the challenge.
- Merchant view promotions
- Merchant create promotions
- Review Promotions
- For the backend data, please follow the provided swagger files (in JSON_Challenge2 folder), you need to build a mock back-end according to the swagger files to serve json data. (The pages from previous challenge are also in scope). You can use json-server: https://www.npmjs.com/package/json-server.
- Please use RX JS as much as possible
- For date & time, please use Angular based time/date related functions
- Unit tests are required (Karma), and coverage report is required as well (with 90+%), and please also take screenshots automatically when running the tests.
Prototype Requirements
- The data to be displayed must come from local JSON files and cannot be hardcoded (this includes the data on the graph as well)
- The options for the checkboxes should come from local JSON files instead of hardcoded on the pages.
- Must use Angular 5 and Material design
- The behavior of components should match with the branding guidelines
- Please use angular cli for development of modules creation
- The project structure and components should be modular
- The pages should clearly indicate invalid input data to users, for example: on login screen if users hit login without entering username, the textbox should be highlighted in red with an error message too
- Must follow Angular best coding practices
- Create README.md file that explains your UI prototype structure
- Your submission must follow the Responsive UI best practice
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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
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.
Screen Specifications
- Must support desktop.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
Final Submission Guidelines
Submission Deliverable- Source Code
- README file