[96 hr] Topcoder Connect - Update Project Catalog UI

Challenge Objectives

Attention! This is a 96h challenge. All phases are shorter than usual. Make sure you don’t miss any deadline.

Update the design of the project catalog. The design itself is quite simple and many elements should be reused from the existent design.

Project Background

Topcode Connect is a client-facing application of Topcoder. Customers use Topcoder Connect to input requirements of their projects, then managers and copilots take it from there.

We would like to update the design of the catalog where customers can choose a project type for creating. The design itself is quite simple and many elements should be reused from the existent design as mentioned below.

Technology Stack

• React

• Redux

• CSS Modules

Code access

The work for this challenge has to be done in one repository:

- Connect App repo https://github.com/appirio-tech/connect-app dev branch

- User for testing is provided on the forum.

- We already have some demo data in DB which should be enough for testing provided designs. If you would like to have other demo data for testing some cases, please let us know on the forum and we would try to add it.

Individual requirements

• There are 2 screens to update:
  - Project Type (category) selection page: demo link, current design screenshot, new design
  - Project Template selection page: demo link, current design screenshot, new design. There is a simpler variation of this page without filters, see new design.

• Many elements should keep their current design and mostly only cards should be updated and filters added:
  - only the content part on the gray background has to be updated (ignore top bar in the new design and keep the sidebar in the old design).
  - ignore new icons style and use the current icons without new green background
  - ignore new design for “back” and “close” buttons, keep the current design
  - don’t implement new green round buttons, reuse rectangular blue buttons which we already have

• Data for selecting Project Types come from the same places as before https://monosnap.com/file/QTU49xocauhFqvtoewRTlvPwM9VgQt
  - data for selecting Project Templates https://monosnap.com/file/0L65cNvXysv9MbNVdPl9O7MQWGzH24
  - data for a single Project Template entry https://monosnap.com/file/S76DkhE1RNBPpQVQl7BnHkuwhqBNMD
  - if `ProjectTemplate.metadata.deliverables.length > 1` then we should show the wide design of entry as one the screenshot https://monosnap.com/file/7saNhSLSPM4YIbXALMWhr7GvfCJXCS

• All the ProjectTemplate cards should be fluid and support any height of the content inside of each column
  - also, the ProjectTemplate cards should support the absence of any data like the second column, “Starting from $3.000” text or “LEARN MORE” links.

• Currently, at the category selection page, we are showing all the ProjectTypes that are `hidden: false` and `disabled: false`, we should additionally restrict these criteria and only show ProjectTypes that have as least one ProjectTemplate assigned by `ProjectTemplate.category`. (Expected Project Types to be shown: “Solutions”, “Buy Budget or Talent Capacity” see screenshot).

• For the sub category filters show ProjectTypes that are `hidden: false` and `disabled: false`, and that have at least one ProjectTemplate assigned by `ProjectTemplate.subCategory`.

• The “search” filed should filter ProjectTemplates client-side using the next fields of ProjectTemplates: `name`, `info`, `metadata.deliverables[*].infoHTML`. When we enter something to the field, the search button becomes enabled and the “cross” icon should be shown as shown on the design. Clicking “cross” should clear the field and reset search filter.
  - don’t implement round search field and round button, use the standard rectangular search field and rectangular blue button see profile page for example.

• Filters and subCategories should be hidden, if `ProjectType.metadata.filterable: false` as it is shown on the “On Demand” projects design

• Support screen sizes from 320px. Adjust the design so it fits nicely all the screen sizes. On the small screens use the vertical design of the cards as shown on the screenshot and place them one by one vertically instead of several columns. For the wide card with 3 deliverables, place deliverable vertically also on small screens. [This is a minor requirement, please concentrate on other features and desktop screen sizes.].

• We have a similar page for adding a phase https://connect.topcoder-dev.com/projects/8667/add-phase. Such a page should stay as it is, new changes in the design and functionality should NOT affect this page.

General requirements

• Support browsers: IE11, Microsoft Edge, Firefox latest version, Safari latest version, Chrome latest version

• For styling use ONLY colors from the https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_variables.scss. If some new color is introduced in design, please replace it with the closest one from the variables. The exception is for a new green color, replace it with the blue color $tc-dark-blue-100. If you have any concerns regarding the colors, please, ask on the forum.

• Avoid using multilevel nesting in SCSS. As we use CSS Modules we don’t have to add prefixes or nest class selectors.

• Don’t use :global in CSS Modules unless you have to change some global styles. New styles shouldn’t use :global.

• Lint should pass

• Existent unit tests should pass

If you have any questions or concerns, feel free to raise a question on the forum.

Final Submission Guidelines

Submit a zip file which would include:

• Git patch with changes you’ve made to the code in our repository.

Additionally, the winner would be required to raise a pull request to the repository after the challenge is completed.