Challenge Overview

Topcoder Connect is our primary customer facing application. In this series of challenges we'll be making changes to the create project workflow, to make it easier for customers to pick better fitting project type.

In this challenge we'll update the create project form with a new wizard based process where the user selects project type, then chooses one project subtype, fills in project name and creates a project

Design Prototype is available at
Design assets are available at

The following is in scope for the challenge:
1. Create a new generic "Wizard" component in src/components. It should support multiple steps both forward and backward. For now, it's primary use case will be the create project workflow to select project type and subtype
2. Remove all the components under projects/create/components, and their corresponding actions
3. Create a json configuration for defining project types and subtypes. Currently, we should support Design (subtypes Wireframes, App Visual Design - Concepts, App Visual Design - Production), Prototype (subtypes Demo, Technical) and Development (subtypes Proof of concept, Production)
4. Create a new component in projects/create/components that will host the above wizard component and other form elements detailed in the prototype screen (project name, create project buttons, etc). Make sure to include a "Reference code" form input element and remove the "View Examples" button (designs  are updated to reflect this, but the changes are missing in the marvel app). Reference code should be a field with maximum length of 5 characters.
5. Implement the necessary actions to complete the create project workflow, and update the api method to post project name, project type and reference code. Make sure the "Create Project" button is disabled while the network request is in progress, and the label reads "Creating ..."

Follow all the best practices and code style mentioned in project readme file.
The base code for this challenge is in the createProject branch at
The winner will be required to create a pull request

General Requirements

- Do not include any extra third-party libraries.
- Source code and design text must be written in US-English.
- Don't overly nest your code; we'll need to abstract the final DOM into multiple components; try to stay into smaller logical pieces.
- We use autoprefixer, so don't worry about all browser-specific rules.
- When creating the component page and repo, try to break them into the separate items - make sure that header, a row, and the footer are different self-sufficient styled elements (do not overly nest the SCSS).
- Do not use external icon repositories; we're including the icons as React.js components. It is important for us to minimize external dependencies for resources (SCSS libraries, icon fonts [not good at all], icon libraries, etc.).
- Do not redeclare/style buttons and form elements that exist in the /styles/_forms.scss and the library as whole. If you need to define a button style (or extend an existing one) - think how this could happen in the /styles/_forms.scss (or relevant _*.scss) file. In the end we want to add extrapolate the styles you create int 2 places:
-- Component-specific styles (used only once).
-- Global styles (/styles/*.scss) used from all components.

React and Javascript Requirements

- ES6 syntax is preferred, as Babel has been setup to handle transpiling the syntax to the current JavaScript standard.
- Use .jsx extension for React components; using PascalCase for filenames. E.g., Navigation.jsx.
- Build the components using similar React components to the existing web app. There is a sample in the repo at src/components/ExampleComponent 
- Ensure that there are no lint errors.
- Write bundled jsx and scss files for each component at the same src corresponding location. For instance, for a component called “Navigation” it would be:
-- Navigation.jsx
-- Navigation.scss

Browser Requirements

- IE 11+
- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows

Final Submission Guidelines

Submit a git patch containing your changes to the base code.
Submit a verification document with screenshots.


2017 TopCoder(R) Open

Review style

Final Review

Community Review Board


User Sign-Off

ID: 30056424