Challenge Overview
Challenge Objectives
-
Create new Contentful component that fetches and renders member card[s].
-
Update Contentful Tab Item component to support Viewport as panel content.
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.
The general preparation steps to work on Contentful related challenge are:
-
Register your Contentful account and obtain/note its credentials.
-
Import the TC custom types “tc-core.json” stored in the file to your space.
-
Setup community-app locally. Some tips:
-
Use node version 8.11.2
-
Ask for help in TC Slack channels when some difficulties arise
-
-
Provide Contentful credentials as environment variables to work against your space.
-
Complete challenge requirements as per specification below.
-
Test your work using the example routes `http://local.topcoder-dev.com:3000/examples/contentful/<:type>/<:id>`
-
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.
-
To jumpstart the work process we have exported a demo space here. Note that you will need to import it and begin your work.
-
You will need to install Contentful Country Select UI Extension to your space before starting. It is been used by the `memberCard` model.
Individual Requirements(All Major)
-
In the scope of this challenge, we need to implement a new component that will represent the member card. The required design that has to be followed is here: https://marvelapp.com/17dai3f6/screen/57454426/handoff
-
The component needs to support theming same as contentBlock does. The provided design is the default theme. As contentBlock is very similar in structure it is suggested to be used as a base for your development.
-
Image and country are optional fields thus those need to be hidden if not provided to entry.
-
The member card as a whole and its image are links to the URL field of the model.
-
Please, use/integrate http://flag-icon-css.lip.is library for country flags. Value for the country will come from the extension. Check its source code under “Extension” tab.
-
The new model `memberCard` and demo/verify content is provided in the space export file.
-
Viewport should be updated to render member cards properly.
-
This new component should be added to example routes and should have basic tests(snapshots) implemented.
- Currently, Tab Items do not support Viewport components as panel content. We need to change that and add such support. The space export has needed changes already made in the tab item model. Check them out.
-
Testing url when you import the file into space will be: http://local.topcoder-dev.com:3000/examples/contentful/viewport/7yVst7wTJIalmNhRoUNAWp reviewers will verify using it if submissions meet requirements.
Final Submission Guidelines
-
Patch with needed code changes against the feature-contentful��� branch of community-app.
-
Verification document with steps on how to verify your submission.
-
Deployment guide. Be specific!