Challenge Objectives

• Convert the provided prototype into React.js components that will be used from other apps.

Project Background

We are in the process of creating the new re-designed Navigation components for our platform.

Technology Stack

• React.js

• HTML5

• SCSS

• JavaScript

Code Access

Repo: https://github.com/topcoder-platform/community-nav-prototype

Branch: feature-react-components

Detailed requirement

As part of this challenge, you need to convert the provided prototype into React.js components.

 

• You need to set up your code so we can eventually publish this on npm and then import it in different React projects (SPAs) where we’ll use it (eg community-app).

• The visual and functional result should remain the same.

• Break down the code into small, self-contained components as you find appropriate.

• Data like the nav items, secondary nav items, user details etc must be passed to the components as props and should not be hardcoded.

 

You also need to create a demo app to demonstrate how we can actually import and use the components.

You may use any boilerplate (eg https://github.com/facebook/create-react-app) for this.

 

Should you have any questions, feel free to ask on the challenge forum!

Important Notes

• Use SCSS variables instead of hardcoding colors/paddings etc.

• Each component should have its own SCSS file. You may extract common styles on a separate file though.

• Properly use prop-types in all components.

• The components should be “themable”. See how the prototype supports a Light and a Dark theme.

What to Submit

Submit a git patch for the latest commit in the feature-react-components branch. Make sure to note the exact commit in your submission so we can apply your patch file.