Attention! This is a fast code challenge! The submission phase is 48 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 update the Settings Profile page to follow new look and feel based on our new storyboard design (link on the challenge forum).

 

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 “Profile” sub-page and ONLY the “Basic Info” section form the sidebar is 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 components (Header, sidebar, form) must be reusable so they can be reused in other places of the community-app other than the user profile settings page.

• All fields are required. Show a simple error message if the form is invalid when the user clicks the “Save Changes” 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 try to make the required services/actions reusable/generic so they can be reused in the upcoming challenges.

 

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

Gender:

• male

• female

• other

Ethnic

• Caucasian

T-shirt size

• XXS

• XS

• S

• M

• L

• XL

• XXL

• XXXL

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.