Key Information

Register
Submit
The challenge is finished.

Challenge Overview

Welcome to $800 Living Progress - WWF - AngularJS App Fixes F2F Challenge

For this F2F we need your help fixing some issues on provided Living Progress - WWF AngularJS app to follow original HTML/CSS/JS UI Prototype. On some tasks, we also need your help update and adding some new screens to the Living Progress - WWF - AngularJS app.

Final Submission Guidelines

IMPORTANT
This F2F is subjective - so the first solution that the client likes and fulfill the required updates will win. We will consider all submissions until a the winner is declared.

Downloadable Files
https://drive.google.com/drive/folders/0B31nrwic_6z0eEo0Sm1JcWFWUXM?usp=sharing
WWF-AngularJS.zip - AngularJS App as base updates
WWF-UI-Prototype.zip - Original WWF UI Prototype
Storyboard.zip - Storyboard for Updated Look

F2F Requirements

A). Consistency with Existing UI Prototype
Notes: For these issues below please compare provided AngularJS App and existing Prototype to check the issues

General
- Buttons/Links need display pointer cursor
- Remove the notification on the bottom screen
- Console error, after go to some pages. You’ll see console error on Developer Tools chrome. - Please fix the error across the pages, click around on some pages to see the error
- On Register page Dropdown missing the arrow

1) Login page
http://imgur.com/pcxaP65
- Login page should match with provided prototype. http://imgur.com/bJNiQUQ
- Top area and form width need follow existing prototype
- Need remove the top border
- Copyright need follow existing prototype

2) Search Data
- Go to this page from another page. You’ll see multi-dropdown form breaking.

3) Alert Detail
- 'Comments (9)' sections missed.
- User image not displayed. https://gyazo.com/685c8c2ce79c868eedfbdadf1f72a303
- Collaborators tab should display Querties http://imgur.com/0H9nZk2

4) Dashboard
- In 'Trends in' section, chart should not break when we toggling annual and month tab http://imgur.com/wmuzuk9

5) Profile page
- Should load if we click on name after login. Now guest only loading register page.

B). Dashboard Updates
- Implement a news feed in the top right component on the web site which currently says “Notifications”.  
- Please change the section header from “Notification” to “News”.
- In this section, create AngularJS RSS news feed which queries Google News for the following topics: “illegal fishing”, “IUU fishing”
- Use scrollbar for longer rows
- Remove the “See All Notifications” text at the bottom of the section.
- Remove the Search Bar at the top of the page.
- Remove search for help inputs, guide, refresh and manage buttons. (Important: Apply to all pages)
- Remove Notification with bell icons on top right of page.  (Important: Apply to all pages)

C). Create some new screens
1). Landing Page

Screenshot: Extra-Screens/00 - Landing Page.jpg
- On main navigation, replace Forum with News menu
- Keep other menu like existing prototype

2). My Profile
Screenshot: Extra-Screens/01 - My Profile - admin button.jpg
- User landed to this page from top right menu
- Click the user thumbnail need load My Profile screen
- Add new “+ Admin” button that will that user to NEW Admin page explained below
- Not included in storyboard, create new “Public Profile View” button before the “+ Admin”. This button will take user to Public Profile screen explained below

3). Admin Page
Screenshot: Extra-Screens/02_1 - Admin Page.jpg
- This is Admin Page screen look
- Match fields like storyboard content
- We need simulate the confirmation modal window after click save button (Screenshot: Extra-Screens/02_2 - Admin Page - Confirmation.jpg)

4). Public Profile Screen
Screenshot: Extra-Screens/05 - User Profile Public.jpg
- This is Public User Profile
- User see this page after click “Public Profile” button from My Profile page
- User profile placed on the left side
- Send Invitation button placed below user description
- Contact information on the right side

5). Error Screens
Database Error
Screenshot: Extra-Screens/06_1 - Database error screen.jpg
- Create this is stand alone screen. Put not how to access to page from your submission.
- Error message placed on top
- Email and Message text placed on the bottom

404 Error Screen
Screenshot: Extra-Screens/06_2 - 404 error screen.jpg
- Create this is stand alone screen. Put not how to access to page from your submission.
- Error message placed on top
- Email and Message text placed on the bottom

HTTP Error Screen
Screenshot: Extra-Screens/06_3 - HTTP error screen.jpg
- Create this is stand alone screen. Put not how to access to page from your submission.
- Error message placed on top
- Email and Message text placed on the bottom

Let us know if you have any questions.

Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser

F2F GUIDELINES
We will review submissions as they are submitted! Pay attention to Forum activity!
We will review ALL submissions until we declare a winner based on
1) Task Requirements
2) Client is happy with how it looks/works
3) Time the solution was submitted
Please let us know if you have questions or need clarification on some things


Thank you
 

ELIGIBLE EVENTS:

2017 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30055598