Challenge Overview
Topcoder is working hard on a massive update of our beloved community platform. In this challenge you will do intial work to implement the new Challenge Details page inside Community App. You should work out of the latest commit in develop branch (5bf0695a344f717c917c873b7354d67610faf58f at the moment of writing this specification), and follow all the best practices established in the repository:
- Properly use Redux. Properly split your code into reusable, self-contained ReactJS components, conveniently grouped inside folder structure;
- Do not violate ESLint rules for JS code, and StyleLint rules for SCSS;
- Properly use babel-plugin-react-css-modules and/or react-css-themr for styling;
- Use SCSS variables and mixins defined in the global stylesheets (/src/styles/_tc-styles.scss). Especially, it relates to colors, fonts, standard button styles, etc.
- Do not break existing unit tests. Providing an adequate unit test coverage (with Jest) for your code will be considered as beneficial functionality (though, making with a good quality everything else has a higher priority than tests);
Should you have any doubts do not hesitate to ask for clarifications and advices in the challenge forum!
CHALLENGE SCOPE
Check design assets provided in the forum. As you see, the new Challenge Details page still has a common header, and multiple tabs with different details (details / registrants / checkpoints / etc.). In this challenge we target to implement, and style along with the design, the common header (including the tab titles), and load the main challenge specifications into the details tab. All elements inside the header are supposed to function as assumed in the design. For now no need to style the content of details tab, nor implement switching to other tabs (see also an image attached in the forum, which clarifies the scope of this challenge).Most of the data you will need for this page are already fetched from the backend api and stored inside the Redux store (they are already used for the Submissions Management Page). The actual text with challenge specifications you will have to fetch from Topcoder API v2 (the codebase already has all tools, like api service, etc. necessary to do it). In case you find any other data are missing, we prefer to load them from v3 api, but if they are not available there yet, it is fine to fallback to api v2 (documentation for both APIs is referenced in the forum).
The implemented part of the new Challenge Details page should be added at the /challenges/:challengeId endpoint of the app.