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 https://marvelapp.com/3e8bab3
Design assets are available at https://drive.google.com/drive/folders/0B1LbmKnex41faTlhcFlyQkFPYTQ
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 https://github.com/appirio-tech/connect-app
The winner will be required to create a pull request
- 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.
- 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
- IE 11+
- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows
Submit a verification document with screenshots.
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 https://marvelapp.com/3e8bab3
Design assets are available at https://drive.google.com/drive/folders/0B1LbmKnex41faTlhcFlyQkFPYTQ
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 https://github.com/appirio-tech/connect-app
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.