Challenge Overview
Welcome to “VA Pseudovets Components UI Prototype Challenge”. On this challenge we are looking to create and develop the front end coding of this web application, using desktop as your target device only. This frontend prototype must be developed using Angular 2+. You must use latest version of Angular.
Background Information
We just finished a design challenge were designers provided the concepts for how this application should look and work. You can take a look to the details of this application and the design challenge using this link:
https://www.topcoder.com/challenges/30061903/?type=design
MarvelApp Prototype Live Demo
https://marvelapp.com/3gd6b9i/
Required Screens
1) Dashboard
- This screen have different hover behaviors and modals views. Please refer to this demo for the correct behavior:
https://marvelapp.com/3gd6b9i/screen/38199076
2) Create New Dataset
- Provide the forms with blank data as shown on this link:
https://marvelapp.com/3gd6b9i/screen/38199077
- “Population and Data Scope” is the default open accordion view.
3) Edit Dataset
- This screen can be accessed by clicking on “Edit button” from dashboard: take.ms/so4LA
- Reference this screen for content and behavior:
https://marvelapp.com/3gd6b9i/screen/38199078
- “Population and Data Scope” is the default open accordion view.
4) Configuration & Preview
- Follow this screen for content and behavior:
https://marvelapp.com/3gd6b9i/screen/38199083
Things to consider
- Top bar and navigation are fixed at top
- Provide the views for all modals on these Screens: Warning, Info, Success, etc.
- Layout is 1280px. Beyond this size will be fluid covering 100% of screen width. Less than 1280px is fixed.
- Full logo is image based. And clickable and deadlink. take.ms/h88Ps
- Logout red icon is not longer needed. So please remove this icon from the layout. Important
- All hover states should be done by reducing opacity at 90% Important
- Don’t need to code the back end functionality anywhere.
Target Devices
- Desktop Only: 1280px
Resources
- You can download all assets and resources for this challenge on this drive folder:
https://drive.google.com/open?id=1KBWQfGzYjHO72cX6ZT7y7Fkp_gAUF087
- Fonts are included there
Note: Source files are in Sketch.
- We created a Zeplin project were you can access the assets in case you don’t have Sketch app: zpl.io/a7ZlLAp
- You will need to request for invitation in forum once you register to this challenge.
Possible FAQs on this challenge
- This frontend prototype must be developed using Angular 2+. You must use latest version of Angular.
- You cannot use just simple HTML + CSS3 + Javascript on this challenge.
- You can also use HTML5 Framerworks such like Bootstrap or Foundation, but have in mind that you will need to overwrite several classes to match storyboards.
- You are allowed to use any Open Source Library / Plugin that allows you to match the designs as much as possible. Just remember to declare it on your declaration/readme file.
- All pages must be connected from top navigation to their respectives workflows. Important
- Try to match the storyboards as much as possible. If you any extra interactions, no need to code it.
- Storyboards and sources are not retina ready. So all icons and images can avoid retina behaviors.
- Provide clear class names on forms elements. This will help developers in future.
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.
- You are allowed to use SCSS/SASS for CSS Preprocessor.
- 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.
Browser Requirements
- Desktop: Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows). Try to provide the best behavior possible in IE11+, but don’t lose too much time fixing issues on this web browser.
- Mobile: Chrome / Safari for mobile browsers
Background Information
We just finished a design challenge were designers provided the concepts for how this application should look and work. You can take a look to the details of this application and the design challenge using this link:
https://www.topcoder.com/challenges/30061903/?type=design
MarvelApp Prototype Live Demo
https://marvelapp.com/3gd6b9i/
Final Submission Guidelines
Submission GuidelinesRequired Screens
1) Dashboard
- This screen have different hover behaviors and modals views. Please refer to this demo for the correct behavior:
https://marvelapp.com/3gd6b9i/screen/38199076
2) Create New Dataset
- Provide the forms with blank data as shown on this link:
https://marvelapp.com/3gd6b9i/screen/38199077
- “Population and Data Scope” is the default open accordion view.
3) Edit Dataset
- This screen can be accessed by clicking on “Edit button” from dashboard: take.ms/so4LA
- Reference this screen for content and behavior:
https://marvelapp.com/3gd6b9i/screen/38199078
- “Population and Data Scope” is the default open accordion view.
4) Configuration & Preview
- Follow this screen for content and behavior:
https://marvelapp.com/3gd6b9i/screen/38199083
Things to consider
- Top bar and navigation are fixed at top
- Provide the views for all modals on these Screens: Warning, Info, Success, etc.
- Layout is 1280px. Beyond this size will be fluid covering 100% of screen width. Less than 1280px is fixed.
- Full logo is image based. And clickable and deadlink. take.ms/h88Ps
- Logout red icon is not longer needed. So please remove this icon from the layout. Important
- All hover states should be done by reducing opacity at 90% Important
- Don’t need to code the back end functionality anywhere.
Target Devices
- Desktop Only: 1280px
Resources
- You can download all assets and resources for this challenge on this drive folder:
https://drive.google.com/open?id=1KBWQfGzYjHO72cX6ZT7y7Fkp_gAUF087
- Fonts are included there
Note: Source files are in Sketch.
- We created a Zeplin project were you can access the assets in case you don’t have Sketch app: zpl.io/a7ZlLAp
- You will need to request for invitation in forum once you register to this challenge.
Possible FAQs on this challenge
- This frontend prototype must be developed using Angular 2+. You must use latest version of Angular.
- You cannot use just simple HTML + CSS3 + Javascript on this challenge.
- You can also use HTML5 Framerworks such like Bootstrap or Foundation, but have in mind that you will need to overwrite several classes to match storyboards.
- You are allowed to use any Open Source Library / Plugin that allows you to match the designs as much as possible. Just remember to declare it on your declaration/readme file.
- All pages must be connected from top navigation to their respectives workflows. Important
- Try to match the storyboards as much as possible. If you any extra interactions, no need to code it.
- Storyboards and sources are not retina ready. So all icons and images can avoid retina behaviors.
- Provide clear class names on forms elements. This will help developers in future.
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.
- You are allowed to use SCSS/SASS for CSS Preprocessor.
- 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.
Browser Requirements
- Desktop: Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows). Try to provide the best behavior possible in IE11+, but don’t lose too much time fixing issues on this web browser.
- Mobile: Chrome / Safari for mobile browsers