Challenge Overview
Community App is the member-facing frontend of Topcoder platform, written in ReactJS. We use Contentful as the Content Management System (CMS). In this challenge you will turn an existing component of community-app into Contentful-integrated content type.
1. In CMS the new BlogFeed content model will allow to set: Blog Feed name (not rendered, only shown inside CMS as entry titles for bookkeeping), Title (optional, if specified it will be rendered on top of the blog feed segment, as in the existing blog feed blocks), RSS feed URL (from where the blog feed should be pulled), Number of Posts (the maximal amount of blog post cards to be rendered), Theme Name (that will allow to select base styling of the block, i.e. layout), and a few areas for additional custom styling to optionally apply to the whole block, and separate cards, on top of the selected theme.
2. The root BlogFeed component will be similar to the ContentBlock component, in the way it loads data from CMS, and handles themes and optional additional styles. It should be registered inside the Viewport component, so that BlogFeed blocks can be added as the Viewport children.
3. Once data are loaded from CMS, they will be passed to the BlogFeed container, which will use the logic currently located in the Learn page container, to load RSS blog feed, convert it from XML into JSON, store into the Redux state, and pass into the BlogFeed rendering component.
4. The BlogFeed rendering component and its children will take care to render necessary amount of blog post cards, and style them with the correct themes and styles.
5. Within this challenge you will implement two themes for BlogFeed blocks. One will mimic the current theme at the Blockchain page (1 full-width card on top, then two side-by-side cards in each row), the other theme will render all cards into a signle row. In mobile screen size, in both themes, the cards will rearrange into column with one card per row.
6. Be sure to update the model of Contentful space in the repo (config/contentful/community.json), and add demo page with the BlogFeed component, as we do for other content types. Do not remove existing stand-alone implementations of the blog feeds, nor modify the pages using them. In case of any doubts do not hesitate to raise questions in the challenge forum.
Project Background
community-app is developed to replace legacy parts of Topcoder platform, and to implement new features, and even client-oriented offers. It is developed for the community by the community. The CMS-related subproject aims to provide user-friendly and flexible way for Topcoder teams to create and edit complex pages on Topcoder website, without much help from the dev team.Technology Stack
The app is written in ReactJS (thus JavaScript), Contentful is used as the CMS.
Code Access
The code is available in the community-app repository (work out of the commit de13fd6ce44f9433495112c7d08c0b79000f3a6e). Here we have brief instructions on how to setup your free Contentful account with a clone of Topcoder data models, also in the challenge forum you will find temporary keys for read-only access to the production Contentful space (they are necessary for proper work of some app segments).Requriements
Check the Learn page of Topcoder Blockchain Community. There are two block, ConsenSys @ Medium and Topcoder Blockchain Blog, that fetch RSS feeds of the corresponding blogs and render abstracts of the latest posts. In the code it is implemented as two separate components (1, 2), and with the Redux-related logic located in the Learn page container. Your goal in this challenge, to create a new Contentful component that will expose this functionality to Contentful (place it under /src/shared/components/Contentful/BlogFeed and /src/shared/containers/Contentful/BlogFeed). Here is brief summary of what should be done:1. In CMS the new BlogFeed content model will allow to set: Blog Feed name (not rendered, only shown inside CMS as entry titles for bookkeeping), Title (optional, if specified it will be rendered on top of the blog feed segment, as in the existing blog feed blocks), RSS feed URL (from where the blog feed should be pulled), Number of Posts (the maximal amount of blog post cards to be rendered), Theme Name (that will allow to select base styling of the block, i.e. layout), and a few areas for additional custom styling to optionally apply to the whole block, and separate cards, on top of the selected theme.
2. The root BlogFeed component will be similar to the ContentBlock component, in the way it loads data from CMS, and handles themes and optional additional styles. It should be registered inside the Viewport component, so that BlogFeed blocks can be added as the Viewport children.
3. Once data are loaded from CMS, they will be passed to the BlogFeed container, which will use the logic currently located in the Learn page container, to load RSS blog feed, convert it from XML into JSON, store into the Redux state, and pass into the BlogFeed rendering component.
4. The BlogFeed rendering component and its children will take care to render necessary amount of blog post cards, and style them with the correct themes and styles.
5. Within this challenge you will implement two themes for BlogFeed blocks. One will mimic the current theme at the Blockchain page (1 full-width card on top, then two side-by-side cards in each row), the other theme will render all cards into a signle row. In mobile screen size, in both themes, the cards will rearrange into column with one card per row.
6. Be sure to update the model of Contentful space in the repo (config/contentful/community.json), and add demo page with the BlogFeed component, as we do for other content types. Do not remove existing stand-alone implementations of the blog feeds, nor modify the pages using them. In case of any doubts do not hesitate to raise questions in the challenge forum.