Challenge Overview
Attention! This is a fast code challenge! The submission phase is 72hours and the review, appeals phases are shorter than usual.
Make sure you don’t miss any deadline!
For this challenge, you need to create a new sub Accounts 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).
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 the library 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.;
Any doubts, do not hesitate to ask for clarifications in the challenge forum!
Challenge scope
Design Source:
Zeplin: https://zpl.io/adMnXjl
General Tasks
- Only the “Accounts” tab from the sidebar are in the scope of this challenge.
- Extract all icons from the Zeplin project (Request access on the challenge forum if you don’t have already).
- We don't need new tests but we shouldn't break any of the existing. But, make sure the current tests are passing.
1). My Account
Zeplin: https://zpl.io/2j4Yw4Q
- No need build the services related to Email verification flow, mostly for this My Accounts we just need UI created
- Topcoder username displayed on top
- Email Address and password fields displayed below the title
- Passwords are not stored, managed by Auth0.
- Current email or Current password fields should not editable
- There will be a new button to Change Email Address
- Click Change Email button need load hidden New Email Address field (https://zpl.io/VDzWnzW )
- After click the Send Verification email sent, change the button to Send Verification Email Again. (https://zpl.io/ad7Nk71)
- Create these 3 static pages on settings/account/email-verification/ routes
- This is the success message look (https://zpl.io/29ZjyZp)
- This is the failed message look (https://zpl.io/VDzWnze)
- This is the is the verification already expired (https://zpl.io/2EAWeA8)
- Click Back button need take user back to Topcoder Settings Account tab
2). Linked Account
Zeplin: https://zpl.io/boxDDzo
- For this Linked Account tab, Linked account already exists within the community-app code
Refer to this path: src/shared/components/Settings/Profile/ExternalLinks
- Follow the storyboard design for this challenge submission
- Add a Web link placed on top
- User can type a web link and press enter on keyboard need save the value, since we not have the Add button anymore
- Re-use existing message validation
- New added web link need displayed below the social account links like existing code
- Make sure you update the social icons to the new styling based on storyboard with rounded corner and title below
- Social icons need to be using grey colored before user add/connect them.
Supported devices
For this challenge, we only target Desktop devices.
- Submit a git patch for the latest commit to these following repos:
Community App repo: https://github.com/topcoder-platform/community-app/tree/new-develop
Topcoder React Library: https://github.com/topcoder-platform/topcoder-react-lib/tree/develop
- Make sure to mention the exact commit so we can apply your patch file.
- The winner must create a PR against all required repos
Make sure you don’t miss any deadline!
For this challenge, you need to create a new sub Accounts 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).
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 the library 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.;
Any doubts, do not hesitate to ask for clarifications in the challenge forum!
Challenge scope
Design Source:
Zeplin: https://zpl.io/adMnXjl
General Tasks
- Only the “Accounts” tab from the sidebar are in the scope of this challenge.
- Extract all icons from the Zeplin project (Request access on the challenge forum if you don’t have already).
- We don't need new tests but we shouldn't break any of the existing. But, make sure the current tests are passing.
1). My Account
Zeplin: https://zpl.io/2j4Yw4Q
- No need build the services related to Email verification flow, mostly for this My Accounts we just need UI created
- Topcoder username displayed on top
- Email Address and password fields displayed below the title
- Passwords are not stored, managed by Auth0.
- Current email or Current password fields should not editable
- There will be a new button to Change Email Address
- Click Change Email button need load hidden New Email Address field (https://zpl.io/VDzWnzW )
- After click the Send Verification email sent, change the button to Send Verification Email Again. (https://zpl.io/ad7Nk71)
- Create these 3 static pages on settings/account/email-verification/ routes
- This is the success message look (https://zpl.io/29ZjyZp)
- This is the failed message look (https://zpl.io/VDzWnze)
- This is the is the verification already expired (https://zpl.io/2EAWeA8)
- Click Back button need take user back to Topcoder Settings Account tab
2). Linked Account
Zeplin: https://zpl.io/boxDDzo
- For this Linked Account tab, Linked account already exists within the community-app code
Refer to this path: src/shared/components/Settings/Profile/ExternalLinks
- Follow the storyboard design for this challenge submission
- Add a Web link placed on top
- User can type a web link and press enter on keyboard need save the value, since we not have the Add button anymore
- Re-use existing message validation
- New added web link need displayed below the social account links like existing code
- Make sure you update the social icons to the new styling based on storyboard with rounded corner and title below
- Social icons need to be using grey colored before user add/connect them.
Supported devices
For this challenge, we only target Desktop devices.
Final Submission Guidelines
Submission deliverables- Submit a git patch for the latest commit to these following repos:
Community App repo: https://github.com/topcoder-platform/community-app/tree/new-develop
Topcoder React Library: https://github.com/topcoder-platform/topcoder-react-lib/tree/develop
- Make sure to mention the exact commit so we can apply your patch file.
- The winner must create a PR against all required repos