Challenge Overview
Welcome to Eaton PX 2.0 Petting Zoo Material Design - AngularJS Code Challenge
This is challenge series of Eaton PX 2.0 Petting Zoo application using Material Design styling. We are looking to develop a series of demo applications that will provide the same look and feel and functionality across a variety of different Javascript frameworks. These demo apps will serve as a foundation for future applications that will share a common set of core functionality. These applications must utilize the Material Design Components that are available for these specific frameworks like AngularJS, ReactJS, Polymer, MDC Web, iOS, & Android.
For this challenge we need you to build the Eaton PX 2.0 Petting Zoo by using Angular Material JS https://github.com/angular/material
Let’s discuss any questions you have on challenge forum!
- You must use AngularJS v1 for this challenge submission: https://angularjs.org/
- You must use this AngularJS Framework: https://github.com/angular/material
- Get familiar with existing AngularJS Framework components: https://material.angularjs.org/latest/
- You can choose some AngularJS seed to help you build your submission
- AngularJS Components must be re-usable. Components data should be populated based on the configuration. Configuration file to contain the required configurations required to render the pages.
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
Using the Sample API
- We will be making use of json-server (https://www.npmjs.com/package/json-server) to populate data in the demo applications. We will provide a sample database in JSON format.
- The data will be available by running "npx json-server /PATH_TO/db.json".
- See the link above for specific instructions on setting up json-server (NOTE: requires NPM version > 5.2.0).
IMPORTANT! NOTE ON THEMING
- This application will consist of a series of static screens (dynamic screens, working navigation, etc. will be considered additional functionality, but is not required).
- This challenge submission need to be responsive from desktop, tablet down to mobile size.
- Suggest the best practices web responsive breakpoint for each devices.
- Responsive solution must achieved via CSS Media Query. DO NOT create different HTML set for the same page.
- Icons are used in various places throughout the UI. Please make use of Material Icons (https://google.github.io/material-design-icons/#icon-images-for-the-web) as needed. We would prefer an implementation using the icon font, rather than svg, where possible.
- Use SCSS/SASS for the submission styling - NOTE: this should be minimal (See below)
- We will be developing our own theme files internally to handle the final look and feel of these applications.
- Our expectation is for developers to use the default theme provided in each of the frameworks, understanding that the final look and feel will not match exactly with the designs that we have provided.
- We do NOT want developers adding inline styles, etc. to try to exactly replicate the designs provided.
FINAL SUBMISSION GUIDELINES
- Create clear documentation about how to set up your submission locally and on Heroku.
- Upload your submission to Heroku for client review, Include the link on your README.md
Downloadable Files:
Google Drive: https://drive.google.com/open?id=0BxNVnWK-ZGA6d0VodHRqVC1rODg
SUBMISSION REQUIREMENTS:
A). MOBILE VERSION
- Please refer to the included visual designs for the desired appearance of the application (a clickable prototype for the mobile app can be found at the following link: https://eaton.invisionapp.com/share/JGE83N24N
- For screen flow below, please refer to provided Design resources on Google Drive.
1). Login
Screen: 01-Sign In.png
- This is default screen look for the Login page
- Logo placeholder placed on top
- Email Address & Password are the only form fields
- Remember me should be checked by default
- Login button need to be disabled by default
- Request Access & Forgot button are text links
- CyberSecurity is image based
- Footer display some information about Terms & Privacy
- This screen is after user click on Login button, display error validation (Screen: 02-Sign In Missing Field.png)
- User start typing (Screen: 03-Sign In Keyboard.png)
- Value inserted to both fields (Screen: 04-Sign In Info Entered.png)
- Display modal window when incorrect password entered (Screen: 05-Sign In Fail.png)
- Create sample credentials data for login
- After login success need take user Products page
2). Products
- User landed to this screen after logged in (Screen: 06-Products Page v1.png)
- This page will present a group of cards
- The data for the cards should be pulled from the sample API provided (details below).
- Each card will contain a list of items
- Each card has an actions menu with options to add/remove items from the list, change sort, etc.
- These actions in the menu do not need to be functional
- This modal show up when click the 3dots button on the header bar (Screen: 07-Products Page Menu.png)
- Click checkbox need highlight the row and options bar show up on the bottom of screen (Screen: 08-Products Page v2 On Click.png)
- Alternatively, a separate static page may be created showing a selected item
- Click the arrow need display the details page
3). Products Details
Screen: 09-Products Page v4.png
- This is Product details screen for mobile screen
- Important: For Desktop/Tablet version, we need this Product screen displayed in same page.
- The details panel will display a list of key-value pairs of data
- Back arrow need take user back to Products page
- Match the icon on header bar
- Click the 3dots need display this options (Screen: 10-Products Page v4 Popup Menu.png)
- Click one of the option take user back to Product page with this message shows up (Screen: 11-Products Page v5.png)
- Click Dismiss button need hide the message
- This data should be pulled from the sample API provided (details below)
- The graphs/charts in the mockup may be replaced with static images for the demo (provided)
4). Navigation Drawer
Screen: 12-Navigation Drawer v2.png
- For mobile screen, need display drawer for mobile
- Set active state when navigate to Alerts or Products page
- Important: For Desktop/Tablet version, we no need the drawer, just need displayed the left sidebar icon
5). Alarms
Screen: 13-Dashboard List #2.png
- User landed to this page after click Alert menu on main navigation
- This page will present a group of expandable/collapsible panels. User need click the “Past 2 hours” for example to expand/toggle the panel
- Each panel will have a list of items
- The data for these lists should be pulled from the sample API provided (details below)
- The page will have a toolbar with actions that can be taken on the selected items (sort, filter, etc.)
- These do not need to be functional
- Options menu show up after click the 3dots on the header bar (Screen: 14-Menu.png)
- This options show up after click 3dots on the row (Screen: 15-Dashboard List #2 Menu Open.png)
- Click Connected Devices take user to Setting page explained below
- Selected checkbox need highlight the arrow and display the options bar on the bottom (Screen: 16-Dashboard List #3 1 Select.png)
- This is after user select on another row (Screen: 17-Dashboard List #3.png)
- This screen show up after user click 3dots button on selected row (Screen: 18-Dashboard List #3 1 Select Menu Open.png)
- After click some options need display success message (Screen: 19-Dashboard List #5.png)
- This screen show up after click the checkmark button after user selected 2 rows (Screen: 20-Dashboard List #New.png)
- Click Dismiss button need hide the banner
6). Alarms Detail
Screen: 21-Side Panel Stats v6.png
- This is Alarm details screen for mobile screen
- Important: For Desktop/Tablet version, we need this Details screen displayed in same page.
- This data should be pulled from the sample API provided (details below)
- The graphs/charts in the mockup may be replaced with static images for the demo (provided)
7). Settings
Screen: 22-Menu Settings Drill Down.png
- This is Connected Devices screen look
- User landed on this screen after click Connected Devices take user to Setting page explained below
- Display the checkboxes and slider on the page, based on the data in the Sample API provided
B). DESKTOP VERSION
- All screen flow below please refer to provided Design resources on Google Drive.
- Desktop version need use fluid width as browser screen size
1). Login
Screen: 01-Desktop Sign In.png
- This is how Login screen look for Desktop
- Use blue background
- Login form need displayed centered
- Re-use existing flow like on mobile
2). Products
Screen: 02-Desktop Products.png
- For desktop screen, we need display header bar with title on top
- Left sidebar can collapse to display icon based for menu navigation, but should default to the full size as in mobile mockups.
- Display active state when navigate to different page
3). Products Details
Screen: 03-Desktop Products Details.png
- For Desktop view, select the row need show up the details on the right side
- Click the X button need hide the details
4). Alarms
Screen: 04-Desktop Alarms.png
- This is Alarms page look like
- Notice there’s toolbar on top of Alarms page
- By default Alarm page need working like Product page
- Select the checkbox need show the Alarms details
- Click x button need hide the sidebar
- Click the 3dots on top need show up the option (Screen: 05-Desktop Alarms Menus.png)
5). Settings
Screen: 06-Settings.png
- User landed to this screen after click the Connected Devices button
C). TABLET VERSION
- No storyboard screens provided, you can use fluid version of desktop to build the tablet look
- Let us know if need some clarification when you adjust the content for Tablet layout
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
- Put clear comment/documentation for all Javascript 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 icon font for icons, as appropriate
- If any icons are missing, use any suitable replacement as a placeholder
Web Browsers Requirements
- IE11 on Desktop
- Microsoft Edge on Desktop
- Firefox latest version on Desktop
- Safari latest version on Desktop
- Chrome latest version on Desktop
- Safari on iPad
- Chrome on iPad
- Safari on iPhone
- Chrome on iPhone
This is challenge series of Eaton PX 2.0 Petting Zoo application using Material Design styling. We are looking to develop a series of demo applications that will provide the same look and feel and functionality across a variety of different Javascript frameworks. These demo apps will serve as a foundation for future applications that will share a common set of core functionality. These applications must utilize the Material Design Components that are available for these specific frameworks like AngularJS, ReactJS, Polymer, MDC Web, iOS, & Android.
For this challenge we need you to build the Eaton PX 2.0 Petting Zoo by using Angular Material JS https://github.com/angular/material
Let’s discuss any questions you have on challenge forum!
Final Submission Guidelines
AngularJS Requirements:- You must use AngularJS v1 for this challenge submission: https://angularjs.org/
- You must use this AngularJS Framework: https://github.com/angular/material
- Get familiar with existing AngularJS Framework components: https://material.angularjs.org/latest/
- You can choose some AngularJS seed to help you build your submission
- AngularJS Components must be re-usable. Components data should be populated based on the configuration. Configuration file to contain the required configurations required to render the pages.
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
Using the Sample API
- We will be making use of json-server (https://www.npmjs.com/package/json-server) to populate data in the demo applications. We will provide a sample database in JSON format.
- The data will be available by running "npx json-server /PATH_TO/db.json".
- See the link above for specific instructions on setting up json-server (NOTE: requires NPM version > 5.2.0).
IMPORTANT! NOTE ON THEMING
- This application will consist of a series of static screens (dynamic screens, working navigation, etc. will be considered additional functionality, but is not required).
- This challenge submission need to be responsive from desktop, tablet down to mobile size.
- Suggest the best practices web responsive breakpoint for each devices.
- Responsive solution must achieved via CSS Media Query. DO NOT create different HTML set for the same page.
- Icons are used in various places throughout the UI. Please make use of Material Icons (https://google.github.io/material-design-icons/#icon-images-for-the-web) as needed. We would prefer an implementation using the icon font, rather than svg, where possible.
- Use SCSS/SASS for the submission styling - NOTE: this should be minimal (See below)
- We will be developing our own theme files internally to handle the final look and feel of these applications.
- Our expectation is for developers to use the default theme provided in each of the frameworks, understanding that the final look and feel will not match exactly with the designs that we have provided.
- We do NOT want developers adding inline styles, etc. to try to exactly replicate the designs provided.
FINAL SUBMISSION GUIDELINES
- Create clear documentation about how to set up your submission locally and on Heroku.
- Upload your submission to Heroku for client review, Include the link on your README.md
Downloadable Files:
Google Drive: https://drive.google.com/open?id=0BxNVnWK-ZGA6d0VodHRqVC1rODg
SUBMISSION REQUIREMENTS:
A). MOBILE VERSION
- Please refer to the included visual designs for the desired appearance of the application (a clickable prototype for the mobile app can be found at the following link: https://eaton.invisionapp.com/share/JGE83N24N
- For screen flow below, please refer to provided Design resources on Google Drive.
1). Login
Screen: 01-Sign In.png
- This is default screen look for the Login page
- Logo placeholder placed on top
- Email Address & Password are the only form fields
- Remember me should be checked by default
- Login button need to be disabled by default
- Request Access & Forgot button are text links
- CyberSecurity is image based
- Footer display some information about Terms & Privacy
- This screen is after user click on Login button, display error validation (Screen: 02-Sign In Missing Field.png)
- User start typing (Screen: 03-Sign In Keyboard.png)
- Value inserted to both fields (Screen: 04-Sign In Info Entered.png)
- Display modal window when incorrect password entered (Screen: 05-Sign In Fail.png)
- Create sample credentials data for login
- After login success need take user Products page
2). Products
- User landed to this screen after logged in (Screen: 06-Products Page v1.png)
- This page will present a group of cards
- The data for the cards should be pulled from the sample API provided (details below).
- Each card will contain a list of items
- Each card has an actions menu with options to add/remove items from the list, change sort, etc.
- These actions in the menu do not need to be functional
- This modal show up when click the 3dots button on the header bar (Screen: 07-Products Page Menu.png)
- Click checkbox need highlight the row and options bar show up on the bottom of screen (Screen: 08-Products Page v2 On Click.png)
- Alternatively, a separate static page may be created showing a selected item
- Click the arrow need display the details page
3). Products Details
Screen: 09-Products Page v4.png
- This is Product details screen for mobile screen
- Important: For Desktop/Tablet version, we need this Product screen displayed in same page.
- The details panel will display a list of key-value pairs of data
- Back arrow need take user back to Products page
- Match the icon on header bar
- Click the 3dots need display this options (Screen: 10-Products Page v4 Popup Menu.png)
- Click one of the option take user back to Product page with this message shows up (Screen: 11-Products Page v5.png)
- Click Dismiss button need hide the message
- This data should be pulled from the sample API provided (details below)
- The graphs/charts in the mockup may be replaced with static images for the demo (provided)
4). Navigation Drawer
Screen: 12-Navigation Drawer v2.png
- For mobile screen, need display drawer for mobile
- Set active state when navigate to Alerts or Products page
- Important: For Desktop/Tablet version, we no need the drawer, just need displayed the left sidebar icon
5). Alarms
Screen: 13-Dashboard List #2.png
- User landed to this page after click Alert menu on main navigation
- This page will present a group of expandable/collapsible panels. User need click the “Past 2 hours” for example to expand/toggle the panel
- Each panel will have a list of items
- The data for these lists should be pulled from the sample API provided (details below)
- The page will have a toolbar with actions that can be taken on the selected items (sort, filter, etc.)
- These do not need to be functional
- Options menu show up after click the 3dots on the header bar (Screen: 14-Menu.png)
- This options show up after click 3dots on the row (Screen: 15-Dashboard List #2 Menu Open.png)
- Click Connected Devices take user to Setting page explained below
- Selected checkbox need highlight the arrow and display the options bar on the bottom (Screen: 16-Dashboard List #3 1 Select.png)
- This is after user select on another row (Screen: 17-Dashboard List #3.png)
- This screen show up after user click 3dots button on selected row (Screen: 18-Dashboard List #3 1 Select Menu Open.png)
- After click some options need display success message (Screen: 19-Dashboard List #5.png)
- This screen show up after click the checkmark button after user selected 2 rows (Screen: 20-Dashboard List #New.png)
- Click Dismiss button need hide the banner
6). Alarms Detail
Screen: 21-Side Panel Stats v6.png
- This is Alarm details screen for mobile screen
- Important: For Desktop/Tablet version, we need this Details screen displayed in same page.
- This data should be pulled from the sample API provided (details below)
- The graphs/charts in the mockup may be replaced with static images for the demo (provided)
7). Settings
Screen: 22-Menu Settings Drill Down.png
- This is Connected Devices screen look
- User landed on this screen after click Connected Devices take user to Setting page explained below
- Display the checkboxes and slider on the page, based on the data in the Sample API provided
B). DESKTOP VERSION
- All screen flow below please refer to provided Design resources on Google Drive.
- Desktop version need use fluid width as browser screen size
1). Login
Screen: 01-Desktop Sign In.png
- This is how Login screen look for Desktop
- Use blue background
- Login form need displayed centered
- Re-use existing flow like on mobile
2). Products
Screen: 02-Desktop Products.png
- For desktop screen, we need display header bar with title on top
- Left sidebar can collapse to display icon based for menu navigation, but should default to the full size as in mobile mockups.
- Display active state when navigate to different page
3). Products Details
Screen: 03-Desktop Products Details.png
- For Desktop view, select the row need show up the details on the right side
- Click the X button need hide the details
4). Alarms
Screen: 04-Desktop Alarms.png
- This is Alarms page look like
- Notice there’s toolbar on top of Alarms page
- By default Alarm page need working like Product page
- Select the checkbox need show the Alarms details
- Click x button need hide the sidebar
- Click the 3dots on top need show up the option (Screen: 05-Desktop Alarms Menus.png)
5). Settings
Screen: 06-Settings.png
- User landed to this screen after click the Connected Devices button
C). TABLET VERSION
- No storyboard screens provided, you can use fluid version of desktop to build the tablet look
- Let us know if need some clarification when you adjust the content for Tablet layout
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
- Put clear comment/documentation for all Javascript 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 icon font for icons, as appropriate
- If any icons are missing, use any suitable replacement as a placeholder
Web Browsers Requirements
- IE11 on Desktop
- Microsoft Edge on Desktop
- Firefox latest version on Desktop
- Safari latest version on Desktop
- Chrome latest version on Desktop
- Safari on iPad
- Chrome on iPad
- Safari on iPhone
- Chrome on iPhone