TC Contentful - new components

Challenge Objectives

• Create new Contentful component that renders shapes.

• Create new Contentful component that renders images.

Project Background

Topcoder is utilizing Contentful (a headless CMS) to deliver high-quality content and provide a flexible platform to manage that content. In this challenge, you will help in the process by fulfilling the requirements listed below.

Technology Stack

NodeJS, Javascript, ReactJS, Contentful, CMS, Linux, Mac

Prerequisites

• This challenge requires preregistered Contentful account

• Linux or Mac based OS

Working on Contentful challenges

Before starting to work on the challenge please take some time to get familiar with the basics of setup, configuration, import/export of Contentful space and types. We have helpful documentation on the topics here.

 

To jumpstart the work process we have exports of TC community space here. Note that you will need to import “tc-core.json” which configures the core TC components in your space. It has all custom component types Topcoder is using.

 

The general preparation steps to work on Contentful related challenge are:

 

1. Register your Contentful account and obtain/note its credentials.

2. Import the TC custom types “tc-core.json” stored in the file to your space.

3. Setup community-app locally. Some tips:

   1. Use node version 8.11.2

   2. Ask for help in TC Slack channels when some difficulties arise

4. Provide Contentful credentials as environment variables to work against your space.

5. Complete challenge requirements as per specification below.

6. Test your work using the example routes `http://local.topcoder-dev.com:3000/examples/contentful/<:type>/<:id>`

7. Export your space(via Contentful cli) to file and include it with submission.

 

Most core components do have mounted routes to ease the develop/test work with them. See this file for details.

General Requirements(All Major)

• If You make changes to code it should pass project linting as configured. After your work `npm run lint` should complete without errors.

• We should be able to import the export file(should be provided with submission) in TC Contentful space without any errors using the `contentful space import` command.

• New developed components should be placed in the app’s contentful folder and have basic unit tests implemented. Take MemberCard spanshot test as an example, your new developed component should have a similar basic test.
• You will need to install Contentful Country Select UI Extension to your space before starting. It is been used by the new models.���

Individual Requirements(All Major)

• For this challenge, there is an updated version of “tc-code.json” with the models of the shape and image of the new components. It also contains some demo content and is available here. The submission should demo the “Test page” viewport rendered properly with fulfilled requirements.

• The detailed specification of component requirements is provided here.

• The new components should be registered/embedded for rendering in the Viewport loader the same as done with the other components.

Final Submission Guidelines

• Patch with required code updates against the latest commit in feature-contentful branch in community-app.

• An exported file of your dev Contentful space.

• Verification document with steps on how to verify your submission.

• Deployment guide. Be specific!