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.