Challenge Overview
Welcome to Topcoder Mobile - Connected Car Angular Web App - UI Update Code Challenge
We just received winning design from previous Topcoder Design challenge, this time we need your help to update our latest Angular Web app to get new look and feel. Read more details below
Let’s discuss any questions you have on challenge forum!
Code Requirements:
- Grab base of submission on Downloadable File on Challenge Details page
- fyi: this Angular app already support services to our REST API.
- 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.
- Follow Angular2 Styleguide when update 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
Design Source Files: https://drive.google.com/open?id=1eQnYADIN_3otdeaVIjFMDKInnEHLphR4
SUBMISSION REQUIREMENTS:
General Design
- For the new design look and feel, we need support the Web app to be easy to change the theme by modify single line of configuration
- Modifiable elements are:
-- App name,
-- Client name,
-- Client logo
-- Background image,
-- link color,
-- Button background color,
-- Active state of left side navigation
-- Anything else?
- Create separated CSS or image folder for different theme
- Compare different theme look here on Login page for example:
-- VW version: Screenshot: 01_1_login.png
-- Infiniti version: Screenshot: 01_3_login.png
-- GM version: Screenshot: 01_4_login.png
- Embed the font on your submission. Grab the font from here: https://www.fontsquirrel.com/fonts/open-sans
- Background image need covered whole browser screen.
- White box can use fixed width
1). Login
Screenshot: 01_1_login.png
- This is new Login page look and feel
- Content inside the box need use 2 columns layout
- On the left side, make sure Client logo and client name included as part of modifiable config
- Keep Email and password fields like existing app
- Have problem signing in can be dead link
- Follow the text color when user type the value on text input (Screenshot: 01_2_login.png)
2). Select Carrier
Screenshot: 02_1_select_carrier.png
- This is new screen need created on the app to Select the Carrier
- Active state on the icon navigation list will use blue color
- This icon navigation list should not able to change the page
- On the header, please put photo placeholder
- Grab First and Last Name from API
- Dealer text can be text placeholder
- Logout button need work like existing
- There are 4 buttons that are able to select
- Carrier selection from left to right are: T-Mobile, Sprint, AT&T and Verizon
- After select carrier need take user to the next Customer Lookup screen and update the 1st icon
3). Customer Lookup
Screenshot: 02_2_customer_lookup.png
- label T-Mobile need automatically updated based on selected carrier
- Validating icon/function is out of scope (Screenshot: 02_3_customer_lookup.png)
- Follow this is error message look and feel for any error validation (Screenshot: 02_4_customer_lookup.png)
- Notice there’s checkmark icon for correct format on mobile phone (Screenshot: 02_5_customer_lookup.png)
- Auto suggest will be out of challenge scope (Screenshot: 02_6_customer_lookup.png)
- Remove Previous button on app, ignore storyboard look
- Need able to press Enter or click Next button take user to next screen
4). Customer Info
Screenshot: 02_7_customer_info.png
- Display actual data based on current application
- Follow typography for each elements
- For car information you can use static data “Car Make” and “Car Model”
- Remove Previous button on app, ignore storyboard look
- Need able to press Enter or click Request PIN button take user to next screen
- Notice click the Cancel button on the left side need take user back to Carrier Selection screen
5). Enter PIN
Screenshot: 02_8_enter_pin.png
- Simulate pin expires for 60 seconds
- Request PIN need recall the create new PIN service
- Remove Previous button on app, ignore storyboard look
- Need able to press Enter or click Submit button take user to next screen
- Notice click the Cancel button on the left side need take user back to Carrier Selection screen
6). Confirmation
Screenshot: 02_9_activation_success.png
- Display the message for successful activation
- Need able to press Enter or click Done to return to new Carrier Selection screen
- 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.
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
We just received winning design from previous Topcoder Design challenge, this time we need your help to update our latest Angular Web app to get new look and feel. Read more details below
Let’s discuss any questions you have on challenge forum!
Code Requirements:
- Grab base of submission on Downloadable File on Challenge Details page
- fyi: this Angular app already support services to our REST API.
- 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.
- Follow Angular2 Styleguide when update 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
Design Source Files: https://drive.google.com/open?id=1eQnYADIN_3otdeaVIjFMDKInnEHLphR4
SUBMISSION REQUIREMENTS:
General Design
- For the new design look and feel, we need support the Web app to be easy to change the theme by modify single line of configuration
- Modifiable elements are:
-- App name,
-- Client name,
-- Client logo
-- Background image,
-- link color,
-- Button background color,
-- Active state of left side navigation
-- Anything else?
- Create separated CSS or image folder for different theme
- Compare different theme look here on Login page for example:
-- VW version: Screenshot: 01_1_login.png
-- Infiniti version: Screenshot: 01_3_login.png
-- GM version: Screenshot: 01_4_login.png
- Embed the font on your submission. Grab the font from here: https://www.fontsquirrel.com/fonts/open-sans
- Background image need covered whole browser screen.
- White box can use fixed width
1). Login
Screenshot: 01_1_login.png
- This is new Login page look and feel
- Content inside the box need use 2 columns layout
- On the left side, make sure Client logo and client name included as part of modifiable config
- Keep Email and password fields like existing app
- Have problem signing in can be dead link
- Follow the text color when user type the value on text input (Screenshot: 01_2_login.png)
2). Select Carrier
Screenshot: 02_1_select_carrier.png
- This is new screen need created on the app to Select the Carrier
- Active state on the icon navigation list will use blue color
- This icon navigation list should not able to change the page
- On the header, please put photo placeholder
- Grab First and Last Name from API
- Dealer text can be text placeholder
- Logout button need work like existing
- There are 4 buttons that are able to select
- Carrier selection from left to right are: T-Mobile, Sprint, AT&T and Verizon
- After select carrier need take user to the next Customer Lookup screen and update the 1st icon
3). Customer Lookup
Screenshot: 02_2_customer_lookup.png
- label T-Mobile need automatically updated based on selected carrier
- Validating icon/function is out of scope (Screenshot: 02_3_customer_lookup.png)
- Follow this is error message look and feel for any error validation (Screenshot: 02_4_customer_lookup.png)
- Notice there’s checkmark icon for correct format on mobile phone (Screenshot: 02_5_customer_lookup.png)
- Auto suggest will be out of challenge scope (Screenshot: 02_6_customer_lookup.png)
- Remove Previous button on app, ignore storyboard look
- Need able to press Enter or click Next button take user to next screen
4). Customer Info
Screenshot: 02_7_customer_info.png
- Display actual data based on current application
- Follow typography for each elements
- For car information you can use static data “Car Make” and “Car Model”
- Remove Previous button on app, ignore storyboard look
- Need able to press Enter or click Request PIN button take user to next screen
- Notice click the Cancel button on the left side need take user back to Carrier Selection screen
5). Enter PIN
Screenshot: 02_8_enter_pin.png
- Simulate pin expires for 60 seconds
- Request PIN need recall the create new PIN service
- Remove Previous button on app, ignore storyboard look
- Need able to press Enter or click Submit button take user to next screen
- Notice click the Cancel button on the left side need take user back to Carrier Selection screen
6). Confirmation
Screenshot: 02_9_activation_success.png
- Display the message for successful activation
- Need able to press Enter or click Done to return to new Carrier Selection screen
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.
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