Challenge Overview
Topcoder is in the process of developing a new version of the Connect platform, which connects customers with project managers, copilots and competitors to run projects through the Topcoder services.
We are happy to bring challenges to our community to help us building one of the main tools our teams and community members will be using soon!
For this challenge, we’re looking forward to create clean and easily maintainable front-end code for the team management components.
Project Overview
The new version of Topcoder Connect aims to provide an easy experience for customers and project/challenge managers through a very clean and modern UI.
The goal of this challenge is to develop the front-end UI HTML/SCSS for team management. The final HTML/SCSS is going to be used for the React components development, so we want really high quality and stand alone HTML/SCSS.
Overall Requirements
- DO NOT create any type of user interaction. Deliver each status of the items (hover, selected, etc) as a separate item. They are going to be coded as React components in a follow up challenge after this one.
- Source code and design text must be written in US-English.
- The minimum size of a screen is 768px. NOT mobile.
- Use the base-unit, corner-radius, and color names variables instead of pixels and #fff colors.
- Create high quality SCSS, look at https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_checkboxes.scss - the Slider is a good example of well abstracted code.
- 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.
- For color references you can also use our style guide https://app.frontify.com/d/zEXqGHFD1YN2/ui-library#/elements/colors.
- Use flexbox instead floats.
- Define spacing with multiples of $base-unit, and corner radius through $corner-radius.
- Do not include third-party libraries; we want to stay as vanilla as possible at this stage.
- The full design is mostly for showcasing the final stage - we'll need that as well, but you should be able to build id through reusing the stand-alone sub-components (explore the spec files).
- DO NOT redeclare hex colors as variables - use the ones we have in /styles/_colors.scss.. (https://github.com/appirio-tech/tc-ui/tree/feature/connectv2).
- 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.
-- Can you try to work in such a way so we can just copy-paste the SCSS for the appropriate DOM structure for the component?
Pages
1. Team Management
- Create a new page following Team Management Specifications.
- Take the working structure from Project Template as a sample for creating a blank new page.
- Display all of the alternate state of the elements in one single demo page (as shown in the specification interactive file.
- Assets are included (assets folder).
- The panel is fixed size at 360px width. However, the elements inside should be responsive and fit within the parent container.
Browser Requirements
- IE 11+
- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows
Resources
- Project Template (local running sample, your starting template)
- Team Management Specifications (interactive HTML files with measurements and assets)
- SVG Icons.
- Topcoder UI Repo (latest style library files)
- Topcoder UI Kit Guidelines
Provide all your files in a zip container.
We are happy to bring challenges to our community to help us building one of the main tools our teams and community members will be using soon!
For this challenge, we’re looking forward to create clean and easily maintainable front-end code for the team management components.
Project Overview
The new version of Topcoder Connect aims to provide an easy experience for customers and project/challenge managers through a very clean and modern UI.
The goal of this challenge is to develop the front-end UI HTML/SCSS for team management. The final HTML/SCSS is going to be used for the React components development, so we want really high quality and stand alone HTML/SCSS.
Overall Requirements
- DO NOT create any type of user interaction. Deliver each status of the items (hover, selected, etc) as a separate item. They are going to be coded as React components in a follow up challenge after this one.
- Source code and design text must be written in US-English.
- The minimum size of a screen is 768px. NOT mobile.
- Use the base-unit, corner-radius, and color names variables instead of pixels and #fff colors.
- Create high quality SCSS, look at https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_checkboxes.scss - the Slider is a good example of well abstracted code.
- 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.
- For color references you can also use our style guide https://app.frontify.com/d/zEXqGHFD1YN2/ui-library#/elements/colors.
- Use flexbox instead floats.
- Define spacing with multiples of $base-unit, and corner radius through $corner-radius.
- Do not include third-party libraries; we want to stay as vanilla as possible at this stage.
- The full design is mostly for showcasing the final stage - we'll need that as well, but you should be able to build id through reusing the stand-alone sub-components (explore the spec files).
- DO NOT redeclare hex colors as variables - use the ones we have in /styles/_colors.scss.. (https://github.com/appirio-tech/tc-ui/tree/feature/connectv2).
- 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.
-- Can you try to work in such a way so we can just copy-paste the SCSS for the appropriate DOM structure for the component?
Pages
1. Team Management
- Create a new page following Team Management Specifications.
- Take the working structure from Project Template as a sample for creating a blank new page.
- Display all of the alternate state of the elements in one single demo page (as shown in the specification interactive file.
- Assets are included (assets folder).
- The panel is fixed size at 360px width. However, the elements inside should be responsive and fit within the parent container.
Browser Requirements
- IE 11+
- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows
Resources
- Project Template (local running sample, your starting template)
- Team Management Specifications (interactive HTML files with measurements and assets)
- SVG Icons.
- Topcoder UI Repo (latest style library files)
- Topcoder UI Kit Guidelines
Final Submission Guidelines
DeliverablesProvide all your files in a zip container.