Topcoder - Build Our New Challenge Creation App

Challenge Objectives

• Create our new Challenge Creation app based on the provided storyboard.

Tech Stack

• React.js

• SCSS

• Heroku

Code Access

Although this is a new project, you may get inspired from this project https://github.com/topcoder-platform/submission-review-ui

Note: This is just for reference. You are not required to strictly follow it.

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

You can find a link to the storyboard on the challenge forum.

Authentication / Login state

Similar to the provided repo (submisison-review-ui app), you need to use the tc-accounts module to handle authentication. If the user is not logged in, redirect him to the login page.

Landing and challenges pages

• The landing page should be based on the design from 8.0 active challenges.png but no project should be selected on the sidebar.

• The projects on the sidebar will be populated by fetching the data from the http://api.topcoder-dev.com/v3/direct/projects/user endpoint.

• Each item (project) on the sidebar will have 3 child items: Active challenges (link to /projects/{projectId}/challenges/active), All Challenges (link to /projects/{projectId}/challenges/all) and New Challenge (link to /projects/{projectId}/challenges/new).

• If there are no challenges available, show a simple message saying that there are no challenges available.

• Hovering over an active challenge will show the “Edit” and “View Forum” links.

• Draft challenges will have an Activate button. Currently, this can be dead-link.

• Hovering over a Completed challenge will show the “View forum” link.

• To fetch challenges, call the /v4/challenges endpoints with the projectId query param. You may have to pass it as query=projectId={the ID}

Create new challenge page

Storyboard:

• 1.0 Challenge Engine Advanced code settings.png

• 1.1 Challenge Engine basic code settings.png

• 1.2 Challenge Engine basic.png

• 2.0 Challenge Engine basic Web Design settings markdown preview

• 6.0 confirm.png

• 7.0 success.png

 

Requirements:

• You are expected to just build the prototype. You don’t need to implement the actual challenge creation (calling the API) functionality. You can just log the challenge object to the console log.

• All mock data will come from JSON file(s).

• All fields must be created as separate components to allow us to build this page dynamically based on the selected track/type or based on different conditions.

• For the editor, you can just a simple textarea for now. The actual WYSIWYG/Markdown will be implemented later.

• Clicking launch will show the confirmation popup (the icon is not needed).

• Clicking Confirm will show the success popup (the icon is not needed).

 

The following screens are out of scope:

• 0.0 Declaration.png

• 3.0 import.png

• 4.0 from templates.png

• 5.0 save template.png

Deployment Environment

We will deploy this app temporarily on Heroku and we will then move it to AWS.

What To Submit

Submit your source code on a zip file.

Your project must include a README.md file explaining that will cover the following:

• Configuration

• Local deployment

• Heroku deployment (support both development/production)

Final Submission Guidelines

Please read above.