Challenge Overview
Challenge Objectives
-
Integrate the challenge listings page of our new challenge editor app with our backend API.
Tech Stack
-
React.js
-
SCSS
-
Heroku
Code Access
Repo: https://github.com/topcoder-platform/challenge-engine-ui
Branch: develop
Backend repo (to run the API locally)
Repo: https://github.com/topcoder-platform/challenge-api
Branch: develop
Dev instance: https://tc-challenges-v5-dev.herokuapp.com
It is recommended to run the API locally to avoid conflicts with other competitors or anyone who’s using the deployed instance as the API is new and there is not enough data for testing available.
Project Background
As part of this series, we’re building a brand new app that will replace the current “Direct” app that our copilots use to run challenges.
Detailed Requirements
As part of this challenge, you need to integrate the challenge listings page with our V5 challenges API.
In the landing page, you need to load all active challenges. Only filter based on the status field. When viewing challenges for a specific project, use the projectId query param to filter the results.
Some data like the currentPhase, submissions & registrants is missing from the API response. If the data is missing, show N/A or 0.
The challenge end date should be calculated. Reuse the logic from here. Perhaps it makes sense to extract that into a helper method.
If the challenge status is Draft, show an Activate button like in the design (https://marvelapp.com/8d10136/screen/56221095). Clicking that button should work the same as clicking the Launch button from the Create New Challenge page. It should show a confirmation modal and on confirm, it should PATCH the challenge status to Active.
Important: all filtering must be done on the server side. Don’t do any client side filtering other than the search we currently have.
Deployment Environment
We will deploy this app temporarily on Heroku and we will then move it to AWS.
What To Submit
Submit a git patch for the latest commit of the develop branch.
Make sure to provide the exact commit you used and instructions on how to apply your patch.