Challenge Overview
Challenge Objectives
-
Enable the Skills section under the Profile settings page.
-
Create the Communities 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.
Legacy app repo (for reference only): https://github.com/appirio-tech/topcoder-app/
Individual requirements
-
Only the Skills & Communities sections under the Profile tab is in the scope of the current challenge.
-
The main functionality for the skills was implemented on a previous challenge but it was disabled later. You need to enable that section again and update it so it matches with the updated design.
-
The “Years of experience” from the design should not be implemented. We don’t need them.
-
For the communities, you need to reuse the logic from the legacy app but follow the design from the provided storyboard.
-
You need to support desktop, tablet & mobile.
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.