Challenge Overview
We develop a new effective and scalable solution for management of Topcoder communities, dedicated to specific clients / projects / technologies. Think about existing Cognitive, iOS, and Predix communities. We aim to create a new ReactJS frontend for such mini-sites.
Warning: All code related to challenge listings was recently ported from another repository, and does not yet follow our standards for Redux and unit-testing. Don't take it as an example! Enhancement of this part of the code, other than really necessary for the present challenge, is out of the scope.
1. Instead of the hard-coded response (lines 14-35 in /src/server/tc-communities) the endpoint should read response data from a .json file. Existing example data should be moved to /src/server/tc-communities/example/metadata.json.
2. The mock API endpoint uses /header in its name and the loaded data are stored into state.tcCommunities.header path of the Redux state. Lets modify these to /meta and state.tcCommunities.meta, as we'll want to included more data in the response, not necessarily related to the header, but to the community as the whole.
3. Meta data for Wipro community should be read from /src/server/tc-communities/wipro/metadata.json. The data should include Home at /home, Learning & Certification at /about, Challenges at /challenges, and Leaderboard at /leaderboard. For the logo, please use a side-by-side combination of Wipro and Topcoder (/src/assets/images/logo_topcoder_with_name.svg) logos. Default style of the header is fine, probably just add a light gray bottom border to visually separate the header from the rest of the page.
Challenge Scope
We have been requested to assemble the first community mini-site as soon as possible, before we have a chance to finish all fancy staff we are planning for this project, and here is what we gonna do (pay attention to a shorter challenge timeline than usual). Development will be done in the Community App repository, using as the base the commit d0e27b10143b48711ada642bd9982196ab68d09c, or a newer one in the develop branch. Your changes must not introduce any lint errors, and provide a reasonable unit test coverage of the written code (look into existing test for examples how to test various types of modules). You should properly use ReactJS, Redux, and support server-side rendering of the relevant pages.Warning: All code related to challenge listings was recently ported from another repository, and does not yet follow our standards for Redux and unit-testing. Don't take it as an example! Enhancement of this part of the code, other than really necessary for the present challenge, is out of the scope.
Wipro Community
You are doing Wipro community, it will be added to Community App at /community/:communityId/... endpoints with :communityId set to wipro. This community will consist of four pages: landing, learning & certification, listing of relevant challenges, and leaderboard. Each page will have a standard community header / footer. We have most of the necessary code ready, just need to properly assemble all these components together.Header
Community header is located in /src/shared/components/tc-communities/Header, and other similar folders like containers, reducers, etc. Actual data to render in the header are fetched from the mock API located in /src/server/tc-communities. For Wipro community we want to modify the mock API in the following way:1. Instead of the hard-coded response (lines 14-35 in /src/server/tc-communities) the endpoint should read response data from a .json file. Existing example data should be moved to /src/server/tc-communities/example/metadata.json.
2. The mock API endpoint uses /header in its name and the loaded data are stored into state.tcCommunities.header path of the Redux state. Lets modify these to /meta and state.tcCommunities.meta, as we'll want to included more data in the response, not necessarily related to the header, but to the community as the whole.
3. Meta data for Wipro community should be read from /src/server/tc-communities/wipro/metadata.json. The data should include Home at /home, Learning & Certification at /about, Challenges at /challenges, and Leaderboard at /leaderboard. For the logo, please use a side-by-side combination of Wipro and Topcoder (/src/assets/images/logo_topcoder_with_name.svg) logos. Default style of the header is fine, probably just add a light gray bottom border to visually separate the header from the rest of the page.
Footer
For the footer, at the moment, please just use the existing /src/shared/TopcoderFooter.Landing and Learning & Certification Pages
For the Landing and Learning & Certification pages please copy them from http://topgear.tcmini.wpengine.com/. Just static pages with hard-coded content and styling are fine for now.Challenge Listing
Listing component is already in the repo and its demo is available at the /community-challenge-listing/:tag endpoint (it pre-filters all Topcoder challenge by the technology tag specified in the path). For this challenge we want to update it to get filter so that tag comes from from the community meta data endpoint (see header section, and the mock API there). Fine to keep on using JavaScript as the default sample tag. Also the demo page of the challenge listing uses the standard Topcoder header now. Be sure that, when included into community, the listing uses our special community header instead.Leaderboard
The code for leaderboard is in the repo and its demos is available at the /leaderboard endpoint. Now it loads leaderboard data fromhttp://www.mocky.io/v2/59098e60100000b60747c10b, hard-coded inside /src/shared/actions/leaderboard.js. Please change the code so that the actual URL to load leaderboard data comes from the community meta-data API (see header section, and the mock API there). Also, for the Wipro community please fetch these data from https://api.topcoder.com/v4/looks/412/run/json/ (requires authentication with V3 Topcoder Auth Token, authentication is already handled by the code: if the visitor is authenticated his auth token is available at the state.auth.tokenV3 path of Redux state). Similar to the Challenge Listing make sure we use our community header when load the leaderboard as a part of community mini-site (the demo page uses the standard Topcoder header now).