Challenge Overview
Challenge Objectives
-
Create the Language section under the Profile settings page.
-
Create the Education section under the Profile settings page.
-
Create the Work section under the Profile settings page.
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 Language, Education & Work under the Profile tab are in the scope of the current tab.
-
The data for the Language, Education, and Work 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).
-
You need to support all screen sizes (Desktop, Tablet, Mobile).
For the Spoken/Written level dropdown under the Language section, use the following values:
-
Basic
-
Intermediate
-
Advanced
-
Native
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 to 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.