Challenge Overview
Welcome to CSP UI-UX Refresh Single Page Angular2 UI Prototype Challenge
The main task of this challenge is need to create the CSP UI-UX Refresh Single Page Angular2 only by following provided sketch of layout and interactions to guide you of our expected look and feel.
The result of this prototype needs to be supported on IE11, Microsoft Edge Browser, Chrome, Firefox desktop browsers.
You must use Angular2 as base framework for this submission challenge
Let’s discuss any questions you have on challenge forum
- For this challenge you just need build 1(One) page with dynamic table and drag & drop Interactions
- Your UI Prototype must support responsive solution with focus on Desktop browser as specified above
- For this prototype submission we need you to build using Angular2 with TypeScript, HTML5, CSS3 and JSON as main technologies.
- You can choose some Angular2 starter seed to help you build the UI Prototype
- You can use Bootstrap for Angular2 like this library: https://github.com/valor-software/ngx-bootstrap or come up with your selected library. Our target is need use library to help standardize the application look. Note: in the future updates we need look and feel can easily override
- There are some icons needed for the page element. Please use http://fontawesome.io/icons/ to create the icons.
- Use SCSS/SASS for CSS Pre-Processor.
- Angular2 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 Angular2 Coding guidelines: https://angular.io/guide/styleguide
- Put clear comment/documentation for all Angular2 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
CSP UI-UX Refresh Single Page Angular2 Requirements
Dashboard Page
- Use fixed width of 1165px for the page layout
- Use White for the page background color
- Use this box shadow properties for the table: box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
- You need set fixed height for the table so we can see how longer data look and feel
- There are 2 tabs on top for Enabled and Disabled.
- Numbers on tabs title need represent number of rows on each table.
- Create different data set for both tabs
- “21 Access Policies” placed on top of tab, this is need capture actual total rows
- “+” button placed on the right side. This can be dead link
- On Mouse hover on the row, right side Edit and Delete buttons to be shown and left side 3 dots next to the number should be shown.
- Edit and Delete can be dead links
- For the icons on page, please create them using http://fontawesome.io/icons/
Drag & Drop Interactions
- User should be able to click on 3 dots and drag the row vertically to the bottom or top.
- Suggest us best Drag and Drop Library for Angular2 or you can use our suggestion: https://github.com/valor-software/ng2-dragula
- Make sure drag & drop library works across the required browsers
- Whereever the record gets dropped, that corresponding row data should be swapped.
- Re-use existing drag drop effect based on your selected library
- Left side number indicator will not change. These numbers indicate the level for each row and these numbers should be also be coming as part of the JSON data response
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.
SASS/SCSS
- 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 Angular2 Coding guidelines: https://angular.io/guide/styleguide
- Put clear comment/documentation for all Angular2 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 create the CSP UI-UX Refresh Single Page Angular2 only by following provided sketch of layout and interactions to guide you of our expected look and feel.
The result of this prototype needs to be supported on IE11, Microsoft Edge Browser, Chrome, Firefox desktop browsers.
You must use Angular2 as base framework for this submission challenge
Let’s discuss any questions you have on challenge forum
Final Submission Guidelines
Important:- For this challenge you just need build 1(One) page with dynamic table and drag & drop Interactions
- Your UI Prototype must support responsive solution with focus on Desktop browser as specified above
- For this prototype submission we need you to build using Angular2 with TypeScript, HTML5, CSS3 and JSON as main technologies.
- You can choose some Angular2 starter seed to help you build the UI Prototype
- You can use Bootstrap for Angular2 like this library: https://github.com/valor-software/ngx-bootstrap or come up with your selected library. Our target is need use library to help standardize the application look. Note: in the future updates we need look and feel can easily override
- There are some icons needed for the page element. Please use http://fontawesome.io/icons/ to create the icons.
- Use SCSS/SASS for CSS Pre-Processor.
- Angular2 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 Angular2 Coding guidelines: https://angular.io/guide/styleguide
- Put clear comment/documentation for all Angular2 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
CSP UI-UX Refresh Single Page Angular2 Requirements
Dashboard Page
- Use fixed width of 1165px for the page layout
- Use White for the page background color
- Use this box shadow properties for the table: box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
- You need set fixed height for the table so we can see how longer data look and feel
- There are 2 tabs on top for Enabled and Disabled.
- Numbers on tabs title need represent number of rows on each table.
- Create different data set for both tabs
- “21 Access Policies” placed on top of tab, this is need capture actual total rows
- “+” button placed on the right side. This can be dead link
- On Mouse hover on the row, right side Edit and Delete buttons to be shown and left side 3 dots next to the number should be shown.
- Edit and Delete can be dead links
- For the icons on page, please create them using http://fontawesome.io/icons/
Drag & Drop Interactions
- User should be able to click on 3 dots and drag the row vertically to the bottom or top.
- Suggest us best Drag and Drop Library for Angular2 or you can use our suggestion: https://github.com/valor-software/ng2-dragula
- Make sure drag & drop library works across the required browsers
- Whereever the record gets dropped, that corresponding row data should be swapped.
- Re-use existing drag drop effect based on your selected library
- Left side number indicator will not change. These numbers indicate the level for each row and these numbers should be also be coming as part of the JSON data response
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.
SASS/SCSS
- 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 Angular2 Coding guidelines: https://angular.io/guide/styleguide
- Put clear comment/documentation for all Angular2 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