TC EDU Contentful - article component

Challenge Objectives

• Implement a new component that will fetch and render Contentful articles.

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 all new and needed Contentful operations please create a method in the service contentful and on the server-side services as well when needed.

• 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)

• Design specification of the new component is here. It should be followed strictly and match the provided design.

• Scope/area of the page is everything between header navi and footer area. The comments area is out of scope. We will add comments functionality latter.

• The breadcrumbs are to build from the following pattern: Home > “Track Category” and “Content Category” > “Title” fields of the article. All those should be a dummy link and the last(title) should be the active one(not Home as in design).

• The articles banner image is the “Featured Image” reference. The author is the Content Author reference.

• The articles tags are the gray ones at the top below the banner. Those should be rendered only if set in the article.

• The UP/DOWN vote buttons are in scope and should be functional. When visitor votes on an article its vote counts in the Contentful should be updated according to the vote. Also when the vote is done the component should put a cookie or a record in the localStorage to hinder the visitor from voting again. The user should be able to “take his vote back”. Such action will remove the user vote from Contentful and its cookie. Corresponding service “vote” that handles all related should be created.

• “Recommended for you” area should be shown only if the article has something set in the “Recommended” field. For rendering the cards in the area we will re-use the contentBlock component with blobCard theme.

• 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.

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

The article component needs to be responsive ready. For mobile specification follow specification here.

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!