Challenge Overview
Welcome to Topcoder Mobile - Connected Car Angular2+ Web App Code Challenge
For this challenge we need you to build the Topcoder Mobile - Connected Car as Angular2 application based on provided storyboard design
Let’s discuss any questions you have on challenge forum!
Angular2 Requirements:
- You must use Angular for this challenge submission: https://angular.io/
- You can choose some Angular2+ seed to help you build your submission
- Angular2+ 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.
- Stick with Angular2+ Styleguide when building this challenge submission: https://angular.io/guide/styleguide
- Please ask in the forums if you wish to use any open-source third-party libs to ensure there are no license violations
Downloadable Files:
- Google Drive: https://drive.google.com/open?id=17clt5LONPpklSmZ537qZwnCgh-F_J0uG
- Please follow this MarvelApp Handoff to measure the elements in page: https://marvelapp.com/7h0d95e/screen/38052720/handoff
SUBMISSION REQUIREMENTS:
Create a Web app using Angular2+ that has the following pages:
1). Login
- login - auth should be handled with Auth0. No pages should be accessible unless logged in through Auth0
2). Customer Lookup
customer-lookup - single form which accepts two inputs, Phone and Email, with a button for submit and a button to cancel (Submit button does not need to function - just goes to next page, Send PIN). Cancel button should clear input fields.
3). Send PIN
send-pin - displays results of customer-lookup as two fields, FirstName & LastName (You can set default value for these as “Customer” & “Name” since we won’t be getting any data yet). There should be a button for Send PIN and a button to cancel (Send Pin button does not need to function in this iteration - should just go to next page, Enter PIN). Cancel button should go back to customer-lookup
4). Enter PIN
enter-pin - single text field to accept 4 digit PIN and button for submit and a button to cancel (Submit button does not need to function in this iteration - should just go to next page). Cancel button should go back to customer-lookup
5). Confirmation
confirmation - Displays message “Customer Provisioning is Complete” with button to go back to customer-lookup
- 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
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 Angular2 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.
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
For this challenge we need you to build the Topcoder Mobile - Connected Car as Angular2 application based on provided storyboard design
Let’s discuss any questions you have on challenge forum!
Angular2 Requirements:
- You must use Angular for this challenge submission: https://angular.io/
- You can choose some Angular2+ seed to help you build your submission
- Angular2+ 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.
- Stick with Angular2+ Styleguide when building this challenge submission: https://angular.io/guide/styleguide
- Please ask in the forums if you wish to use any open-source third-party libs to ensure there are no license violations
Downloadable Files:
- Google Drive: https://drive.google.com/open?id=17clt5LONPpklSmZ537qZwnCgh-F_J0uG
- Please follow this MarvelApp Handoff to measure the elements in page: https://marvelapp.com/7h0d95e/screen/38052720/handoff
SUBMISSION REQUIREMENTS:
Create a Web app using Angular2+ that has the following pages:
1). Login
- login - auth should be handled with Auth0. No pages should be accessible unless logged in through Auth0
2). Customer Lookup
customer-lookup - single form which accepts two inputs, Phone and Email, with a button for submit and a button to cancel (Submit button does not need to function - just goes to next page, Send PIN). Cancel button should clear input fields.
3). Send PIN
send-pin - displays results of customer-lookup as two fields, FirstName & LastName (You can set default value for these as “Customer” & “Name” since we won’t be getting any data yet). There should be a button for Send PIN and a button to cancel (Send Pin button does not need to function in this iteration - should just go to next page, Enter PIN). Cancel button should go back to customer-lookup
4). Enter PIN
enter-pin - single text field to accept 4 digit PIN and button for submit and a button to cancel (Submit button does not need to function in this iteration - should just go to next page). Cancel button should go back to customer-lookup
5). Confirmation
confirmation - Displays message “Customer Provisioning is Complete” with button to go back to customer-lookup
Final Submission Guidelines
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
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 Angular2 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.
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