[96h] TC Community App - Blog Component

This challenge has shorter time periods! 96h submission and 24h review phases.

Challenge Objectives

• Create a “Blog” component that will fetch and render a collection of BlogPost components with pagination support.

Project Background

Community App is the new member-facing frontend of Topcoder platform. We integrate Contentful CMS into it to ease the process of content creation/update. Multiple sub-sites use the concept to deliver quality content. This challenge is part of the integration process.

Technology Stack

Community App is ReactJS web application build with ExpressJS / NodeJS / JavaScript.

Code access

Community App code is available from its public GitHub repository. For this challenge, you will work out of the latest commit from new-develop branch.

Introduction

We have a basic starter guide related to the topic here. It describes how to setup developer environment and what is “Good Contentful Component”. There is related sub-document “ContentfulLoader” that describes mechanics driving the Contentful Components. Please start by reading those.

Updated Topcoder's Contentful types: Please use this export of Contentful space. It contains the models for the new component already defined.

Requirements

• Blog component (major)

Implement new component in Contentful folder called “Blog” following the code style and practices used by the existing Contentful components in Community App.

The Blog is a container of BlogPost components with pagination element at the bottom. It will fetch BlogPosts from Contentful with given/configurable “blog” key using the ContentfulLoader then render entries paginated via the BlogListView component.

The ContentfulLoader already supports pagination via its `entryQueries` property. We will use it for implementation, therefore `entryQueries` will have the following structure:

$blogKey, $limit, and $page are variables as those should be properties on Blog component. Where:

• $blogKey - The value of the blog field of blogPost model to use when fetching
• $limit - Items per page - defaults to 10
• $page - Page of results - defaults to 1

The response from Contentful will include info about the pagination. Use it to build simple pagination links below the list. 1,2,3… will be links to pages blog/:id/:page but for now just use # on them. We will link them latter. The number of links should be correct. For the example above we use “total” so there will be 1256/100 = 12.56 ~ 13 pages. Simple <ul> with 13 links 1,2 to 13 has to be rendered and current page marked bold.
Bonus points will be given in review for submissions that implement more advanced paginations. For instance, loading next page of results via "Load More" button until all pages are loaded. Or pagination with << ,< ... >,  >> support.

BlogListView component is a presentation component. This means it needs all content already fetched. It does not fetch content itself it only presents/renders it. Therefore you will need to wrap the results from response of blogPost query in ContentfulLoader to load the “heroImage” of the blogPost item if such is present. Then pass the data to the BlogListView for rendering.

Blog should support themes like for instance, ContentBlock does(via theme property). The default theme is applied unless other is configured. It (the default theme) should just layout the BlogListView items inside flexbox container in a column direction and place the pagination below it.

• Demo the new Blog component (major)

Create stand-alone demo, mounted on examples/contentful/blog/:blogKey/:page. So for example request to examples/contentful/blog/TCO Blog/2 will render the 2nd page of Blog where blog key is “TCO Blog”.
Link the example same as it is done for existing components in Contentful. Enable use the `preview` flag.

It will be used for verification of the component when review.

• `npm test` should remain working  (major)

Final Submission Guidelines

Submit a Git patch for Community App against the commit mentioned earlier.

Submit deployment guide and verification document as two separate documents.

Include your `CDN_API_KEY` and `SPACE_ID` and `PREVIEW_API_KEY` keys so reviewers can test your submission when running against your Contentful space.