Challenge Overview
Challenge Objectives
-
Develop standalone react components for login/registration screens
-
Integrate those components into our accounts app (login/registration) - an Angular app
Project Background
Topcoder Connect is client facing application of Topcoder. Customer use Topcoder connect to input requirements of their projects, then managers and copilots take it from there. You can see Topcoder Connect in action here: https://connect.topcoder-dev.com
We’re making some major design updates to the application and in this challenge we wil focus on user login and project creation screens
Technology Stack
-
ReactJS, SCSS, Angular 1.x
-
Node 8+
Code access
Our react components are hosted in react-components repo,feature/connectv2/components branch.
Accounts app repo is available here, use dev branch as base.
Marvel app designs for the new screens are available at https://marvelapp.com/190egf26/screen/47126012
Individual requirements
The workflow shown in the marvel app screens spans two of our apps: accounts app (login/registration - step 1) and connect app (project creation, steps 2-4) Implementing only the first step in the workflow is in scope of this challenge - registration, pin verification and welcome screens.
Accounts app is developed in Angular 1.x and Connect is developed in React. We want to share some of the styling between those two apps by developing all the pages as React components and rendering them in Angular app via ReactDom.render or using libraries such as react2angular
-
Develop standalone react components
In the react components repository add the new standalone components for login screens - all the logic, actions and backend calls will still be made from angular app, so don’t include any business logic in the the components. Form elements (text box, radio select, etc) are already available in the react-components repo, you only need to update their styling to match the new designs. 6 top level components are needed:
1. Registration screen component - contains only registration form components. See the comments in marvel app for exact behavior of Business phone, username and password fields.
2. Pin verification screen component - contains only pin verification form components
3. Send new PIN component - contains only the send new pin screen - exact same layout as in the current accounts app
4. Welcome to Topcoder component - contains only "Welcome to Topcoder" screen contents
5. Login component - contains only the login form - exact same layout as the current accounts app
6. Wizard component - three column container component (left column contains the create new project and steps list, middle column contains the forms and the right column contains custome content - only image for the create account screens) -
Update accounts app
Update accounts application to show the new screen designs using the react components and react2angular library. Make sure the changes are only refrected in connect registration/login screens (ie https://accounts.topcoder.com/connect) and not community screens (https://accounts.topcoder.com/member). React2angular library has useful examples for injecting dependencies from angular app into the react components - see here. Most of the changes should be made in these two directories scripts/connect and views/connect
General for all requirements
Desktop, tablet and mobile resolutions are in scope for all screens. All styling has to follow the existing code base - see the readme in react-components repo. You are free to refactor the react components as you see fit.
What To Submit
-
Submit the updated code base
-
Submit a short deployment/verification guide and a demo video
Final Submission Guidelines
-
Submit the updated code base
-
Submit a short deployment/verification guide and a demo video
-