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 need help to fix some bugs and improve some areas/components at this stage. The goal of this challenge is to fix the project search component behavior.
Task
Currently the search component has some flaws (/projects route). Fix the following.
- Typeahead not working. If the user types nothing happens.
- Remove "Recent searches" and "Popular searches". The list should display results only.
- Search results should be a simple list with inner scrolling. At least seven (7) items should be visible at first sight. Adjust the component height and scrolling feature as this sample.
- While typing, the results are displayed in the dropdown, doesn't affectthe projects list. Once a project link is clicked it should take to the proper project details page.
- Additionally, clicking on the label should activat the "My Projects Only" checkbox.
Overall Connect Project Considerations
- RE-USE existing components as much as possible.
- 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.
- 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.
- Ensure that there are no lint errors.
Browser Requirements
- IE 11+
- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows
Resources
- Topcoder Connect 2.0 App (latest version of the app)
- Topcoder UI Kit Guidelines (Topcoder design and development UI guidelines)
- Provide notes stating the necessary steps to apply your solution, as well as modified files, lines, and so on.
We need help to fix some bugs and improve some areas/components at this stage. The goal of this challenge is to fix the project search component behavior.
Task
Currently the search component has some flaws (/projects route). Fix the following.
- Typeahead not working. If the user types nothing happens.
- Remove "Recent searches" and "Popular searches". The list should display results only.
- Search results should be a simple list with inner scrolling. At least seven (7) items should be visible at first sight. Adjust the component height and scrolling feature as this sample.
- While typing, the results are displayed in the dropdown, doesn't affectthe projects list. Once a project link is clicked it should take to the proper project details page.
- Additionally, clicking on the label should activat the "My Projects Only" checkbox.
Overall Connect Project Considerations
- RE-USE existing components as much as possible.
- 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.
- 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.
- Ensure that there are no lint errors.
Browser Requirements
- IE 11+
- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows
Resources
- Topcoder Connect 2.0 App (latest version of the app)
- Topcoder UI Kit Guidelines (Topcoder design and development UI guidelines)
Final Submission Guidelines
- Provide all your files within a zip container.- Provide notes stating the necessary steps to apply your solution, as well as modified files, lines, and so on.