Challenge Overview
Welcome to Living Progress - WWF - AngularJS Conversion Continuation UI Prototype Challenge
The main task of this project is to continue completing existing Living Progress - WWF AngularJS Application by using AngularJS framework to be fully working and follow best practice of AngularJS code standard. We also add requirements that will need to pull data from Contentful API
Read more details information explained below and let’s discuss any questions you have.
https://drive.google.com/drive/folders/0B31nrwic_6z0QzlDUmdJOGk2QVE?usp=sharing
WWF-UI-Prototype.zip - Existing HTML/CSS/JS UI Prototype as Reference
Storyboard.zip - Contains Missing and Extra Screens
General Tasks
- For this challenge you need continue updating AngularJS application based on requirements stated below.
- Use existing AngularJS app version.
- For all new codes, 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
- Some pages must loaded using Contentful API. Read more details below
- 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
- 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 for AngularJS app best practices!
Base Submission:
- Please fork the following repository: https://github.com/topcoderinc/HP-LP-WWF-Detect-IT. We’re working from the angular-dev branch (which is the default).
- You’ll need to request access to the repository by providing your GitHub ID in the GitHub Access thread in the forum.
- The winner will be asked to provide a pull request to the repository with his or her updates.
- You will still need to submit a submission.zip to Topcoder with your source code, build scripts, and configuration files.
- Check README file to deploy this Angularjs app
Contentful Requirements
For some page explained below, you can use these credentials to access the queries:
- Content Space Name: WWF
- ContentFul Space Id: 9i1m79rt44ru
- Contentful Content Delivery API Key: d6b16c2a8821ab46dd0038fa3809923c7c3cfc52b882ea0fd61363912d19e995
- You can use this AngularJS Contentful Module on your application https://github.com/jvandemo/angular-contentful OR suggest other Contentful for AngularJS app.
1). Forum
Screenshot: Extra-Screens/03_1 - Forum Listing Page - tag hide.jpg
- This is NEW Forum page, existing News menu replaced with Forum menu
- Forum page use 2 columns layout
- On Forum box on the left side, there are tabs for All posts and Following
- Forum listing displayed on the bottom
- Put pagination below the table
- On Hot Topic and Latest Posts, user can hide/show the box by click hide link. When box being hidden, set text to show.
- Click “+ Show Tag” link next to Filter need load the Filter Tag (Screenshot: Extra-Screens/03_2 - Forum Listing Page - Show tag.jpg)
- Click "- Hide Tag" need hide the tag.
- Green "+" button can be dead link for now.
- Click each Forum title need take user to Forum Detail page (Screenshot: Extra-Screens/04 - Forum Post Page.jpg)
- Create Post button need take user to Create Forum page explained below
2). Forum Detail
Screenshot: Extra-Screens/04 - Forum Post Page.jpg
- This is Forum Detail page
- Page remain use 2 columns layout
- User profile place on top
- Show less/more button placed on the right side of user profile
- Chart/Map and table placed below Forum content
- On the right side, you need display the Hot and Latest Topic
- Tags displayed below the chart
- User can type on Reply input
- There’s a Notify Me via Email radio button below the input
- Comment list placed below the input field
3). Create Forum Post
Screenshot: Extra-Screens/03_4 - Create post page.jpg
- This is Create New Post page
- Match the form like storyboard
- Form look after filled some data (Screenshot: Extra-Screens/03_5_1 - Create post - fill01.jpg)
- Suggest the text editor for Description, we need use open source version
- Attachment link need able to select the file via browser
- Forum tag need works to select tags. Re-use existing function
- Need able to select just one option for Request Notification Screenshot: Extra-Screens/03_5_2 - Create post - attach files.jpg
- Hover “!” button need display the tooltips (Screenshot: Extra-Screens/03_5_3 - Create post - hover info.jpg)
- Select options for Forum tags (Screenshot: Extra-Screens/03_5_4 - Create post - select tag.jpg)
- Form look after select notifications (Screenshot: Extra-Screens/03_5_5 - Create post - show tag.jpg
Screenshot: Extra-Screens/03_5_6 - Create post - notify me.jpg
Screenshot: Extra-Screens/03_5_7 - Create post page.jpg)
- Create Confirmation modal window after click Create Post button (Screenshot: Extra-Screens/03_5_8 - Create post - confirmation page.jpg)
4). Case Studies
Screenshot: Missing-Screens/04 - Case Studies List View.jpg
- This is Case Studies screens
- Case Studies content placed on the left side Featured Case Studies on the right side
- Important: We just need the List view for Case Studies page. Remove
- Important: Remove the List and Grid View buttons from your prototype submission.
- Important: Remove dropdown and filter from your prototype submission
- Important: Remove Featured Case Studies and expand the Case Studies Box
- Click Title and read more will take user to detail page
Contentful Api Requirements
- We need to convert the following pages into HTML and enable the Contentful CMS integration so they are fully functional
- For each listing on the page we’ll be using the following ContentFul Components and Ids. Please query the Contentful system to retrieve all of the published Case Studies for display on the Case Studies list page.
-- title
-- postDate
-- summary
-- header
-- panelImage
- Here’s sample query for Case Study: https://cdn.contentful.com/spaces/9i1m79rt44ru/entries?access_token=d6b16c2a8821ab46dd0038fa3809923c7c3cfc52b882ea0fd61363912d19e995&content_type=caseStudy
5). Case Studies Details
Screenshot: Missing-Screens/05 - Case Studies Details.jpg
- This is how Detail page look
- Important: The following features DO NOT need to be implemented in your prototype:
-- Comments
-- Related Case Studies
-- Download Link
-- Rating Stars
-- Rate Button
- Created By bar placed on top, related case studies on the right side
- Content image below the created bar
- Expand the content details box after you remove the Related Case Studies
Contentful Api Requirements
- For each Case Study we’ll be using the following ContentFul Components and Ids. Please query the Contentful system to retrieve all of the published Case Studies for display on the Case Studies list page:
-- title
-- postDate
-- content
-- headerImage
-- assetLink
6). Tips & Best Practices
- Important: Ignore storyboard look. Basic layout for this screen need follow and re-use layout from Case Studies Details
- Each row need displayed in page
- Each row will contain a Title, a Header Image, and some long form content.
- The header image for each content section is a little smaller in this case (400X300) to allow content to wrap around it so the look and feel of the pages will be slightly different from (but generally consistent with) the Case Studies pages.
- Each Best Practice entry in the CMS is basically a content section about using trading data to identify illegal trade in seafood. Please create a “panel” for each Best Practice record.
- Important: No need implement the Help Tour for prototype
Contentful Api Requirements:
- You should the following content sections for each Best Practice entry in Contentful:
-- title
-- content
-- image
-- displayOrder - You should use this render the content in order.
- Here’s sample query for Tips & Best Practices:
https://cdn.contentful.com/spaces/9i1m79rt44ru/entries?access_token=d6b16c2a8821ab46dd0038fa3809923c7c3cfc52b882ea0fd61363912d19e995&content_type=bestPractice
7). Species Database
- Important: Ignore storyboard look. Basic layout for this screen need follow and re-use layout from Case Studies
- This page is simply a list of links.
- For each row, there is a thumbnail image, the URL itself, and a basic text description.
- Please create a little panel for each link which contains each component.
Contentful Api Requirements:
- You should the following content sections for each Helpful Link entry in Contentful:
-- title
-- url
-- image
-- displayOrder - You should use this display the content in order.
- Here’s sample query for Helpful Links (Species Databases):
https://cdn.contentful.com/spaces/9i1m79rt44ru/entries?access_token=d6b16c2a8821ab46dd0038fa3809923c7c3cfc52b882ea0fd61363912d19e995&content_type=helpfulLinks
8). Existing AngularJS Layout Issues
- Dashboard, missing content of “Our Key Features”. Compare with existing prototype
- Query List, remove “My Query” and “Collaborator” tabs from page
- Dashboard, “News and Case Studies” update the title into “Forum and Case Studies”.
- Dashboard, “Collaboration” and “News and Case Studies” remove extra padding below the See All links
- Data Comparison Details, remove extra padding on the bottom of Key Findings
- Search alert detail, remove “Import / Export Summary” and “Collaborator” tabs from page
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 continue completing existing Living Progress - WWF AngularJS Application by using AngularJS framework to be fully working and follow best practice of AngularJS code standard. We also add requirements that will need to pull data from Contentful API
Read more details information explained below and let’s discuss any questions you have.
Final Submission Guidelines
Challenge Downloadablehttps://drive.google.com/drive/folders/0B31nrwic_6z0QzlDUmdJOGk2QVE?usp=sharing
WWF-UI-Prototype.zip - Existing HTML/CSS/JS UI Prototype as Reference
Storyboard.zip - Contains Missing and Extra Screens
General Tasks
- For this challenge you need continue updating AngularJS application based on requirements stated below.
- Use existing AngularJS app version.
- For all new codes, 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
- Some pages must loaded using Contentful API. Read more details below
- 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
- 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 for AngularJS app best practices!
Base Submission:
- Please fork the following repository: https://github.com/topcoderinc/HP-LP-WWF-Detect-IT. We’re working from the angular-dev branch (which is the default).
- You’ll need to request access to the repository by providing your GitHub ID in the GitHub Access thread in the forum.
- The winner will be asked to provide a pull request to the repository with his or her updates.
- You will still need to submit a submission.zip to Topcoder with your source code, build scripts, and configuration files.
- Check README file to deploy this Angularjs app
Contentful Requirements
For some page explained below, you can use these credentials to access the queries:
- Content Space Name: WWF
- ContentFul Space Id: 9i1m79rt44ru
- Contentful Content Delivery API Key: d6b16c2a8821ab46dd0038fa3809923c7c3cfc52b882ea0fd61363912d19e995
- You can use this AngularJS Contentful Module on your application https://github.com/jvandemo/angular-contentful OR suggest other Contentful for AngularJS app.
1). Forum
Screenshot: Extra-Screens/03_1 - Forum Listing Page - tag hide.jpg
- This is NEW Forum page, existing News menu replaced with Forum menu
- Forum page use 2 columns layout
- On Forum box on the left side, there are tabs for All posts and Following
- Forum listing displayed on the bottom
- Put pagination below the table
- On Hot Topic and Latest Posts, user can hide/show the box by click hide link. When box being hidden, set text to show.
- Click “+ Show Tag” link next to Filter need load the Filter Tag (Screenshot: Extra-Screens/03_2 - Forum Listing Page - Show tag.jpg)
- Click "- Hide Tag" need hide the tag.
- Green "+" button can be dead link for now.
- Click each Forum title need take user to Forum Detail page (Screenshot: Extra-Screens/04 - Forum Post Page.jpg)
- Create Post button need take user to Create Forum page explained below
2). Forum Detail
Screenshot: Extra-Screens/04 - Forum Post Page.jpg
- This is Forum Detail page
- Page remain use 2 columns layout
- User profile place on top
- Show less/more button placed on the right side of user profile
- Chart/Map and table placed below Forum content
- On the right side, you need display the Hot and Latest Topic
- Tags displayed below the chart
- User can type on Reply input
- There’s a Notify Me via Email radio button below the input
- Comment list placed below the input field
3). Create Forum Post
Screenshot: Extra-Screens/03_4 - Create post page.jpg
- This is Create New Post page
- Match the form like storyboard
- Form look after filled some data (Screenshot: Extra-Screens/03_5_1 - Create post - fill01.jpg)
- Suggest the text editor for Description, we need use open source version
- Attachment link need able to select the file via browser
- Forum tag need works to select tags. Re-use existing function
- Need able to select just one option for Request Notification Screenshot: Extra-Screens/03_5_2 - Create post - attach files.jpg
- Hover “!” button need display the tooltips (Screenshot: Extra-Screens/03_5_3 - Create post - hover info.jpg)
- Select options for Forum tags (Screenshot: Extra-Screens/03_5_4 - Create post - select tag.jpg)
- Form look after select notifications (Screenshot: Extra-Screens/03_5_5 - Create post - show tag.jpg
Screenshot: Extra-Screens/03_5_6 - Create post - notify me.jpg
Screenshot: Extra-Screens/03_5_7 - Create post page.jpg)
- Create Confirmation modal window after click Create Post button (Screenshot: Extra-Screens/03_5_8 - Create post - confirmation page.jpg)
4). Case Studies
Screenshot: Missing-Screens/04 - Case Studies List View.jpg
- This is Case Studies screens
- Case Studies content placed on the left side Featured Case Studies on the right side
- Important: We just need the List view for Case Studies page. Remove
- Important: Remove the List and Grid View buttons from your prototype submission.
- Important: Remove dropdown and filter from your prototype submission
- Important: Remove Featured Case Studies and expand the Case Studies Box
- Click Title and read more will take user to detail page
Contentful Api Requirements
- We need to convert the following pages into HTML and enable the Contentful CMS integration so they are fully functional
- For each listing on the page we’ll be using the following ContentFul Components and Ids. Please query the Contentful system to retrieve all of the published Case Studies for display on the Case Studies list page.
-- title
-- postDate
-- summary
-- header
-- panelImage
- Here’s sample query for Case Study: https://cdn.contentful.com/spaces/9i1m79rt44ru/entries?access_token=d6b16c2a8821ab46dd0038fa3809923c7c3cfc52b882ea0fd61363912d19e995&content_type=caseStudy
5). Case Studies Details
Screenshot: Missing-Screens/05 - Case Studies Details.jpg
- This is how Detail page look
- Important: The following features DO NOT need to be implemented in your prototype:
-- Comments
-- Related Case Studies
-- Download Link
-- Rating Stars
-- Rate Button
- Created By bar placed on top, related case studies on the right side
- Content image below the created bar
- Expand the content details box after you remove the Related Case Studies
Contentful Api Requirements
- For each Case Study we’ll be using the following ContentFul Components and Ids. Please query the Contentful system to retrieve all of the published Case Studies for display on the Case Studies list page:
-- title
-- postDate
-- content
-- headerImage
-- assetLink
6). Tips & Best Practices
- Important: Ignore storyboard look. Basic layout for this screen need follow and re-use layout from Case Studies Details
- Each row need displayed in page
- Each row will contain a Title, a Header Image, and some long form content.
- The header image for each content section is a little smaller in this case (400X300) to allow content to wrap around it so the look and feel of the pages will be slightly different from (but generally consistent with) the Case Studies pages.
- Each Best Practice entry in the CMS is basically a content section about using trading data to identify illegal trade in seafood. Please create a “panel” for each Best Practice record.
- Important: No need implement the Help Tour for prototype
Contentful Api Requirements:
- You should the following content sections for each Best Practice entry in Contentful:
-- title
-- content
-- image
-- displayOrder - You should use this render the content in order.
- Here’s sample query for Tips & Best Practices:
https://cdn.contentful.com/spaces/9i1m79rt44ru/entries?access_token=d6b16c2a8821ab46dd0038fa3809923c7c3cfc52b882ea0fd61363912d19e995&content_type=bestPractice
7). Species Database
- Important: Ignore storyboard look. Basic layout for this screen need follow and re-use layout from Case Studies
- This page is simply a list of links.
- For each row, there is a thumbnail image, the URL itself, and a basic text description.
- Please create a little panel for each link which contains each component.
Contentful Api Requirements:
- You should the following content sections for each Helpful Link entry in Contentful:
-- title
-- url
-- image
-- displayOrder - You should use this display the content in order.
- Here’s sample query for Helpful Links (Species Databases):
https://cdn.contentful.com/spaces/9i1m79rt44ru/entries?access_token=d6b16c2a8821ab46dd0038fa3809923c7c3cfc52b882ea0fd61363912d19e995&content_type=helpfulLinks
8). Existing AngularJS Layout Issues
- Dashboard, missing content of “Our Key Features”. Compare with existing prototype
- Query List, remove “My Query” and “Collaborator” tabs from page
- Dashboard, “News and Case Studies” update the title into “Forum and Case Studies”.
- Dashboard, “Collaboration” and “News and Case Studies” remove extra padding below the See All links
- Data Comparison Details, remove extra padding on the bottom of Key Findings
- Search alert detail, remove “Import / Export Summary” and “Collaborator” tabs from page
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