TC EDU - UI Component prototypes

Challenge Objectives

• Implement ReactJS components for TC Educational portal following the provided design.

Project Background

Topcoder is utilizing Contentful (a headless CMS) and ReactJS to deliver high-quality educational 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

General Requirements(All Major)

• Implementation of the components is to be done in the community-app project.

• If You make changes to code it should pass project linting as configured. After your work `npm run lint` should complete without errors.

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

Individual Requirements(All Major)

• Please follow the provided design for desktop and mobile. The created components need to be fully responsive and match the provided design.

• The project assets folder is here and marvel. If you need anything please ask in forums.

• Scope of this challenge is to create RactJS based presentational components for:

  • Search bar - as per screen 1 and screen 2. This component will be used by visitors to search the EDU portal for resources. It has auto suggest functionality when user types into the text field. Use mock data to create the component following this structure. It is an array of articles that will be fed to the component. Use “type” field to group the results and represent them as per design.

  • Tracks tree(accordion) - as per screen. This is component to represent tracks and child categories for them. Only one track and its children can be visible at the time. The mock data for this component should be [{title: “design”, items: [...]}, ...] Note there is current active item that is highlighted. The component should support it.

  • Tracks filter - as per screen. When user types in Tags field and hits “Enter” tags should appear as per design and only if there is no such tag yet. Click X on a tag should remove it from the list. Author is a dropdown of author names. Date are datepickers that allow user to specify period of filtering. Community app is using https://github.com/airbnb/react-dates so please integrate we do not need to reinvent the wheel. “RESET” button should bring component to initial state. “APPLY FILTER” is noop for this challenge but component should keep state properly so further integration is easy. The new component should support initial state. Means if such is provided it has to render/init properly with some selected tags and/or other filters.

  • Search page filter - the left side of the search results page. The “Design Tools” area is to be ignored. We won’t have it. The “SUB CATEGORY” section is depending on the selected “CATEGORY”. Please, demo this in your presentation with some proper mock data(the structure is free to choose). There can be only one “CATEGORY” selected at the time but multiple “SUB CATEGORY”. The filter is at the bottom is similar to “Tracks filter” as described above. “APPLY FILTER” is noop for this challenge but component should keep state properly so further integration is easy. The new component should support initial state. Means if such is provided it should correctly set selected “CATEGORY”, “SUB CATEGORY” and/or filters.

Final Submission Guidelines

• Patch with required code updates against the latest commit in feature-contentful branch in community-app.

• Verification document with steps on how to verify your submission.

• Deployment guide. Be specific!