Key Information

The challenge is finished.

Challenge Overview

Topcoder Payment Tool is a new way for Topcoder admins and copilots to manage member payments in Topcoder platform. It is a ReactJS application, that relies on the same topcoder-react-lib, topcoder-react-ui-kit and topcoder-react-utils libraries as the Topcoder's community-app. In this challenge you will take care about multiple fixes and improvements in the Topcoder Payment Tool.

Project Background

Topcoder Payment Tool was initially implemented as a proof-of-concept page inside community-app. Later it was spawned out into a separate app, and now we want to further develop it to make more convenient and useful for the end users. Potentially, it may become a replacement for the legacy challenge creation app (Direct).

Technology Stack

The tool is written in ReactJS, using the same tech stack as the community-app. The current code might not follow the best coding practices, we hope to improve the code quality in this and the following challenges. In general, keep in mind that we want to keep code patterns of Topcoder Payment Tool as close to Community App as possible.

Code Access

Links to all relevant code repositories are given above. In case it is necessary, feel free to patch any of them.


We expect you to address the following issues logged in the tool repository (consider all of them as major requirements of the challenge):
  • #2 - Add the way to make copilot payments. For this you'll need to add two optional inputs: selection of copilot, and amount for the copilot payment. They will look and work similar to the existing inputs for selection of member and his payment amount.
  • #3 - Add the way to assign technology tags to the payments. This should work similar to the tags input field in Direct. Input fields, that can contain multiple tech tags (as buttons with crosses to remove them), with autosuggestions of the tags as user type in a new one:

  • #9 - Add payment dates. Payment dates should be shown both in the payments listing (as a new column), and in the details of the payments already done (as a text field). The payment date should not show up in the payment creation screen.
  • #10 - Add submission guidelines input area, and support Markdown inside it, and in the payment description. Please rely on markdown-it parser to convert Markdown into HTML (as we already use it inside community-app).
  • #14 - Ensure that description and submission guidelines of the past challenges are shown in the payment details and payment confirmation screen.
  • #15 - Add option to show all billing accounts / projects in the payment listing.
In case of any doubts, do not hesitate to raise questions in the challenge forum. However, if you question relates exclusively to a specific issue, you can also comment / ask on that ticket in GitHub.

Final Submission Guidelines

Submit Git patch with your updates (and Git patches for the other libraries, in case it is necessary to update those to achieve the goals of this challenge). Include a brief verification video, and verification notes for reviewers (probably it is not much to say, except the commits to which you patch(es) should be applied). Your Git patches should be against the latest develop branches in all related repositories.


Topcoder Open 2019


Final Review:

Community Review Board


User Sign-Off


ID: 30069751