[48hr]Topcoder Challenge detail integrate related thrive articles challenge

Challenge Overview

In this challenge we will integrate related topcoder thrive’s article that are related to the challenge details.

Project Overview

The topcoder thrive is a place where topcoder and community shares guides, tutorials etc for the topcoder community members. In topcoder challenge detail page we would like to show related thrive articles so that members could see some useful information from those articles.

 

With this integration, new member will easily get help from thrive article and also our content at thrive will reach more meaningful members.

Technology Stack

React JS, SCSS, HTML, JavaScript

Assets

• Download the FF design from This Google Drive Link

• View the FF design from This Marvel Project Link

 

Individual Requirement

1) Update the UI based on design(check below for changes in UI Changes and Interaction section)

2) Integrate the related thrive article from below API

Method: GET

URL: https://community-app.topcoder.com/api/cdn/public/contentful/EDU/master/published/entries?content_type=article&limit=3&skip=0&query=Angular&fields.type=Article

 

Where bold part(query) is sent based on current challenge’s technologies

 

You should use this service getEDUContent. Check example of usage of this service.

 

3) If challenge is tagged with "other" only as technology, hide this section. Similarly if there are no articles found for given tag then hide this sections as well.

4) Exclude “Other” and don’t search for that tag

5) Please notice that Tags feature only available for challenges in Development and Data Science track (Design track does not support tags for now)

6) Even though there are many tags added to a challenge, if more than one tag is present, display related articles and challenges based on the first tag only 

7) If more than one tag is present, display related articles based on first tag

8) Update the tests with modified changes.

9) Lint should be pass.

UI Changes and Interaction

1) Add link to recommended THRIVE articles

     

• Clicking this should scroll to recommended section at the bottom.

2) Add Recommended THRIVE articles cards
     

• Explore THRIVE link should open topcoder.com/thrive url in new tab.

• Click each card/tile’s title should open article in new tab as in thrive home page

• Use same components/css from this page

Final Submission Guidelines

Please submit the following:

• Git patch against community app. Please use branch  feature-details-page-suggestion-cards
• Git patch against topcoder-react-lib(if needed). Please use branch feature-details-page-suggestion-cards
• Separate verification guide in docx/md format.