Previously, we ran a challenge to get all informations for displaying user statistics for each track/subTrack. You will find the winning submission (document) attached on the challenge forum. Use that document as a guide to create the statistics component(s) for each track/subTrack.

In this challenge, you need to implement the statistics page(s) (eg https://www.topcoder.com/members/thomaskranitsas/details/?track=COPILOT&subTrack=COPILOT) for a user public profile.

 

The work is to be done in Community App, out of the latest commit in develop branch.

You should follow the best practices established in the repository:

• 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!

Challenge scope

• The route for this new page should be /members/:handle/details/?track=:track&subTrack=:subTrack and both query parameters are required. If any of those is missing or it’s invalid, redirect to the 404 page.

• The links from the user profile page http://take.ms/AS6fv should be updated to point to the new page.

• Some tracks/subTracks (everything under develop/design) will have two tabs (STATISTICS/CHALLENGES). You ONLY need to implement the STATISTICS tab. The CHALLENGES tab will be handled in another challenge.

• Each track/subTrack may have different type of statistics. Please follow the provided document for details about the statistics for each track/subTrack.

• Some tracks/subTracks may have historical data chart and rating distribution chart. Those must be implemented. You are free to choose any open source library for those charts but you need to match the current look & feel. If you have any doubt, please confirm on the challenge forum.

• Clicking the menu icon http://take.ms/MP0ak  from the statistics page should open the full page modal to allow the user to navigate to the statistics page for another track/subTrack. http://take.ms/Z5h8f

Supported devices

The following devices are in scope of this challenge:

• Desktop

• Tablet (Fluid version of mobile)

• Mobile

 

Reuse the existing mixins for breakpoints etc.

 

The legacy code is hosted on this https://github.com/appirio-tech/topcoder-app/ repo.

Final Submission Guidelines

Submit a git patch for the latest commit in the develop branch and a demo video showing your submission in action.

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

The winner must create a PR against our develop branch.