TC EDU Contentful - article cards

Challenge Objectives

• Implement a new component that will fetch and render article cards.

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.

• For this challenge, we have created special Contentful export/dump file. ���It is here. Please, use it to import all latest types that are needed and create the demo dummy content by yourself.

Individual Requirements(All Major)

• In the scope of this challenge are all variations of article card present in the design specification here. We identified 4 variations that are to be implemented as component themes. Those are: “Article large”, “Article small”, “Video” and “Forum post”. For the implementation please use a similar approach as used for contentBlock component.

• Implementation should follow “wrap layout” and implement fixStyle functionality via “extraStylesForContainer” and “extraStylesForContentWrapper” fields.

• Article cards need to be responsive ready. For mobile views please follow specification here.

• The component should be registered in Viewport for rendering similar as we do for all other components.

• The new component should support “preview”, “environment”, “spaceName” to control where it fetched data. Similar to all other Contentfu components for instance Viewport.

• EDU assets drive folder is here.

• Demo all 4 types on an example viewport that will be accessed from reviewers via the examples API http://local.topcoder-dev.com:3000/examples/contentful/viewport/<:id>

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!