Challenge Overview
Welcome to Quickpath Webapp Prototype Challenge.
We need your help to bring to life this interesting project. It has a live edition tool that allows user to interact with nodes by dragging & dropping elements into a specific area. Time to show the magic!
Best of luck!
Project Overview
The goal of this challenge is to develop HTML/CSS/JS code for building a prototype which will be powered by AngularJS 1.5.8. This means that you must exactly use AngularJS 1.5.8 version in your solution already. By the end of the challenge we expect to have a very clean, lean scaffolded project.
You are provided with the storyboards screens and source files which you’ll use to build up the working prototype.
Prototype Requirements
Overall
- All screens provided in the storyboard are in scope.
- Your prototype must match them, in look and functionality.
- Charts from dashboard must be rendered using D3.js with data from a JSON file.
- You can use browser's default scrollbars.
- Use Bootstrap to implement styles (mandatory).
- Optional: read design challenge specifications to know more details about the concept.
1. Dashboard
See 01 Dashboard screen file.
2. Blueprints
See 02 and 03 Blueprint screen files.
Search functionality is out of scope. HTML/CSS markup must be there.
Clicking “Create New” in 02 opens screen 03.
Clicking “Add +” in 03 creates a new row with “Name”, “Default Value”, etc.
Clicking “Delete” in 03 should open a dialog box to confirm deletion with action buttons (yes/no, cancel/delete, etc). It’s not designed but use something similar to the existing dialog boxes across the design (see screen 25).
Clicking “Create” in 03 opens 05 Design Studio.
3. Design Studio
See from 05 to 32 screen files.
Widgets search functionalities are out of scope. Please remove those search icons.
Panels are collapsable/expandable. Their width is fixed. Content width in the middle/canvas is auto.
Clicking “Show Grids” / “Show Guides” should toggle the visibility of the grid (gray squares) and the hints (notes that show up while dragging/moving nodes) respectively.
All UI data for this section must be pulled/save from a JSON file (create your own structure).
Studio (interactive tool)
User should be able to drag any of the items on the Widgets Library. Nodes automatically stick to the grid squares, meaning they can not be placed anywhere outside those containers. Once the user adds the node in the canvas, a replica is added to the Project Library panel with the name of the node or entered by the user.
Entry and exit nodes are placed in the canvas by default on any new blueprint.
User can move nodes to any other grid spot. User can select one or multiple nodes to move. Nodes selected by the user get highlighted on the Project Library panel.
User can arrange nodes in the Project Library by dragging.
Router node should be square once dragged to the canvas. There is a design error that displays it incorrectly.
Node Form
Nodes can be connected among each other with arrows. Each node offers options once clicked (see screen 12). If “+” is clicked user gets to connect the nodes throw an arrow. If “x” is clicked the node is delete (after previous dialog confirmation - create one).
Nodes have a details form to be edited. This form activates from the Project Library panel (clicking a node - screen 19) or if “edit” is clicked from a node in the canvas (screen 12). All fields in screen 19 should be editable.
Clicking “Add New +” from the parameters should open the Template Builder form (screen 21). Clicking “Add New +” button from any of the other sections should insert a new row with the same data structure.
Clicking “Validate” should open screen 20. It’s a selectable code section, read-only.
Entry and exit nodes have specific configuration forms. See screens 23 and 24 respectively.
Delete save&continue button from this form.
Delete readme row from this form.
Template Builder
See screen 21.
User can select/deselect commands from the available list - one at a time.
Parameters are toggled to appear/disappear when selected/unselected.
“Action” is a dropdown of options.
The black area on the left is a read-only space but user can copy that text. Parameters added/deleted must be reflected on this area.
Blueprint Validor
See screen 27.
Dark json areas are read-only (selectable to copy).
Clicking “Expand” should open a larger screen with the response.
Clicking “Add New Input” should add a new row of items (editable). Parameters on the left dark area populate automatically with the inputs. Clicking the “X” deletes the input (also reflected in the left JSON area).
Clicking “Run Blueprint” should open the timeline (screen 29).
JSON area from the left size is expandable when dragged.
Timeline
See from screen 29 to 31.
Hovering on a node should display a tooltip with info.
Timeline must scroll horizontally only.
Filter functionality is out of scope. HTML/CSS markup must be in place.
Documentation
See screen 29.
On the left side user writes plain text. On the right side has a live preview of markdown content.
4. Deployment
See 04 Deployment screen file.
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 MUST use Bootstrap (mandatory).
- You are allowed to use SCSS in the project.
- 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.
- Mobile not supported, not required.
- Must support retina display.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
We need your help to bring to life this interesting project. It has a live edition tool that allows user to interact with nodes by dragging & dropping elements into a specific area. Time to show the magic!
Best of luck!
Project Overview
The goal of this challenge is to develop HTML/CSS/JS code for building a prototype which will be powered by AngularJS 1.5.8. This means that you must exactly use AngularJS 1.5.8 version in your solution already. By the end of the challenge we expect to have a very clean, lean scaffolded project.
You are provided with the storyboards screens and source files which you’ll use to build up the working prototype.
Prototype Requirements
Overall
- All screens provided in the storyboard are in scope.
- Your prototype must match them, in look and functionality.
- Charts from dashboard must be rendered using D3.js with data from a JSON file.
- You can use browser's default scrollbars.
- Use Bootstrap to implement styles (mandatory).
- Optional: read design challenge specifications to know more details about the concept.
1. Dashboard
See 01 Dashboard screen file.
2. Blueprints
See 02 and 03 Blueprint screen files.
Search functionality is out of scope. HTML/CSS markup must be there.
Clicking “Create New” in 02 opens screen 03.
Clicking “Add +” in 03 creates a new row with “Name”, “Default Value”, etc.
Clicking “Delete” in 03 should open a dialog box to confirm deletion with action buttons (yes/no, cancel/delete, etc). It’s not designed but use something similar to the existing dialog boxes across the design (see screen 25).
Clicking “Create” in 03 opens 05 Design Studio.
3. Design Studio
See from 05 to 32 screen files.
Widgets search functionalities are out of scope. Please remove those search icons.
Panels are collapsable/expandable. Their width is fixed. Content width in the middle/canvas is auto.
Clicking “Show Grids” / “Show Guides” should toggle the visibility of the grid (gray squares) and the hints (notes that show up while dragging/moving nodes) respectively.
All UI data for this section must be pulled/save from a JSON file (create your own structure).
Studio (interactive tool)
User should be able to drag any of the items on the Widgets Library. Nodes automatically stick to the grid squares, meaning they can not be placed anywhere outside those containers. Once the user adds the node in the canvas, a replica is added to the Project Library panel with the name of the node or entered by the user.
Entry and exit nodes are placed in the canvas by default on any new blueprint.
User can move nodes to any other grid spot. User can select one or multiple nodes to move. Nodes selected by the user get highlighted on the Project Library panel.
User can arrange nodes in the Project Library by dragging.
Router node should be square once dragged to the canvas. There is a design error that displays it incorrectly.
Node Form
Nodes can be connected among each other with arrows. Each node offers options once clicked (see screen 12). If “+” is clicked user gets to connect the nodes throw an arrow. If “x” is clicked the node is delete (after previous dialog confirmation - create one).
Nodes have a details form to be edited. This form activates from the Project Library panel (clicking a node - screen 19) or if “edit” is clicked from a node in the canvas (screen 12). All fields in screen 19 should be editable.
Clicking “Add New +” from the parameters should open the Template Builder form (screen 21). Clicking “Add New +” button from any of the other sections should insert a new row with the same data structure.
Clicking “Validate” should open screen 20. It’s a selectable code section, read-only.
Entry and exit nodes have specific configuration forms. See screens 23 and 24 respectively.
Delete save&continue button from this form.
Delete readme row from this form.
Template Builder
See screen 21.
User can select/deselect commands from the available list - one at a time.
Parameters are toggled to appear/disappear when selected/unselected.
“Action” is a dropdown of options.
The black area on the left is a read-only space but user can copy that text. Parameters added/deleted must be reflected on this area.
Blueprint Validor
See screen 27.
Dark json areas are read-only (selectable to copy).
Clicking “Expand” should open a larger screen with the response.
Clicking “Add New Input” should add a new row of items (editable). Parameters on the left dark area populate automatically with the inputs. Clicking the “X” deletes the input (also reflected in the left JSON area).
Clicking “Run Blueprint” should open the timeline (screen 29).
JSON area from the left size is expandable when dragged.
Timeline
See from screen 29 to 31.
Hovering on a node should display a tooltip with info.
Timeline must scroll horizontally only.
Filter functionality is out of scope. HTML/CSS markup must be in place.
Documentation
See screen 29.
On the left side user writes plain text. On the right side has a live preview of markdown content.
4. Deployment
See 04 Deployment screen file.
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 MUST use Bootstrap (mandatory).
- You are allowed to use SCSS in the project.
- 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.
- Mobile not supported, not required.
- Must support retina display.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).