Challenge Overview
Welcome to CS Global Regulation Protocol Application Desktop UI Prototype Challenge
The main task of this challenge is need to build the CS Global Regulation Protocol Application by following provided sketch of layout and interactions to guide you of our expected look and feel.
Main framework need to use for this challenge are Angular4 and Bootstrap3. The result of this prototype needs to implement best practice of responsive solution across required browsers. But, for this challenge you just need support the desktop platforms.
Let’s discuss any questions you have on challenge forum!
- For this prototype submission we need you to build using Angular4 with TypeScript, HTML5, CSS3 and JSON as main technologies.
- You also must use Bootstrap 3 to build the page layout
- Feel free to choose Angular4 starter seed to help you build the UI Prototype
- Use SCSS/SASS for the submission styling
- AngularJS Components must re-usable. Component should be derived based on the configuration. Configuration file to contain the required configurations required to render the page
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines: https://v4.angular.io/guide/styleguide
- Put clear comment/documentation for all AngularJS components
- All table datas need loaded by JSON.
- Create HTTP Services to pull all data from JSON.
- Create Routes that use proper naming with existing pages
- Create README.md file that explains your UI Prototype submission structure and commands
- Create clear documentation to set-up your submission locally and on Heroku.
- Also, you must put your submission on Heroku for client review. Include the link on your README.md
Downloadable Files
https://drive.google.com/open?id=1SKJ84Ps3ZTD4L_fEqj-eQySjbZ_2iYKR
Page Requirements
0). General Layout
Screenshot: D01_00_Dashboard.png
- This is general application page look for each layout section
- You can set minimum 1366px as minimum width for desktop. Support fluid width for wider screen.
Header
- Header need to use fluid width
- Page title on the left side
- Quick search, display the text placeholder
- Display icons for Setting, Pin, Chat and Notifications.
- There are number indicator for Chat and Notifications.
- User Welcome dropdown on the right side
- Click the dropdown need display this menu option (Screenshot: D01_09A_Profile.png)
Sidebar
- Sidebar background height need to be expand as content height
- Toggle button to expand and collapse the sidebar
- By default need load the sidebar on collapse state
- This is how the expand look (Screenshot: D01_03_Dashboard.png)
- Set active state for with red colored background
Main Content
- Main content area displayed some box with consistent margin between boxes
- As possible all boxes need use equal height
- Refer more details for each page below.
Footer
- Use fluid width for the footer
- Footer need to be scrolled as the content height
- Copyright placed on the left side, Privacy, Terms & Conditions are text links
- Social icons need to be clickable, set as dead links for now
1). Dashboard
Screenshot: D01_00_Dashboard.png
Regulations & Standard
- This box contains Logo and list that using 2 columns layout
Global Regulators
- Feel free to suggest the best library to build the image as long it using open-source license. Let us know if need confirmation on challenge forum.
- The map needs to be able to display correctly multiple data points in close proximity. So the map will need to display these markers appropriately, perhaps with the aid of clustered markers or zoom functionality. The markers should click through to the Country/Regulator page.
- Click Full Size icon on the right side need display the modal window (Screenshot: D01_01A_Dashboard.png)
- Hover on each dot need display the country name (Screenshot: D01_01B_Dashboard.png)
- Click the dots need load the flyout (Screenshot: D01_01C_Dashboard.png)
- There are some dots that displayed clustered number (Screenshot: D01_01D_Dashboard.png)
- Hover on it need display tooltips with longer content
- User need able to zoom in and out the map by click the + and - buttons on the map controls (Screenshot: D01_02A_Dashboard.png)
- Zoomed in map look (Screenshot: D01_02B_Dashboard.png)
- Click search button need display the text input (Screenshot: D01_02C_Dashboard.png)
- Display the auto-suggest when user start typing
Upcoming Events
- This box contains upcoming events
- Blue box need display the Event Date
- Event title placed on top
- 3 dots button placed on the right side
- Others tags need display some tags in line
- See Detail link placed on the bottom
Saved Documents
- Document icon placed on the left side
- Event title placed on top
- 3 dots button placed on the right side
- Others tags need display some tags in line
- You also need display the date info on the right side of See Detail link
Screenshot: D01_04_Dashboard.png
- Each boxes on page need able to drag & drop
- Hover on the header bar need display tooltip for Drag & Drop feature text
Screenshot: D01_05_Dashboard.png
- Other boxes need to have less transparent when box being dragging
Screenshot: D01_06_Dashboard.png
- Display drop placeholder with dotted line
Screenshot: D01_07_Dashboard.png
- This is new layout look after user dropped the box
Screenshot: D01_08_Dashboard.png
- User need able to expand/collapse each boxes by click the +/- minus
2). Profile
Screenshot: D01_09B_Profile.png
- User landed to this page after click My Profile button on the Welcome menu
- User Profile image area can use fixed width
- The Setting area need use fluid width
- User image need wrapped using css rounded properties
- Display name, email. Also those 2 buttons for Update Profile and Change Password
- On the setting there are toggle buttons, use blue color for active state and grey color for inactive state
- User need able to drag & drop each rows
- Notification Settings not have the drag & drop function
3). Search
Screenshot: D01_10_Search.png
- This is Search page
- Filter area can use fixed width
- Search Result area need use fluid width
- Filter area consists of Filter and Search tabs
- Search Result area consists of Document and Milestones tab
- On search result item of Document tab, there are the bookmark icon on the right side. Need able to toggle this button. Use blue color background for the active state.
- On search result item of Milestones tab, there are the + icon on the right side. Need able to toggle this button. Use blue color background for the active state.
- This is Milestones tab look (Screenshot: D01_11_Search.png)
- When user click Apply button on the Filter need display the parameters on search result (Screenshot: D01_12_Search.png)
- User need able to remove the filter by click the X button
- This is saved Filter look (Screenshot: D01_13_Search.png)
- User need able to collapse the filter area by click the left arrow button (Screenshot: D01_14_Search.png)
- Click Save Filter link need load the modal (Screenshot: D01_15_Search.png)
- There are some filter options on the modal window also the text input
4) Search Result
- This is search result look after user search from the Quick Search on header bar (Screenshot: D01_16_Search.png)
- Search value placed on top
- Search items displayed using grid layout
5). Regulators
Screenshot: D01_17_Regulators.png
- Click Regulators button need take user to Regulators page
- On the left side there are some list to select the Regulators
- Match active state for the selected Regulators
- On the right side need display banner and title on top
- Below the banner, there are 2 tabs for Documents & Milestones
- Sort By dropdown placed on the right side
- See Detail button need load the modal window (Screenshot: D01_18_Regulators.png)
- This is Milestones tab (Screenshot: D01_19_Regulators.png)
- For the Milestones tab, click details button need load different modal window (Screenshot: D01_20_Regulators.png)
6). Regulations
Screenshot: D01_21_Regulations.png
- Click Regulation button need take user to Regulation page
- On the left side is area for Regulations list
- Match active state for the selected Regulations
- There are some tabs need displayed for Regulations:
Documents tab
- This tab need displayed by default
Milestones tab
Screenshot: D01_22_Regulations.png
- You can re-use content from another page
Quick Guide
Screenshot: D01_23_Regulations.png
- Quick Guide consist of 2 columns layout
- On top part, there’s toggle button for Overview and Glossary
- Create different content for Glossary (Screenshot: D01_24_Regulations.png)
- User need able to navigate the quick guide by click the link on the left side. Also the arrow on the top right
Implementation Guide
Screenshot: D01_25_Regulations.png
- This tab consist of 2 columns layout
- User need able to navigate the quick guide by click the link on the left side. Also the arrow on the top right
Contact
Screenshot: D01_26_Regulations.png
- Contact tab need display as list
Links
Screenshot: D01_27_Regulations.png
- Links tab need display as list
7). Notifications
Screenshot: D01_28_Notifications.png
- User click the notification button need take to this Notifications page
- There’s blue dots on the left side to indicate new notifications.
CODE REQUIREMENTS:
HTML5
- 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.
CSS3
- Provide comments on the SCSS code. We need 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 code so developers can follow.
- All SCSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
Javascript
- You must using Typescript (.ts) file format
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines: https://v4.angular.io/guide/styleguide
- Put clear comment/documentation for all AngularJS components
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- 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.
IMAGES/SVG
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- If any icons are required, ask and they will be provided
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
The main task of this challenge is need to build the CS Global Regulation Protocol Application by following provided sketch of layout and interactions to guide you of our expected look and feel.
Main framework need to use for this challenge are Angular4 and Bootstrap3. The result of this prototype needs to implement best practice of responsive solution across required browsers. But, for this challenge you just need support the desktop platforms.
Let’s discuss any questions you have on challenge forum!
Final Submission Guidelines
Important:- For this prototype submission we need you to build using Angular4 with TypeScript, HTML5, CSS3 and JSON as main technologies.
- You also must use Bootstrap 3 to build the page layout
- Feel free to choose Angular4 starter seed to help you build the UI Prototype
- Use SCSS/SASS for the submission styling
- AngularJS Components must re-usable. Component should be derived based on the configuration. Configuration file to contain the required configurations required to render the page
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines: https://v4.angular.io/guide/styleguide
- Put clear comment/documentation for all AngularJS components
- All table datas need loaded by JSON.
- Create HTTP Services to pull all data from JSON.
- Create Routes that use proper naming with existing pages
- Create README.md file that explains your UI Prototype submission structure and commands
- Create clear documentation to set-up your submission locally and on Heroku.
- Also, you must put your submission on Heroku for client review. Include the link on your README.md
Downloadable Files
https://drive.google.com/open?id=1SKJ84Ps3ZTD4L_fEqj-eQySjbZ_2iYKR
Page Requirements
0). General Layout
Screenshot: D01_00_Dashboard.png
- This is general application page look for each layout section
- You can set minimum 1366px as minimum width for desktop. Support fluid width for wider screen.
Header
- Header need to use fluid width
- Page title on the left side
- Quick search, display the text placeholder
- Display icons for Setting, Pin, Chat and Notifications.
- There are number indicator for Chat and Notifications.
- User Welcome dropdown on the right side
- Click the dropdown need display this menu option (Screenshot: D01_09A_Profile.png)
Sidebar
- Sidebar background height need to be expand as content height
- Toggle button to expand and collapse the sidebar
- By default need load the sidebar on collapse state
- This is how the expand look (Screenshot: D01_03_Dashboard.png)
- Set active state for with red colored background
Main Content
- Main content area displayed some box with consistent margin between boxes
- As possible all boxes need use equal height
- Refer more details for each page below.
Footer
- Use fluid width for the footer
- Footer need to be scrolled as the content height
- Copyright placed on the left side, Privacy, Terms & Conditions are text links
- Social icons need to be clickable, set as dead links for now
1). Dashboard
Screenshot: D01_00_Dashboard.png
Regulations & Standard
- This box contains Logo and list that using 2 columns layout
Global Regulators
- Feel free to suggest the best library to build the image as long it using open-source license. Let us know if need confirmation on challenge forum.
- The map needs to be able to display correctly multiple data points in close proximity. So the map will need to display these markers appropriately, perhaps with the aid of clustered markers or zoom functionality. The markers should click through to the Country/Regulator page.
- Click Full Size icon on the right side need display the modal window (Screenshot: D01_01A_Dashboard.png)
- Hover on each dot need display the country name (Screenshot: D01_01B_Dashboard.png)
- Click the dots need load the flyout (Screenshot: D01_01C_Dashboard.png)
- There are some dots that displayed clustered number (Screenshot: D01_01D_Dashboard.png)
- Hover on it need display tooltips with longer content
- User need able to zoom in and out the map by click the + and - buttons on the map controls (Screenshot: D01_02A_Dashboard.png)
- Zoomed in map look (Screenshot: D01_02B_Dashboard.png)
- Click search button need display the text input (Screenshot: D01_02C_Dashboard.png)
- Display the auto-suggest when user start typing
Upcoming Events
- This box contains upcoming events
- Blue box need display the Event Date
- Event title placed on top
- 3 dots button placed on the right side
- Others tags need display some tags in line
- See Detail link placed on the bottom
Saved Documents
- Document icon placed on the left side
- Event title placed on top
- 3 dots button placed on the right side
- Others tags need display some tags in line
- You also need display the date info on the right side of See Detail link
Screenshot: D01_04_Dashboard.png
- Each boxes on page need able to drag & drop
- Hover on the header bar need display tooltip for Drag & Drop feature text
Screenshot: D01_05_Dashboard.png
- Other boxes need to have less transparent when box being dragging
Screenshot: D01_06_Dashboard.png
- Display drop placeholder with dotted line
Screenshot: D01_07_Dashboard.png
- This is new layout look after user dropped the box
Screenshot: D01_08_Dashboard.png
- User need able to expand/collapse each boxes by click the +/- minus
2). Profile
Screenshot: D01_09B_Profile.png
- User landed to this page after click My Profile button on the Welcome menu
- User Profile image area can use fixed width
- The Setting area need use fluid width
- User image need wrapped using css rounded properties
- Display name, email. Also those 2 buttons for Update Profile and Change Password
- On the setting there are toggle buttons, use blue color for active state and grey color for inactive state
- User need able to drag & drop each rows
- Notification Settings not have the drag & drop function
3). Search
Screenshot: D01_10_Search.png
- This is Search page
- Filter area can use fixed width
- Search Result area need use fluid width
- Filter area consists of Filter and Search tabs
- Search Result area consists of Document and Milestones tab
- On search result item of Document tab, there are the bookmark icon on the right side. Need able to toggle this button. Use blue color background for the active state.
- On search result item of Milestones tab, there are the + icon on the right side. Need able to toggle this button. Use blue color background for the active state.
- This is Milestones tab look (Screenshot: D01_11_Search.png)
- When user click Apply button on the Filter need display the parameters on search result (Screenshot: D01_12_Search.png)
- User need able to remove the filter by click the X button
- This is saved Filter look (Screenshot: D01_13_Search.png)
- User need able to collapse the filter area by click the left arrow button (Screenshot: D01_14_Search.png)
- Click Save Filter link need load the modal (Screenshot: D01_15_Search.png)
- There are some filter options on the modal window also the text input
4) Search Result
- This is search result look after user search from the Quick Search on header bar (Screenshot: D01_16_Search.png)
- Search value placed on top
- Search items displayed using grid layout
5). Regulators
Screenshot: D01_17_Regulators.png
- Click Regulators button need take user to Regulators page
- On the left side there are some list to select the Regulators
- Match active state for the selected Regulators
- On the right side need display banner and title on top
- Below the banner, there are 2 tabs for Documents & Milestones
- Sort By dropdown placed on the right side
- See Detail button need load the modal window (Screenshot: D01_18_Regulators.png)
- This is Milestones tab (Screenshot: D01_19_Regulators.png)
- For the Milestones tab, click details button need load different modal window (Screenshot: D01_20_Regulators.png)
6). Regulations
Screenshot: D01_21_Regulations.png
- Click Regulation button need take user to Regulation page
- On the left side is area for Regulations list
- Match active state for the selected Regulations
- There are some tabs need displayed for Regulations:
Documents tab
- This tab need displayed by default
Milestones tab
Screenshot: D01_22_Regulations.png
- You can re-use content from another page
Quick Guide
Screenshot: D01_23_Regulations.png
- Quick Guide consist of 2 columns layout
- On top part, there’s toggle button for Overview and Glossary
- Create different content for Glossary (Screenshot: D01_24_Regulations.png)
- User need able to navigate the quick guide by click the link on the left side. Also the arrow on the top right
Implementation Guide
Screenshot: D01_25_Regulations.png
- This tab consist of 2 columns layout
- User need able to navigate the quick guide by click the link on the left side. Also the arrow on the top right
Contact
Screenshot: D01_26_Regulations.png
- Contact tab need display as list
Links
Screenshot: D01_27_Regulations.png
- Links tab need display as list
7). Notifications
Screenshot: D01_28_Notifications.png
- User click the notification button need take to this Notifications page
- There’s blue dots on the left side to indicate new notifications.
CODE REQUIREMENTS:
HTML5
- 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.
CSS3
- Provide comments on the SCSS code. We need 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 code so developers can follow.
- All SCSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
Javascript
- You must using Typescript (.ts) file format
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines: https://v4.angular.io/guide/styleguide
- Put clear comment/documentation for all AngularJS components
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- 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.
IMAGES/SVG
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- If any icons are required, ask and they will be provided
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version