Challenge Objectives

• Create the prototype for our new Submission Review app based on the provided storyboard.

Tech stack

• React.js

• Redux

Project Background

We’re in the process of creating a new app to help challenge members to view their submissions and their associated review results in order to improve the overall user experience in our platform.

Detailed requirements

The storyboard is provided on the challenge forum and will be available after you register for the challenge.

Landing

Route: /

 

• Clicking on a challenge “card” will take the user to the challenge details page. The whole card should be clickable.

Challenge details

Route: /challenges/:challengeId

 

• The challenge track and tags must be displayed under the challenge title.

• The completed/open phases should have green circle while upcoming phases should have gray circle. The current open phases should have the light blue background.

• The last column of the schedule table shows the phase duration.

• The view challenge button should be a link to https://www.topcoder.com/challenges/:challengeId (replace challengeId with the actual ID)

• The layout and the content of the submissions section depends on the challenge track (Develop/Design/Data Science). It’s up to you if you want to create separate components for each track or one for all. Make sure the code is clean and maintainable.

• Clicking on the submission ID of each submission will take the user to the Submission details page.

• For Marathon Matches, clicking on the arrow icon on the right side of a submission will expand the submission history.

• Design track is out of scope. We don’t have a design for that yet. For the design track, reuse the design from the development challenge. Just make the track icon below the challenge title blue.

Submission details

Route: /challenges/:challengeId/submissions/:submissionId

 

• Clicking on the left chevron arrow will take the user back to the challenge details page.

• Clicking on the challenge ID (including the icon) link will download the submission (dead-link for now).

General notes

• All user handles must be links to https://topcoder.com/members/:handle (replace handle with the actual user handle).

• Use fluid layout.

• Logout is a dead-link for now.

• All icons are from https://fontawesome.com/

• Going to any page that does not exist should redirect to the landing page.

Static Data - API integration

We don’t have all endpoints ready to be used yet thus in this challenge you need to load all data from JSON files.

In the API integration phase (next challenge), we’ll use our topcoder-react-lib package to fetch data from the APIs thus you must organize your code in such way to support the transition to from the static data to the integration using the topcoder-react-lib without much effort.

Important notes

• Follow the best practices for React.js applications.

• Properly use Redux.

• Properly use PropTypes.

• Properly split code into reusable, self-contained React components, conveniently grouped inside folder structure.

• Follow the https://standardjs.com/ for code formatting.

• You must use SCSS for the styles.

• You can find the correct colors here https://company-56102.frontify.com/d/zEXqGHFD1YN2/ui-library#/tc-styles/tc-colors Make sure to define variables instead of hardcoding the colors.

 

Documentation

You need to create a detailed README.md that will describe how to setup and run the application locally as well as how to build & deploy the application for production.

 

For now, you can assume that the production app will be deployed on Heroku.

What to Submit

Submit:

• A zip file containing your code and a detailed README.md

Final Submission Guidelines

Please read above.