Attention! This is a fast code challenge! The submission phase is 72 hours and the review, appeals phases are shorter than usual.

Make sure you don’t miss any deadline!

 

In this very simple challenge, you need to create a new sub page in the User’s Settings Profile page that will follow the new look and feel based on our new storyboard design (link on the challenge forum).

Note that most of the required code is already created (actions, reducers, services, components) so you don’t have much to create from scratch.

 

The work is to be done in Community App, out of the latest commit in new-develop branch.

You should follow the best practices established in the repository:

• Important: We use this stand alone library: https://github.com/topcoder-platform/topcoder-react-lib for any actions/reducers/services of current ReactJS based app.

• As part of this challenge submission you also might need improve https://github.com/topcoder-platform/topcoder-react-lib for any actions/reducers/services updates

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

• Do not violate ESLint rules for JS code, nor StyleLint rules for SCSS;

• Properly use babel-plugin-react-css-modules and / or react-css-themr for styling;

• Use SCSS variables and mixins from the global stylesheets (/src/styles/_tc-styles.scss). Especially, when it relates to colors, fonts, etc;

• Do not break existing unit tests.

• Etc.;

 

Should you have any doubts, do not hesitate to ask for clarifications in the challenge forum!

Challenge scope

• Only the “Devices” and the “Software” tabs from the sidebar are in the scope of this challenge. The rest of the traits will be implemented in upcoming challenges.

• The data must be saved as a “user trait”. Please refer to the POSTMAN collection of the ap-member-microservice repo (you can find it attached on the challenge forum in case you don’t have access to the repo) for details on how to use the endpoints to create/read/delete traits.

• All fields are required. Show a simple error message if the form is invalid when the user clicks the “Add <type>” button.

• Extract all icons from the Zeplin project (Request access on the challenge forum if you don’t have already).

• The logic behind all user traits is the same thus you can reuse the existing services/actions reusable/generic and only update them if needed.

• Make sure the current tests are passing.

 

For the dropdown menus, you need to create a static JSON file with the options below:

Device type:

• Desktop

• Laptop

• Tablet

• Smartphone

• Console

Software type

• Developer Tools

• Browser

• Productivity

• Graphics & Design

• Utilities

Supported devices

For this challenge, we only target Desktop devices.

Final Submission Guidelines

- Submit a git patch for the latest commit in the https://github.com/topcoder-platform/community-app/tree/new-develop

& https://github.com/topcoder-platform/topcoder-react-lib/tree/develop

branch and a demo video showing your submission in action.

- Make sure to mention the exact commit so we can apply your patch file.

- The winner must create a PR against our https://github.com/topcoder-platform/community-app/tree/new-develop

& https://github.com/topcoder-platform/topcoder-react-lib/tree/develop branch.