Challenge Overview
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
-
You need to split the code into small, self-contained, reusable components. Do not create a single huge component that will have everything.
-
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.