Challenge Overview
Topcoder Connect is our primary customer facing application. In this series of challenges we'll be making changes to the create and manage project workflow, to make it easier for customers to pick better fitting project type. Product type is chosen when creating a project, and product specification page will display different items for AVD product types.
In the two previous challenges we implemented the new project flow as well as new project speciffication screens. In this challenge we'll integrate the two, create a new 'Project Estimate' component and fix a few bugs.
Design Prototype is available at https://marvelapp.com/3e8bab3
Design assets are available at https://drive.google.com/drive/folders/0B1LbmKnex41fWjd1dTFJbFFLWkE
The following is in scope for the challenge:
1. Create a new component for displaying the 'Project Estimate' section in the specification details screen. The estimate would be calculated based on the number of screens added times a base price for a screen. Base price can be added to the project template in 'src/config/projectQuestions/avd.v1.0.js'. The component will be visible only for the AVD project type.
2. When a new project is created by clicking the 'Create Project' button, the page should navigate to project specification page.
3. Disable the 'Define another screen' button when the number of screens added is equal to what user has selected in 'No of screens' question in 'Project Info' section. When the button is disabled, it should have a mouseover message (use a placeholder text for now, it will say something to indicate why the button has been disabled, in case the user wants to add more screens by changing their initial selection)
4. Change the required field of the 'App screens' section to true, so optional label isn't displayed for the section.
5. The icons for the number of screens options are placeholders right now. Create a new component that will display the number as svg (see the prototype). Here is the styling for the icon:
6. Fix a bug where the 'Define screen' form retains old values when new form is shown after clicking the 'Define another screen' button.
7. Fix a bug where 'Define another screen' button is not enabled unless 'Screen Importance' dropdown is focused.
8. Fix the issue with the icons in this github ticket
Follow all the best practices and code style mentioned in project readme file.
The base code for this challenge is in the productsIntegration branch at https://github.com/appirio-tech/connect-app
- 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 the two previous challenges we implemented the new project flow as well as new project speciffication screens. In this challenge we'll integrate the two, create a new 'Project Estimate' component and fix a few bugs.
Design Prototype is available at https://marvelapp.com/3e8bab3
Design assets are available at https://drive.google.com/drive/folders/0B1LbmKnex41fWjd1dTFJbFFLWkE
The following is in scope for the challenge:
1. Create a new component for displaying the 'Project Estimate' section in the specification details screen. The estimate would be calculated based on the number of screens added times a base price for a screen. Base price can be added to the project template in 'src/config/projectQuestions/avd.v1.0.js'. The component will be visible only for the AVD project type.
2. When a new project is created by clicking the 'Create Project' button, the page should navigate to project specification page.
3. Disable the 'Define another screen' button when the number of screens added is equal to what user has selected in 'No of screens' question in 'Project Info' section. When the button is disabled, it should have a mouseover message (use a placeholder text for now, it will say something to indicate why the button has been disabled, in case the user wants to add more screens by changing their initial selection)
4. Change the required field of the 'App screens' section to true, so optional label isn't displayed for the section.
5. The icons for the number of screens options are placeholders right now. Create a new component that will display the number as svg (see the prototype). Here is the styling for the icon:
font-family: Roboto-Regular; font-size: 42px; text-align: center; color: (#5D5D66) $tc-gray-70; line-height: 50px; margin-top: 30px margin-bottom: 10px
6. Fix a bug where the 'Define screen' form retains old values when new form is shown after clicking the 'Define another screen' button.
7. Fix a bug where 'Define another screen' button is not enabled unless 'Screen Importance' dropdown is focused.
8. Fix the issue with the icons in this github ticket
Follow all the best practices and code style mentioned in project readme file.
The base code for this challenge is in the productsIntegration branch at https://github.com/appirio-tech/connect-app
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.