Challenge Overview
Welcome to Living Progress - WWF - AngularJS Conversion UI Prototype Challenge
The main task of this project is to convert existing Living Progress - WWF UI Prototype into Single Page Application by using AngularJS framework.
This challenge is part of the HPE Living Progress Challenge Blitz Program. Read more details information explained below and let’s discuss any questions you have.
General Tasks
- Convert existing UI Prototype into AngularJS SPA with best practice
- You must use Angular Version 1.5 for this challenge, grab from this site: http://angularjs.org
- You must follow John Papa Angular Styleguide from this github
- Or you can use this eslint plugin to stick with John Papa Angular Styleguide
- Use NPM or Bower for Library Package Manager. DO NOT just put raw javascript library inside your prototype
- Use SCSS for CSS Pre-Processor
- Data for each pages need loaded from JSON files.
- Before you submit make sure your converted AngularJS prototype identical with existing prototype.
- Double check your code, make sure there’s no error code after you converted to AngularJS
- Create AngularJS Services to pull all data from JSON
- Create Controller that use proper naming with existing pages
- When navigate between pages, create preloader
- Make sure Components re-usable on different pages
- Create Unit Test to make sure there are no error on your AngularJS services
- Create documentation to set-up your submission, please describe everything as details as possible.
- Put clear comment for all AngularJS elements.
- Let’s discuss if you have some suggestions!
1). Homepage
- Main Navigation menu and target need loaded from JSON or your Angular controller
- Homepage data follow how data displayed from existing prototype
- Click Login button then modal window shows up
- Create proper login implementation from AngularJS
- Validation error must works
- Create some dummy username/password for testing
2). Dashboard
- You need build correct search function when click search. Create some dummy data
- After click search need displayed correct information for all boxes below
3). Search Data
- Need able to select values from existing data
- Click Run Query will take user to the search data result (Data Comparison Details)
- Search data need able capture correct information from JSON files
- You might need create some dummy data so user can search more data
4) Data Comparison Details
- From the Filter area, user can filter data after select some options and click Apply button
- On map, when user start dragging the slider, you need show up different dots on map.
- Make sure line chart displayed correct data from JSON file
- On table need able to sort up/down the table
- Change year need load different year. And need reflect to Year
5). Search Alert
- Search result show up in the bottom after user click Run query button
- Create data via JSON file for all Alert
- Click on Alert name will take user to Detail page
- Re-use attached sample data of TradeAlert.json for your AngularJS prototype
6). Alert Detail Page
- On map, when user start dragging the slider, you need show up different dots on map.
- Make sure line chart displayed correct data from JSON file
- Comment listing displayed on the bottom
- Re-use attached sample data of TradeAlertDetail.json for your AngularJS prototype
7). Query List
- Filter function must works for this screen
- Create some sample data for Query list
- My Query and As Collaborator need displayed from different data source
8). Profile Page
- Account and Contact Information need load from JSON
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient AngularJS application that works in all the requested browsers.
- Consistency with existing UI Prototype
- Matching the storyboards (as close as possible) across the required browsers.
- Best Practice AngularJS code
CODE REQUIREMENTS:
HTML/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.
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.
CSS3
- 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
- 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
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
The main task of this project is to convert existing Living Progress - WWF UI Prototype into Single Page Application by using AngularJS framework.
This challenge is part of the HPE Living Progress Challenge Blitz Program. Read more details information explained below and let’s discuss any questions you have.
Final Submission Guidelines
HP-LP-WWF-Detect-IT.zip - Prototype need converted to AngularJS applicationGeneral Tasks
- Convert existing UI Prototype into AngularJS SPA with best practice
- You must use Angular Version 1.5 for this challenge, grab from this site: http://angularjs.org
- You must follow John Papa Angular Styleguide from this github
- Or you can use this eslint plugin to stick with John Papa Angular Styleguide
- Use NPM or Bower for Library Package Manager. DO NOT just put raw javascript library inside your prototype
- Use SCSS for CSS Pre-Processor
- Data for each pages need loaded from JSON files.
- Before you submit make sure your converted AngularJS prototype identical with existing prototype.
- Double check your code, make sure there’s no error code after you converted to AngularJS
- Create AngularJS Services to pull all data from JSON
- Create Controller that use proper naming with existing pages
- When navigate between pages, create preloader
- Make sure Components re-usable on different pages
- Create Unit Test to make sure there are no error on your AngularJS services
- Create documentation to set-up your submission, please describe everything as details as possible.
- Put clear comment for all AngularJS elements.
- Let’s discuss if you have some suggestions!
1). Homepage
- Main Navigation menu and target need loaded from JSON or your Angular controller
- Homepage data follow how data displayed from existing prototype
- Click Login button then modal window shows up
- Create proper login implementation from AngularJS
- Validation error must works
- Create some dummy username/password for testing
2). Dashboard
- You need build correct search function when click search. Create some dummy data
- After click search need displayed correct information for all boxes below
3). Search Data
- Need able to select values from existing data
- Click Run Query will take user to the search data result (Data Comparison Details)
- Search data need able capture correct information from JSON files
- You might need create some dummy data so user can search more data
4) Data Comparison Details
- From the Filter area, user can filter data after select some options and click Apply button
- On map, when user start dragging the slider, you need show up different dots on map.
- Make sure line chart displayed correct data from JSON file
- On table need able to sort up/down the table
- Change year need load different year. And need reflect to Year
5). Search Alert
- Search result show up in the bottom after user click Run query button
- Create data via JSON file for all Alert
- Click on Alert name will take user to Detail page
- Re-use attached sample data of TradeAlert.json for your AngularJS prototype
6). Alert Detail Page
- On map, when user start dragging the slider, you need show up different dots on map.
- Make sure line chart displayed correct data from JSON file
- Comment listing displayed on the bottom
- Re-use attached sample data of TradeAlertDetail.json for your AngularJS prototype
7). Query List
- Filter function must works for this screen
- Create some sample data for Query list
- My Query and As Collaborator need displayed from different data source
8). Profile Page
- Account and Contact Information need load from JSON
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient AngularJS application that works in all the requested browsers.
- Consistency with existing UI Prototype
- Matching the storyboards (as close as possible) across the required browsers.
- Best Practice AngularJS code
CODE REQUIREMENTS:
HTML/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.
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.
CSS3
- 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
- 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
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser