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 (I believe, you should use the default button, with some style customization, to implement interactive elements in checkpoints tab - do not hesitate to ask, if you are not sure, how exactly to use and customize such buttons).
• 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 challenge specifications tab (including sidebar with meta-information), and checkpoints tab (which should be hidden from the tab selector, when there is no checkpoint data yet). Both desktop and mobile views are in scope (desktop has higher priority).

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), though you might want to start with:

http://community-west.topcoder-dev.com/challenges/30050860 - Example dev challenges with specs matching the example from design artboard (the link shows the specs loaded into our initial prototype of the new challenge details page in Community App, here is the old challenge details page for the same challenge - https://www.topcoder-dev.com/challenge-details/30050860/?type=develop&noncache=true).

https://www.topcoder-dev.com/challenge-details/30050696/?type=design - Example design challenge, in particular showing content of the checkpoint page.

Note that dan_developer test user in dev environent can create and save new challenge drafts (via www.topcoder-dev.com/direct) - thus you can create your own test challenge specs, should you prefer it.

Final Submission Guidelines

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