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 React components for the Project Features page.
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 ReactJS components for Project Features page. You are provided with a clean HTML/SCSS prototype which you must wisely use convert into React components that follow the guidelines of the product. You will be working directly off the repo code and create your own local instance with the new components.
Components Requirements (to deliver)
1. Project Tab Component
- Create a tab component as this sample.
- Create placeholders for inserting a respective X component for each view of N amount of tabs.
2. Feature Definition Component
- Create a presentational / dumb component that displays an icon (optional), title and description as this sample. Eg. Search, GeoLocation feature & Slack bot integration 3 examples of such a component.
- Create the representation for its children form elements (separate components) as displayed here.. Eg. with child components, as this sample.
3. Attached File Component
- Create a component to show attached file information, as this sample.
- Create the actions:
-- Remove file.
-- Edit file. Title and description can be edited. Cancel can be performed as well.
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
Resources
- Project Features HTML Page (HTML/SCSS files of the Components)
- Topcoder Connect 2.0 Repo (latest version of the app - attached also in the forums)
- SVG Assets (Icons)
- Topcoder UI Kit Guidelines (Topcoder design and development UI guidelines)
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 React components for the Project Features page.
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 ReactJS components for Project Features page. You are provided with a clean HTML/SCSS prototype which you must wisely use convert into React components that follow the guidelines of the product. You will be working directly off the repo code and create your own local instance with the new components.
Components Requirements (to deliver)
1. Project Tab Component
- Create a tab component as this sample.
- Create placeholders for inserting a respective X component for each view of N amount of tabs.
2. Feature Definition Component
- Create a presentational / dumb component that displays an icon (optional), title and description as this sample. Eg. Search, GeoLocation feature & Slack bot integration 3 examples of such a component.
- Create the representation for its children form elements (separate components) as displayed here.. Eg. with child components, as this sample.
3. Attached File Component
- Create a component to show attached file information, as this sample.
- Create the actions:
-- Remove file.
-- Edit file. Title and description can be edited. Cancel can be performed as well.
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
Resources
- Project Features HTML Page (HTML/SCSS files of the Components)
- Topcoder Connect 2.0 Repo (latest version of the app - attached also in the forums)
- SVG Assets (Icons)
- Topcoder UI Kit Guidelines (Topcoder design and development UI guidelines)
Final Submission Guidelines
- Provide all your files within a zip container.
- Provide a demo video showing A) your react components in action B ) a brief code walk-through.