Challenge Overview
Welcome to Eaton PX 2.0 Petting Zoo Material Design Code Challenge Series
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. The purpose of this project is to provide internal developers the exact same app on 7 different frameworks to serve as a working reference and learning tool.
These demo apps will serve as a foundation for future applications that will share a common set of core functionality.
Petting Zoo application must utilize the Material Design Components that are available for these frameworks:
1). AngularJS Material (JS)
https://github.com/angular/material
Start Date: 11/03/2017 10AM EDT
End Date: 11/13/2017 10AM EDT
Challenge Page: http://www.topcoder.com/challenge-details/30060272/?type=develop&noncache=true
2). iOS Material Design Components for iOS (MDC iOS)
https://github.com/material-components/material-components-ios/
Start Date: 11/03/2017 10AM EDT
End Date: 11/13/2017 10AM EDT
Challenge Page: http://www.topcoder.com/challenge-details/30060273/?type=develop&noncache=true
3). HTML Material Design Components for Web (MDC Web)
https://github.com/material-components/material-components-web
Start Date: 11/03/2017 10AM EDT
End Date: 11/13/2017 10AM EDT
Challenge Page: http://www.topcoder.com/challenge-details/30060274/?type=develop&noncache=true
4). React Material UI
https://github.com/callemall/material-ui
Start Date: 11/05/2017 10AM EDT
End Date: 11/15/2017 10AM EDT
Challenge Page: http://www.topcoder.com/challenge-details/30060276/?type=develop&noncache=true
5). Polymer Paper Components
https://github.com/PolymerElements/
Start Date: 11/05/2017 10AM EDT
End Date: 11/152017 10AM EDT
Challenge Page: http://www.topcoder.com/challenge-details/30060277/?type=develop&noncache=true
6). Android Material Design Components for Android (MDC Android)
https://github.com/material-components/material-components-android/
Start Date: 11/05/2017 10AM EDT
End Date: 11/15/2017 10AM EDT
Challenge Page: http://www.topcoder.com/challenge-details/30060279/?type=develop&noncache=true
7). Angular2 Material
https://github.com/angular/material2
Start Date: 11/05/2017 10AM EDT
End Date: 11/15/2017 10AM EDT
Challenge Page: http://www.topcoder.com/challenge-details/30060278/?type=develop&noncache=true
CHALLENGE SERIES RULES!!!
- Register for this challenge! we will keep you informed about the challenge going to launch with specific framework listed above
- There will be 2 - 3 challenges running at the same time. So, prepare your time!
- If there’s no participation on the challenge, we will keep relaunch until we get the winner of the specific framework.
- All of the challenge stated above will run as Code Challenge format.
- Details flow for each specific frameworks will explained on related challenge details.
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
These applications (for web) will need to be responsive from Desktop, Tablet down to Mobile size. Native apps should look appropriate for a variety of common mobile device resolutions.
This application will consist of a series of static screens (dynamic screens, working navigation, etc. will be considered additional functionality, but is not required).
Downloadable Files:
Google Drive: https://drive.google.com/open?id=0BxNVnWK-ZGA6d0VodHRqVC1rODg
General Submission Requirements
The following screens are required:
1). Splash Screen (Native Mobile Apps Only, web apps will start at the login page)
- This screen will consist of a large background image and a title indicating the name of the application
2). Login Screen(s)
- This page will have a large background image and fields for the user to enter a username and password
- There should also be a screen showing an error message that would appear following a failed login attempt
- There should also be a screen where users may register for a new account
3). Product Page(s)
- 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
- Items should be selectable
- Alternatively, a separate static page may be created showing a selected item
- When an item is selected, a details panel should appear
- The details panel will display a list of key-value pairs of data
- 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). Alerts Page(s)
- This page will present a group of expandable/collapsible panels
- Each panel will have a list of items
- The data for these lists should be pulled from the sample API provided (details below)
- The items on the page will be selectable
- Alternatively, a separate page may be created that illustrates the selected state
- 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
- When items are selected, a details panel should appear
- Alternatively, a separate static page may be created showing a selected item/details panel
Settings Page
- This page will show a group of panels used to group individual settings
- Each panel contains a list of settings
- The data for these settings should be pulled from the sample API provided (details below)
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).
NOTE ON THEMING - IMPORTANT
- 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.
PLATFORMS
Angular, AngularJS, React, Polymer, HTML, Android, iOS
FINAL SUBMISSION GUIDELINES
Please submit a zip file with all of the files required for your submission. Include a Readme file that details the files in your submission as well as instructions for building the solution.
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. The purpose of this project is to provide internal developers the exact same app on 7 different frameworks to serve as a working reference and learning tool.
These demo apps will serve as a foundation for future applications that will share a common set of core functionality.
Petting Zoo application must utilize the Material Design Components that are available for these frameworks:
1). AngularJS Material (JS)
https://github.com/angular/material
Start Date: 11/03/2017 10AM EDT
End Date: 11/13/2017 10AM EDT
Challenge Page: http://www.topcoder.com/challenge-details/30060272/?type=develop&noncache=true
2). iOS Material Design Components for iOS (MDC iOS)
https://github.com/material-components/material-components-ios/
Start Date: 11/03/2017 10AM EDT
End Date: 11/13/2017 10AM EDT
Challenge Page: http://www.topcoder.com/challenge-details/30060273/?type=develop&noncache=true
3). HTML Material Design Components for Web (MDC Web)
https://github.com/material-components/material-components-web
Start Date: 11/03/2017 10AM EDT
End Date: 11/13/2017 10AM EDT
Challenge Page: http://www.topcoder.com/challenge-details/30060274/?type=develop&noncache=true
4). React Material UI
https://github.com/callemall/material-ui
Start Date: 11/05/2017 10AM EDT
End Date: 11/15/2017 10AM EDT
Challenge Page: http://www.topcoder.com/challenge-details/30060276/?type=develop&noncache=true
5). Polymer Paper Components
https://github.com/PolymerElements/
Start Date: 11/05/2017 10AM EDT
End Date: 11/152017 10AM EDT
Challenge Page: http://www.topcoder.com/challenge-details/30060277/?type=develop&noncache=true
6). Android Material Design Components for Android (MDC Android)
https://github.com/material-components/material-components-android/
Start Date: 11/05/2017 10AM EDT
End Date: 11/15/2017 10AM EDT
Challenge Page: http://www.topcoder.com/challenge-details/30060279/?type=develop&noncache=true
7). Angular2 Material
https://github.com/angular/material2
Start Date: 11/05/2017 10AM EDT
End Date: 11/15/2017 10AM EDT
Challenge Page: http://www.topcoder.com/challenge-details/30060278/?type=develop&noncache=true
We are inviting all Topcoder developer experts in those different frameworks to construct applications that meet the specification described below.
CHALLENGE SERIES RULES!!!
- Register for this challenge! we will keep you informed about the challenge going to launch with specific framework listed above
- There will be 2 - 3 challenges running at the same time. So, prepare your time!
- If there’s no participation on the challenge, we will keep relaunch until we get the winner of the specific framework.
- All of the challenge stated above will run as Code Challenge format.
- Details flow for each specific frameworks will explained on related challenge details.
Final Submission Guidelines
CHALLENGE SERIES INTRODUCTIONPlease 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
These applications (for web) will need to be responsive from Desktop, Tablet down to Mobile size. Native apps should look appropriate for a variety of common mobile device resolutions.
This application will consist of a series of static screens (dynamic screens, working navigation, etc. will be considered additional functionality, but is not required).
Downloadable Files:
Google Drive: https://drive.google.com/open?id=0BxNVnWK-ZGA6d0VodHRqVC1rODg
General Submission Requirements
The following screens are required:
1). Splash Screen (Native Mobile Apps Only, web apps will start at the login page)
- This screen will consist of a large background image and a title indicating the name of the application
2). Login Screen(s)
- This page will have a large background image and fields for the user to enter a username and password
- There should also be a screen showing an error message that would appear following a failed login attempt
- There should also be a screen where users may register for a new account
3). Product Page(s)
- 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
- Items should be selectable
- Alternatively, a separate static page may be created showing a selected item
- When an item is selected, a details panel should appear
- The details panel will display a list of key-value pairs of data
- 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). Alerts Page(s)
- This page will present a group of expandable/collapsible panels
- Each panel will have a list of items
- The data for these lists should be pulled from the sample API provided (details below)
- The items on the page will be selectable
- Alternatively, a separate page may be created that illustrates the selected state
- 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
- When items are selected, a details panel should appear
- Alternatively, a separate static page may be created showing a selected item/details panel
Settings Page
- This page will show a group of panels used to group individual settings
- Each panel contains a list of settings
- The data for these settings should be pulled from the sample API provided (details below)
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).
NOTE ON THEMING - IMPORTANT
- 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.
PLATFORMS
Angular, AngularJS, React, Polymer, HTML, Android, iOS
FINAL SUBMISSION GUIDELINES
Please submit a zip file with all of the files required for your submission. Include a Readme file that details the files in your submission as well as instructions for building the solution.