Challenge Overview

Challenge Objectives

  • Implement a broker API that will fetch information about MM challenges.

  • Update the topcoder-react-lib to call the broker API instead of calling the Submissions API directly (more details in the individual requirements section).

Project Background

We are in the process of migrating many of the legacy pages of our platform to the new Community App repo based on a newer technology stack and improve the overall user experience.

In this series of challenges, we are targeting to the public profile page and the profile settings page based on our new design (attached on the challenge forum, available on registration).

Technology Stack

  • Node.js

  • JavaScript

  • React.js

Code Access

The broker API is a new app so we don’t have a repo for that but you can use the following as a reference


The changes in the community-app are to be done in the Community App repo (develop branch) and the new topcoder-react-lib (based-on-v0.7.11-4 branch).

Individual requirements

Broker API

Implement a REST API using Node.js + Express.js that will call the Submissions API (/v5/submissions/*) using M2M tokens to fetch details about challenge submissions.


Use this library for M2M. Please note that you need to refer to it via git instead of npm.


You basically need to move everything that’s currently on the topcoder-react-lib that’s responsible to render the information of the leaderboard on MM (Marathon Match) challenge over to the new broker API which will use M2M token instead of the user’s JWT to call the Submissions API.


Based on the user’s roles and the user’s access to the challenge, the broker API will cleanse the data.


If the user is not an admin and is not the challenge copilot/manager, only the metadata.public property should be returned from the response of the submission information. All other (internal etc) should be removed from the response.


You need to create a detailed with instructions on how to set up and run the broker API.

Update Topcoder React Lib

You need to clean up the React lib and call the broker API to fetch the details about MM challenge submissions/leaderboard information.


The react lib will call the broker API using the user’s JWT, the broker API will do its job (call the Submission API using M2M) and return the data to the react lib which then will be sent back to the community-app.


The overall idea is to be able to call the Submission API using M2M token without exposing those API calls to the end-user.

Important Notes

  • You should follow the best practices established in the repository:

  • We use this stand-alone library: for any actions/reducers/services of current ReactJS based app. 

  • As part of this challenge submission, you also might need to improve for any actions/reducers/services updates

  • Properly use Redux. Properly split code into reusable, self-contained React components, conveniently grouped inside folder structure;

  • Do not violate ESLint rules for JS code, nor StyleLint rules for SCSS;

  • Properly use babel-plugin-react-css-modules and / or react-css-themr for styling;

  • Use SCSS variables and mixins from the global stylesheets (/src/styles/_tc-styles.scss). Especially, when it relates to colors, fonts, etc;

  • Do not break existing unit tests.

  • Etc.;


Should you have any doubts, do not hesitate to ask for clarifications in the challenge forum!

Submission deliverables

Submit a zip file that will include the following:

- The whole project folder for the broker API.

- A git patch for each repo.

- Make sure to mention the exact commits so we can apply your patch file.

- The winner must create a PR against our repos.

Final Submission Guidelines

Please read above.

Review style

Final Review

Community Review Board


User Sign-Off

ID: 30102897