CHALLENGE OBJECTIVES

Welcome! The goal of this challenge is to create a single-page ReactJS application from provided design files and integrate with the TopCoder’s API. It is the first out of the challenge series where we are going to build a Task Marketplace application.

PROJECT BACKGROUND

Are you interested in the new concept of Topcoder, the Task Marketplace? It is an application where users can pick up tasks right away and work on those out of the challenges individually. Members who have free time right now, with help of Task Marketplace, can search for active tasks that are not assigned to other members and start work immediately.

TECHNOLOGY STACK

    NodeJS 12+

    TypeScript

    ReactJS

    CSS3

    Axios for API integration

ASSETS

MarvelApp design files are provided on the forum.

Simple PoC ReactJS application that implements login/logout and task listing functionalities. Can be used for a reference. Link is provided on the forum.

General Requirements

Code Style and Formatting

• Please setup and use linter with standard.js style

• Code should pass lint validation.

• Make sure code is well documented, all classes, methods, variables, parameters, return values must be documented.

• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.

• Please ensure that there are no unused functions/classes/files left. Specifically, pay attention when create-react-app or any other similar template was used to create the project.

Implementation Notes

• Use ReactJS best practices. Create meaningful project structure.
• Use functional components instead of class components.
• Separate dummy components (with design) and container components (with logic).
• Use Redux or Context API for global state management - user profile for instance.
• All UI elements should be implemented and be functional if not specified otherwise in individual requirements
• Handle API errors. There is no UI design available for error messages for now, so please show popup messages in case of errors.
• Responsive design - The application should work on both mobile devices and in browsers. Please refer to design mockup.
• All request and redirect urls should not be hardcoded. Please use json configuration files.

Individual Requirements

1. Authorization

Task Marketplace application is part of TopCoder infrastructure, it should use TopCoder SSO service which utilizes OAuth protocol.

• In order to authorize users, the user must be redirected to the TopCoder SSO page. After successful login, SSO service sets a cookie (available for *.topcoder.com subdomains) with a jwt token and redirects back to the page specified in the request query. Redirect url example: https://accounts-auth0.topcoder-dev.com/?retUrl=<application url>
• In order to sign-out, the user must be redirected to https://accounts-auth0.topcoder-dev.com/logout?retUrl=<application url>

We have a common library that reads a token from the cookie, refreshes the token, and decodes the user profile from it. Please use it - https://www.npmjs.com/package/@topcoder-platform/tc-auth-lib Library exports following functionality:

• configureConnector - This will set iframe (which will keep token refresh automatically), required before calling other functions.
• getFreshToken - Get user's token. Throws exception when the user is not authorized.
• decodeToken - Return user profile by decoding jwt token.

Please refer to the library usage example posted on the forum.

2. Task listing screen

Please implement the task listing page based on the design screens shared on the forum.

When a user enters the page application should check whether the user is already authorized by calling - getFreshToken and get a list of tasks from the challenge API. Please refer to API integration for details.

UI elements

1. Selection between card and list views (top right corner) should work

2. Filtering panel (left side) element
Filtering panel should be collapsable (please check mockup)

• “Tech stack” - Filtering by tag
  • When tag item is clicked on task item element it should be added to the “Tech stack” set if not already there
  • When item in “Tech stack” set is clicked it should be removed from the it
  • When “Apply Filter” button is clicked, new tasks list should be request from the API with specified filtering options
•     "Group" - Filtering by group
  • Filtering by group is available ONLY for authorized users. Please hide this element for non authorized users
  • List of groups that the user belongs to should be obtained from the groups api. Please refer to the API integration description
  • It should be possible to select multiple groups
  • Not more than 5 groups should be shown by default
  • When “Show All” is clicked - all groups should be shown
  • When “Apply Filter” button is clicked, new tasks list should be request from the API with specified filtering options
• "Deadline Date" and "Deadline from now" - out of the scope

3. Task listing

Task listing should be available for both authorized and unauthorized users when the user enters the page.

• When the “Show More” button is clicked, load more tasks and append to the existing list.
• When there are no more tasks to get, "Show More" button should be hidden.
• Task item elements
  • When the “View task” button is clicked, user should be redirected to the challenge page - https://topcoder-dev.com/challenges/{challenge.id}
  • Description sometimes contains HTML elements. Please use html2text or similar library to format it properly
  • Description should be trimmed to 140 characters
  • All elements should be properly mapped to task payload data. Don’t hesitate to ask questions on the form if any

4. Top Navigation bar

• For unauthorized users please set a link to TopCoder SSO page with text “Login”. Similar way as it is done on topcoder.com page
• For authorized users please show user avatar and handle. When user clicks on the avatar or handle, drop down menu should appear with links to “Settings”, “Help” and “Log Out” elements. Please refer to the existing menu on topcoder.com page.
• “Search” functionality - “magnifying glass” is out of scope

API integration

Task listing
Swagger: http://api.topcoder-dev.com/v5/challenges/docs/#/Challenges/get_challenges
Request URL: GET https://api.topcoder-dev.com/v5/challenges
Notes:

• Endpoint returns all challenges, in order to get tasks only, following query parameters should be set - types=Task, taskIsAssigned=false, isLightweight=false
• For authorized users the bearer token returned from getFreshToken() function should be used
• Please support paging. Request 9 tasks by default. Make the number of tasks configurable

Getting list of user groups

Swagger: http://github.com/topcoder-platform/groups-api/blob/develop/docs/swagger.yml
Request URL: GET https://api.topcoder-dev.com/v5/groups

Local Testing

As the cookie that stores the jwt token is available only for topcoder.com subdomains, applications that run locally will not be able to read it. Instruction on how to mimic authorized users, will be posted on the forum.

BROWSER REQUIREMENTS

• Windows: IE 11+, Edge, Chrome latest, Firefox latest
• Mac: Safari Latest, Chrome Latest, Firefox Latest
• Tablet and mobile: Safari / Chrome on iOS and Chrome on Android

Final Submission Guidelines

Submit the zip archive containing:

• Application source code.
• Detailed README with build and run instructions.
• Verification file with details for the reviewers.