Challenge Overview
Challenge Overview
Welcome to “Factory Fabric Angular UI Prototype Challenge”. On this challenge we are looking to create and develop the front end coding of this web application, using only desktop computers as target device. You need to use Angular 4.4.6 for this challenge.
Detailed Screen Requirements
Required Screens
1) Login/Register
- Please see "01_1_login.png" and "01_2_login.png" for reference.
- Please create the following user ID and password to test the validation:
- userID: admin
- Password: 123
- “Remember” and “Forgot password” are deadlinks
2) Factory Selection
- Please see from "02_1_Factory_selection.png" to "02_2_Factory_selection.png" for reference.
- Header is fixed at top
- “Notifications” icon and user avatar are deadlinks.
- “Logo” (Yellow texts on black circles) must be image based
- “Start typing factory name to filter” is a search bar. No dropdown/autocomplete features needed.
- “Recent updates” is a dropdown. Please fill it with the following options for now:
- Recent Updates
- # of projects less to more
- # of projects more to less
- Alphabetical A to Z
- Alphabetical A to A
- Clicking on any “Factory” takes to next screen “03_1_factory_landing.png”
- Loading more is just a label for now.
3) Factory Landing
- Please see from "03_1_factory_landing.png" to "03_3_factory_landing.png” for reference.
- Breadcrumb must be navigable
- You must provide an open source library for charts and graphs. D3.js or similar are allowed.
- You must match the provided styles on charts as much as possible
- Project Title on each row are clickables. I.e: http://take.ms/ZsZu5
- Clicking on each one takes to “04_project_summary.png”
- Clicking on “Factory Throughput” (take.ms/VjPQo) takes to “05_1_factory_throughput.png”
4) Project Summary
- Please see "04_project_summary.png" for reference.
- Breadcrumb must be navigable
- You must provide an open source library for charts and graphs. D3.js or similar are allowed.
- You must match the provided styles on charts as much as possible
- All avatars are clickable but deadlinks
- “Map” text is clickable but deadlink
- Calendar icon or date are not clickable
- “Burn Down” - “Velocity” - “Control”- “Cumulative Flow Diagram” are all tabs. Except first, please show empty tabs for others.
5) Factory Throughput
- Please see from "05_1_factory_throughput.png" to "05_2_factory_throughput.png" for reference.
- Breadcrumb must be navigable
- You must provide an open source library for charts and graphs. D3.js or similar are allowed.
- You must match the provided styles on charts as much as possible
Things to consider
- Top bar is fixed at top
- "Factory Fabric" logo is text only. Placeholder. Clickable and deadlink.
- Avatar and Notifications icon are clickables but deadlinks
Target Devices
- Desktop only
- Min width 1280px. Beyond that will be fluid covering 100% of the screen
Resources
- You can download all assets and resources for this challenge on this drive folder:
https://drive.google.com/open?id=1O40YMZuIboBE6XPHtnjgezwyN37XeY_Q
- Fonts are included there
Note: Source files are in Photoshop. (No sketch files or Zeplin will be provided)
Possible FAQs on this challenge
- You should use Angular 4.4.6 + CSS3 + Javascript on this challenge.
- You can also use HTML5 Frameworks 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 to their respectives workflows. Important
- Try to match the storyboards as much as possible.
- 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). For IE11+ try to match as much as possible. If some small styles looks different, don’t lost too much time on fixing it.
- Mobile: Chrome / Safari for mobile browsers
Final Submission Guidelines
- UI Prototype source code
- Create README.md file that explains your UI Prototype submission structure and commands.
- Create clear documentation to set-up your submission locally and on Herokuapp.
- Also, you must put your submission on Heroku for client review. Include the link on your README.md