Topcoder is working hard on a massive update of our beloved community platform. In this challenge you will work on the new challenge details page, implementing challenge specifications and checkpoints tabs. The work is to be done in Community App, out of the latest commit in develop branch (f49f7a03a7a57302d11d45d22092634a15ed2961 at the moment of writing). You should follow the best practices established in the repository:

• Properly use Redux. Properly split your code into reusable, self-contained React components, conveniently grouped inside folder structure;
• Don 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. NOTE that you should not nest SCSS scopes to mimic HTML markup; your SCSS code should be very flat: as we use CSS Modules and/or themr, there is generally no problem of class name clushing in different stylesheets (though, when you are explicitely import one stylesheet from another in SCSS, then later rules will modify previous ones). CSS Modules with babel-plugin-react-css-modules are good for unique React components (that have exactly the same style in each place they are used); react-css-themr is preffered where the same React component can be reused in various places, if its style is bended accordingly, including when it demands some context styling, like buttons, for example. To have a better idea about react-css-themr, you may be interested to check our new implementation of buttons and button-like links.
• Use SCSS variables and mixins defined in the global stylesheets (/src/styles/_tc-styles.scss). Especially, it relates to colors, fonts, and other global things.
• Don not break existing unit tests. Providing test coverage for your code will be considered as beneficial functionality.

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

CHALLENGE SCOPE

You will find design assets in the forum. You goal is to fully implement registrants, submissions, and winners tabs. Both desktop and mobile views are in scope (desktop has higher priority). Submissions and winners tabs should be hidden from the tabs selector until there are some data to show for them.

For testing you can use any challenges from dev and prod environments (it is a good idea, to point out in your verification document, the challenges to use for testing). The logic behind submissions and winners tabs (in the part allowing to see and download submissions) should be the same as currently in prod: typically a user can see and download submissions afterh the contest if he was participated and got a passing score.

Final Submission Guidelines

Submit a Git patch for Community App, verification instructions and a brief demo video.