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 create a new project template for 'Application Visual Design' project types. Project specification page is rendered by the SpecificationContainer component, based on the json configuration (template), that lists all the specification questions and sections that are to be displayed and we want to expand on this by defining different templates for the AVD project type.
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 project template for the AVD project type. It should be based on the current template for all projects, defined in src/config/projectQuestions/topcoder.v1.js . The new project type should be named avd.v1.0.js and should add the following
- New question in "Project Info" section to allow configuring number of screens required
- New section "App Screens" for screen specifications
2. Update SpecificationContainer component to load different template for different project types. Mapping project type to template should be defined in a static json file. If project type is null (for existing projects) load the current default template.
3. The project currently does not have the project type (it's added in a separate challenge), so for verification purposes mock the project type field in the project.
4. Create a new component for rendering the screen definiton questions in the "App Screens" section.
5. Add the "Ref Code" field next to the project name. It will be an input field with 5 characters limit. Designs are updated to reflect this, but the change is missing in the marvel app
Follow all the best practices and code style mentioned in project readme file.
The base code for this challenge is in the projectSpecification 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 this challenge we'll create a new project template for 'Application Visual Design' project types. Project specification page is rendered by the SpecificationContainer component, based on the json configuration (template), that lists all the specification questions and sections that are to be displayed and we want to expand on this by defining different templates for the AVD project type.
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 project template for the AVD project type. It should be based on the current template for all projects, defined in src/config/projectQuestions/topcoder.v1.js . The new project type should be named avd.v1.0.js and should add the following
- New question in "Project Info" section to allow configuring number of screens required
- New section "App Screens" for screen specifications
2. Update SpecificationContainer component to load different template for different project types. Mapping project type to template should be defined in a static json file. If project type is null (for existing projects) load the current default template.
3. The project currently does not have the project type (it's added in a separate challenge), so for verification purposes mock the project type field in the project.
4. Create a new component for rendering the screen definiton questions in the "App Screens" section.
5. Add the "Ref Code" field next to the project name. It will be an input field with 5 characters limit. Designs are updated to reflect this, but the change is missing in the marvel app
Follow all the best practices and code style mentioned in project readme file.
The base code for this challenge is in the projectSpecification 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.