CrowdSourcing Platform - UI Integration Part2

Register
Submit a solution
The challenge is finished.

Challenge Overview

 

CONTEXT

PROJECT CONTEXT

We’re building an internal crowdsourcing tool to post simple and moderately complex tasks and ideas; where qualified contacts from the company can pick the tasks and deliver them in a timely manner.  The requestor can create the tasks on the tool and the worker can pick the tasks from the pool and deliver them. 

 

CHALLENGE CONTEXT

You are responsible for integrating all the remaining pages and fix the existing issues. 

 

CHALLENGE DETAILS

TECHNOLOGY

  • React.js

  • API Integration

  • PING Federate

 

INDIVIDUAL REQUIREMENTS

Integrate with PING Federate

  • Integrate with PING Federate, please check the sample in the backend. Logout should also be integrated. 

  • The /me api should be called when user changes the role as well.

 

General Logic and Note

  • The app supports both requestor and worker role, and by default the worker role is displayed

  • User can switch between requestor and worker role by clicking the role in the header

  • The page will be rendered differently based upon user’s selected role. Please redirect user to the dashboard page when switching roles.  

  • when calling the APIs, the current role should be passed in the request header, and the API will return data corresponding to the current role. 

 

Fix Issues

  • Requestor can mark the active challenge as completed or failed

  • Please also ensure there are no console error and existing functionalities are not broken

 

Profile Page

  • Profile page is only available for worker

  • Requestor can click the registrant / submitter to open the worker’s profile page

  • For the tasks-completed and points-earned charts, the following options should be supported

    • Last 1 Year

    • Last 3 Month

    • Last 1 Month

  • Skills - worker is able to update his own skills and update the experience level

 

Settings Page

  • Only keep the following 2 options, and remove the others

    • WebApp Notifications - it’s used in backend

    • Email Notifications - it’s used in backend

 

User Help Page

  • pull the user help from the api


Notification Panel

  • The notification on the dashboard should also be integrated.

Note

  • All the navigation and actions on the page should work. 

  • Show loading indicator when API call is in progress

  • You should only show the buttons if user is allowed to perform the corresponding actions. 

  • You are responsible for fixing any UI bugs to make the page work properly

  • Please check the UI mapping document to see what apis should be called on each page (in the backend/

  • Please show success / error snackbar like below for the user actions on the page:

 

Submission Guidelines

  • Patch file

  • Verification Guide

 

 

 



Final Submission Guidelines

See above

ELIGIBLE EVENTS:

2021 Topcoder(R) Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30134286