Challenge Overview
This project is to develop application for managing consulting projects proposing digital business, which is called DPM (Digital Producer Management) System. The application need to have features of Project Management, Talent Management, Knowledge Management for managing 200 to 1000 consultants. And also it provides Dashboard so that managers can check the status of projects with updated information on a daily basis.
Project Overview
The goal of this challenge is to develop an Angular (v1) based prototype based on the provided design for the Project List which is part of the DPM system.
Warning to both submitters and reviewers: pay attention to the shortened timeline for this challenge.
Prototype Requirements
- The prototype should pull data from local JSON files, hardcoding data into the pages is not allowed.
- The prototype must be built with support for localization, i.e. any texts visible to the users must be localizable in an external resource file so that we can easily translate it to another language.
- The prototype must be responsive.
- The prototype must be built using Angular v1, usage of other javascript libraries (example: jQuery) is allowed but the base framework must be Angular v1.
- The prototype must replicate the design, it should be very straightforward.
Detailed Requirements
- Searching / sorting / pagination should all work in the prototype.
- When clicking on the project # in each row, it should open a link that looks like this: https://ap5.salesforce.com/{project #}
- The 2nd tab actually just shows a subset of the data from the 1st tab, but data will come from the API from the backend. In this prototype you can pull data from different JSON files.
- The rightmost icon in each row will link to an external page, you can open a link like https://ap5.salesforce.com/_ui/core/chatter/groups/GroupProfilePage?g=0F97F000000TWek where 0F97F000000TWek is a value of “ChatterGroupId” element in the JSON.
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.
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.
- Must support mobile.
- Must support retina display.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+ (Windows), Latest Firefox (Mac & Windows), Latest Safari (Mac only) & Chrome Browsers (Mac & Windows).
- Tablet / phone: Latest Android and Safari Browsers.
Project Overview
The goal of this challenge is to develop an Angular (v1) based prototype based on the provided design for the Project List which is part of the DPM system.
Warning to both submitters and reviewers: pay attention to the shortened timeline for this challenge.
Prototype Requirements
- The prototype should pull data from local JSON files, hardcoding data into the pages is not allowed.
- The prototype must be built with support for localization, i.e. any texts visible to the users must be localizable in an external resource file so that we can easily translate it to another language.
- The prototype must be responsive.
- The prototype must be built using Angular v1, usage of other javascript libraries (example: jQuery) is allowed but the base framework must be Angular v1.
- The prototype must replicate the design, it should be very straightforward.
Detailed Requirements
- Searching / sorting / pagination should all work in the prototype.
- When clicking on the project # in each row, it should open a link that looks like this: https://ap5.salesforce.com/{project #}
- The 2nd tab actually just shows a subset of the data from the 1st tab, but data will come from the API from the backend. In this prototype you can pull data from different JSON files.
- The rightmost icon in each row will link to an external page, you can open a link like https://ap5.salesforce.com/_ui/core/chatter/groups/GroupProfilePage?g=0F97F000000TWek where 0F97F000000TWek is a value of “ChatterGroupId” element in the JSON.
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.
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.
- Must support mobile.
- Must support retina display.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+ (Windows), Latest Firefox (Mac & Windows), Latest Safari (Mac only) & Chrome Browsers (Mac & Windows).
- Tablet / phone: Latest Android and Safari Browsers.
Final Submission Guidelines
Provide all your files within a zip container, your submission must include a readme on how to replace the translation file so it works with a different language.