Challenge Overview
Challenge Objectives
-
Create new ReactJS component called “ContentSlider” which will slide/cycle content loaded from Contentful space.
Project Background
Contentful was chosen to be our Content Management System (CMS) for the TC communities sites. We are in the process of creating/converting “plain” ReactJS components to “Contentful ReactJS” components - such that render remote content. This challenge is part of the related series.
Technology Stack
NodeJS, Javascript, ReactJS, Contentful
Deployment environment requirements
We have a basic starter guide related to the topic here. It describes how to set up a developer environment and what is “Good Contentful Component”. There is related sub-document “ContentfulLoader” that describes mechanics driving the Contentful components and especially how to load content. Please start by reading those.
Read the code and understand how Contentful Components work as the one required by this challenge should follow established practices and implement analogically. See “Banner” and “ContentBlock” as examples.
Updated Topcoder's Contentful types: Please use this export of Contentful space. It contains all needed models/types(contentSlider) already defined. Visually the model is available to be seen here.
Code access
Please base your work on latest commit from new-develop branch in our Community App repository.
Requirements
-
Content Slider Component (major)
Implement new component in Contentful folder called “ContentSlider” following the code style and practices used by the existing components in the Community App.
The “ContentSlider” is a container of components fetched/loaded from Contentful using the ContentfulLoader. Slider items are rendered based on theme layout and cycle automatically on specified interval or via user interaction. For now, only Banner items should be supported.
One theme called “Default” has to be implemented. For design see: https://marvelapp.com/372f56h/screen/43283257 Implementation should be responsive and fully match design provided. Means left/right arrows should be centered svg icons on overlay layer for both desktop and mobile. Those can be downloaded from the Handoff.
Slider’s autostart behavior should be controlled by the “autoStart” field. Sliding duration is controlled by “duration” field. Clicking on left/right arrow should work and move the slide in the corresponding direction. Count of slides and current slide number should be correct.
Suggested pseudo code
The solution should be close to the following code structure:
1. Load the ContentSlider by its id via the ContentfulLoader.
2. Map items to loader function that creates a ContentSlider component which is a wrap of ContentSliderItem components and extends React component. The ContentSlider component is keeping the state and handles cycling + user interaction and is themeable.
3. ContentSliderItem component will need to be wrapper/proxy to existing components. In this challenge Banner but we will add later. So it has to type check the ContentSlider item type and switch load conditionally the component(already implemented). See here for example how to type check and load corresponding Contentful component.
See/inspect the Accordion component for very similar implementation. It does work analogically and supports themes as the new ContentSlider should also do.
Any difficulties implementing this pseudo? Just ask in the forum for help and discussion.
-
Demo the new ContentSlider component (major)
Create stand-alone demo, mounted on examples/contentful/slider/:id. Link the example same as it is done for existing components in Contentful. Enable use the `preview` flag. This demo functionality will be used for verification of the component when review.
-
`npm test` should remain working (major)
Final Submission Guidelines
Submit git patch file with your work.
Submit deployment and verification documents. Two separate files named README.md and Validation.md should be submitted.
Include your `CDN_API_KEY`, `SPACE_ID` and `PREVIEW_API_KEY` keys so reviewers can test your submission when running the app against your Contentful space.