ico-arrow-big-left

Community App - Support of Environments and Spaces in Contentful Integration

Key Information

Register
Submit
The challenge is finished.
Show Deadlines

Challenge Overview

Community App is the community-facing frontend of Topcoder platform, written in ReactJS. Its various segments rely on Contentful CMS as the content source. We use a custom solution for integration with Contentful; in this challenge you will improve it to support multiple Contentful environments and spaces within the app.

Project Background

Community App powers various segments of Topcoder platform: member dashboard; challenge listing, details, and submission pages; numeorous sub-communities, e.g. Blockchain, Cognitive, Veterans; new track pages, like design, development, data-science. Many of newly created pages use Contentful CMS, and in the current implementation all content lives in the same Contentful space, complicating its efficient management, and permissions control. The support of multiple environments and spaces will greately facilitate those.

Technology Stack

Community App is an isomorphic ReactJS app (thus Javascript, with ExpressJS / NodeJS server side). If you have not participated yet in any challenges related to Contenful integration in Community App, this brief will help you to get started.

Code Access

The code is available in the GitHub repository, please work out of the commit 1bb3c868f61c999b08704cd1dbfa0893e3c46b86.

Individual Requirements

The major requirement of this challenge is to implement support for multiple Contentful environments and spaces within the app. To properly achieve that, you should take care about the following points:

  • Contentful-related configuration should be updated. In the current code, it only allows to configure a single space / cdn and preview keys. We need a way to configure different keys for arbitrary number of spaces and environments. Suggested shape of configuration is:
    CONTENTFUL: {
     space_name: { // Human-readable name of space we choose to use
       SPACE_ID: ‘Space ID’,
       master: { // Name of an additional environment
         CDN_API_KEY: ‘CDN key for the default (master) env’,
         PREVIEW_API_KEY: ‘Preview key for the default (master) env’,
       },
       development: { // Name of an additional environment
         CDN_API_KEY: ‘CDN key for the development environment’,
         PREVIEW_API_KEY: ‘preview key for development environment’,
       },
       another_env: { // Name of another environment
         ...
       }
     },
     another_space_name: { // Name of another space
       ...
     },
     ...
    }
    Do not forget to update the mapping between environment variables and configuration.
     

  • In the server-side code of solution you will update related proxy endpoints and service. All endpoints should be prefixed with /:space_name/:environment piece of the path, which will be passed to the service, to get data / make queries against the necessary space and environment, using correct config data for that.
     

  • In the isomorphic part of the code, you will need to update actions and reducers related to Contentful data, and also ContentfulLoader container. Currently, data loaded from Contentful are stored in the Redux store in the following way:
    contnetful: {
     preview: {
       assets: {
         ...
       },
       entries: {
         ...
       },
     },
     published: {
       ...
     }
    }
    Your changes to actions and reducers will change that into (adding two additional levels, similar to configuration update):
    contnetful: {
     space_name: {
       master: { // environment name
         preview: {
           assets: {
             ...
           },
           entries: {
             ...
           },
         },
         published: {
           ...
         }
       },
       development: {
         preview: {
           assets: {
             ...
           },
           entries: {
             ...
           },
         },
         published: {
           ...
         }
       },
       ...
     },
     another_space_name: {
       ...
     }
    }

    The update of ContentfulLoader will add optional spaceName and environment props to it. Their default values should be default and master. These properties will work similar to the existing preview property, and they will specify to the loader the target space and environment from where the content should be loaded, or the queries done.
     

  • As usual, your updates should respect ESLint rules, should not break unit tests, and follow all other coding practices we use in Community App.
     

In case of any doubts, please do not hesistate to ask for clarifications in the challenge forum.

Final Submission Guidelines

Submit Git patch with your changes, along with a verification video.

Reliability Rating and Bonus

For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
Read more.

ELIGIBLE EVENTS:

Topcoder Open 2019

REVIEW STYLE:

Final Review:

Community Review Board
?

Approval:

User Sign-Off
?

CHALLENGE LINKS:

Review Scorecard

?