Challenge Overview

Challenge Objectives

  • Create a ReactJs SPA based on the provided storyboard.

Supported Browsers / Devices

We are targeting desktop devices and all components are expected to be working flawlessly on the following browsers:

  • Internet Explorer 11

  • Chrome (latest version)

Detailed Requirements

As part of this challenge, you need to build a ReactJs SPA (single page app) based on the provided storyboard.

The storyboard is provided on the challenge forum as a MarvelApp link. Please use the “Handoff” feature from MarvelApp to be able to see the details of each UI element.

 
  • All screens from the provided storyboard are in the scope of this challenge.

 

You will find the storyboard (design) attached to the challenge forum.

Please try to match the provided design as close as possible.

Important Notes

  • All components should be created as reusable ReactJs Web Components

  • All data should be passed to the components using props. Do not hardcode any data.

  • Action methods should be passed using props.

  • Please use Redux for state management.

  • Please create sample JSON files for loading data into the application. Do not hardcode anything. We will replace the JSON files with calls to the actual APIs later. You will also find a sample JSON file on the challenge forum that has some example data you need to follow (structure).

  • Follow the best practices for creating ReactJs SPAs.

  • Properly split your code into containers and components.

  • Use SCSS for styling

  • Because our client is using a custom library for various components (eg buttons, checkboxes, select inputs etc), you need to create a custom component for each element so the client will then replace ours with theirs.

Unit Testing

You need to cover the code with unit testing and have a coverage of at least 90%.

Documentation

You need to create a detailed README.md file with instructions on:

  • How to run the unit tests.

  • How to set up and run the application.

  • Anything else you think may be useful information about the library.

What To Submit

Submit your source code in a zip file.

 


Final Submission Guidelines

Please read above

ELIGIBLE EVENTS:

2021 Topcoder(R) Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30136392