Challenge Overview
Challenge Objectives
-
Create the Organization section under the Profile settings page.
-
Create the Hobby section under the Profile settings page.
-
Create user consent modal.
Project Background
We are in the process of migrating many of the legacy pages of our platform to the new Community App repo based on a newer technology stack and improve the overall user experience.
In this series of challenges, we are targeting to the public profile page and the profile settings page based on our new design (attached on the challenge forum, available on registration).
Technology Stack
-
Node.js
-
JavaScript
-
React.js
Code Access
The work is to be done in the Community App repo, out of the latest commit in new-develop branch.
Individual requirements
-
Only the Organization, Hobby sections under the Profile tab and the user consent modal are in the scope of the current challenge
-
The user consent modal must be shown every time the user updates/creates any trait. The logic behind that modal is the same as the User Consent option in the Personalization section https://marvelapp.com/8gc9e84/screen/44675023.
-
If the previous value of the user consent option was false, clicking “Ok” should set that to true and should save it.
-
If the previous value of the user consent option was true, clicking “Don’t allow” should set that to false and should save it.
-
The data for the Organization, Hobby & Personalization sections must be saved as “user traits”. 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.
-
The actions, services were already created for managing user traits.
-
The user should be able to delete an existing trait (entry) by clicking the delete icon.
-
All components 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 “add <type>” button.
-
Extract all icons from the Zeplin project (Request access on the challenge forum if you don’t have already).
Important Notes
-
You should follow the best practices established in the repository:
-
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!
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.