Challenge Overview
This is fast win 72h challenge. The scope is reduced to implement 3 react pages with partially already available componets.
We are in the process of building new “IoT” sub-community in our community app. This challenge is continuation of the process aiming to complete the “dynamic” pages.
Generally we need to port the content of predix.topcoder.com to the Topcoder Community App - react webapp for serving Topcoder Community. We already have all “static pages” implemented in previous challenge. We now need to do the rest 3 pages.
In scope are only: Predix Assets, Asset Details, and Compete pages. Means those should be implemented as separate react components on page level and layout level and match look and feel of topcoder sub-community.
Major requirements for all components in this challenge are:
-
Support for both desktop and mobile screens
-
Match the styling from blockchain.topcoder.com. If you’re unsure about a styling/image/layout, please ask in the forum
-
Reuse existing react components as much as possible from other sub-communities or shared from the existing codebase. Inspect the src/shared/components folder for existing components
-
Predix Assets and Asset Details pages should re-use the implemented components from the the first challenge. See implementations in src/shared/components/tc-communities/communities/iot for details
-
-
Please, use JSON file to store and load the data required for the asset details on the “Asset Details” page and the assets list on the “Predix Assets” page. Simple structure like this should be fine to load and render them:
[
{
"id": String,
"title": String,
"description": String,
"text": [String],
"technologies": [String],
"platforms": [String],
"url" String,
"author": {
"name": String,
"avatarURL": String,
"profileURL": String,
"country": String
}
}
...
]
-
The “Predix Assets” and “Asset Details” pages should fetch(use the available isomorphic-fetch lib) the json file and render the content. In case of asset details use the id to find the corresponding content details. Probably best for “Asset Details” page will be to use assets/:id as router url. Then just load content and render it. Display default loader until compete/ready
-
The list/card view switch buttons should work same as in the source site
-
The “RESOURCES” link is external link to “https://www.predix.io/resources” and should open in blank window as it currently does on the Predix source site
-
The “”COMPETE” should be made like it is on http://blockchain.topcoder.com/challenges. It should use the default components to render challenges and implement challenge filter matching challenges related to the community by ID. The id is: iot. Refer to /src/shared/routes/Communities/Blockchain/ for sample implementation
- All code should follow the repo code style standards without lint errors
- Static assets should be placed in /src/assets/themes/iot
-
For this challenge only Predix Assets, Asset Details, and Compete pages are in scope
Please, use the predix branch:
https://github.com/topcoder-platform/community-app/tree/predix
as as base code (commit 6998d229fac0b79afe4b940f3d70673a59b38d8f) and create all the pages in src/shared/components/tc-communities/communities/iot folder.
The predix branch has already configured the basics for the new community and has some pages implemented. Study the code to see how Home page works and implement the rest analogically following this spec.
There are cheatpages to use as the guideline, that described various available mixins to use when matching look and feel:
For typography: https://community-app.topcoder.com/examples/typography
For colors: https://community-app.topcoder.com/examples/color-mixins
For buttons: https://community-app.topcoder.com/examples/buttons
Final Submission Guidelines
Summit patch against the predix branch with the new source code.
Submit a short deployment/verification guide.