Challenge Overview
Challenge Overview
Topcoder is in the process of rewriting the challenge listings page using React. The new version will be an overhaul, with a brand new look, feel, and user experience.
For this challenge, we'd like to create clean, easily reusable React components to replace the existing challenge filters.
High-Level Requirements
For this first iteration of the component, we want to see well-written React components and minimal styling. A follow-up challenge will deal with styling the components. You can see the challenge filters in the attached spec files; a very rough approximation that captures the general look of the spec will suffice for this challenge. You will be scored on the quality of your JSX, not your CSS.
The filter component we're building for this challenge consists of the search bar at the top, the challenge type switches to the side, and the keyword, subtrack, and date filters that drop down under it (this does NOT include the filters in the sidebar). Since these components are keeping track of user input, they will need to be stateful. But whenever it makes sense to do so, you should create small, functional ("black box") reusable components.
The state you keep track of should be expressed as an object, which can then be used to create query strings or to filter the challenges that have already been loaded.
Parts of the Challenge Filters
1. Search bar
The purpose of the search bar is to search the text fields of challenges. Namely, this search looks at the "challengeName", "platforms", and "technologies" fields.
2. Subtrack switches
For current purposes, these can be simple checkboxes. These are an "or" filter of design, develop, and data science challenges.
3. "Filter" switch
When this switch is off, the filter dropdown should be hidden (items 1 & 2 should be the only filters visible).
4. Keyword filter
This can be built using react-select. For this, make up a list of example keywords to search with (you should only be able to select an existing keyword!). This should be a second "text" search that looks at the same fields as #1.
5. Subtrack filter
This is an "or" filter on "challengeType".
6. Date filter
This can be built using the airbnb date component. Allow the user to select a date range. The start of the range should filter on "submissionEndDate", and the end of it should filter on "postingDate".
7. Clear and save filter buttons
For now, we don't need a save filter button. The clear filter button should revert everything back to the default state.
8. Simple list
So that we can view the filters in action, please create a simple listing of the challenges that the current query returns. You can just show some challenge information (name, start date, etc.) as plain text.
How to filter
When the user clicks the magnifying search button, the filters should be converted into a query string and searched against the v2 API. Please refer to our Apiary doc for details on filtering using the API. You should generate the filter string from the state object using a helper function.
Whenever the user clicks on any of the filters in the dropdown, the challenges currently in view should be instantly filtered. This should be done with a simple array filter of the challenges currently in view. To help accomplish this, you should write a helper function that takes the state object and returns a function that can be passed into the Javascript array .filter() function.
Please try to make components as reusable as possible!
You should do a little bit of styling so that your components are recognizable, but quality CSS and matching the designs are not priorities for this challenge. Focus on the JSX.
Your code should match the Airbnb React Styleguide. Use ES6 syntax and build functional components.
If you want to pull in outside components or other JS libraries, GET THEM APPROVED! If someone has already written a good version of one of the components, there's no need to reinvent the wheel, but confirm it with the copilot before you pull it in.
Please refer to the attached files to get an idea of what we want the filter components to look like. Refer only to the 2nd and 4th artboards ("Challenge Cards - Desktop - no filter" and "Challenge Cards - Desktop". The filters on the sidebar are out of scope for this challenge). Remember, though: we'll be scoring on how well the React components are implemented, not how closely you match the design (though your components still need to be visually recognizable).
Submissions should be a git patch. Make sure the patch has a user email so that we don't have to add it manually. Please provide a short deployment guide, and an accompanying video that shows a) your components in action and b) a brief code walkthrough.
Topcoder is in the process of rewriting the challenge listings page using React. The new version will be an overhaul, with a brand new look, feel, and user experience.
For this challenge, we'd like to create clean, easily reusable React components to replace the existing challenge filters.
High-Level Requirements
For this first iteration of the component, we want to see well-written React components and minimal styling. A follow-up challenge will deal with styling the components. You can see the challenge filters in the attached spec files; a very rough approximation that captures the general look of the spec will suffice for this challenge. You will be scored on the quality of your JSX, not your CSS.
The filter component we're building for this challenge consists of the search bar at the top, the challenge type switches to the side, and the keyword, subtrack, and date filters that drop down under it (this does NOT include the filters in the sidebar). Since these components are keeping track of user input, they will need to be stateful. But whenever it makes sense to do so, you should create small, functional ("black box") reusable components.
The state you keep track of should be expressed as an object, which can then be used to create query strings or to filter the challenges that have already been loaded.
Parts of the Challenge Filters
1. Search bar
The purpose of the search bar is to search the text fields of challenges. Namely, this search looks at the "challengeName", "platforms", and "technologies" fields.
2. Subtrack switches
For current purposes, these can be simple checkboxes. These are an "or" filter of design, develop, and data science challenges.
3. "Filter" switch
When this switch is off, the filter dropdown should be hidden (items 1 & 2 should be the only filters visible).
4. Keyword filter
This can be built using react-select. For this, make up a list of example keywords to search with (you should only be able to select an existing keyword!). This should be a second "text" search that looks at the same fields as #1.
5. Subtrack filter
This is an "or" filter on "challengeType".
6. Date filter
This can be built using the airbnb date component. Allow the user to select a date range. The start of the range should filter on "submissionEndDate", and the end of it should filter on "postingDate".
7. Clear and save filter buttons
For now, we don't need a save filter button. The clear filter button should revert everything back to the default state.
8. Simple list
So that we can view the filters in action, please create a simple listing of the challenges that the current query returns. You can just show some challenge information (name, start date, etc.) as plain text.
How to filter
When the user clicks the magnifying search button, the filters should be converted into a query string and searched against the v2 API. Please refer to our Apiary doc for details on filtering using the API. You should generate the filter string from the state object using a helper function.
Whenever the user clicks on any of the filters in the dropdown, the challenges currently in view should be instantly filtered. This should be done with a simple array filter of the challenges currently in view. To help accomplish this, you should write a helper function that takes the state object and returns a function that can be passed into the Javascript array .filter() function.
Please try to make components as reusable as possible!
Final Submission Guidelines
We want you to build this component in our react-components repo. Create a branch that forks off of the challenge-card branch, and refer to the ChallengeCard folder on how to do the basic structure of your component directory. Unlike that example, you should use the v2 API. We haven't been doing much development in this repo but we wanted to use it as a place to get this component built. Please ignore the existing coding styles, and don't use the components in the repo (that means definitely don't write any CoffeeScript).You should do a little bit of styling so that your components are recognizable, but quality CSS and matching the designs are not priorities for this challenge. Focus on the JSX.
Your code should match the Airbnb React Styleguide. Use ES6 syntax and build functional components.
If you want to pull in outside components or other JS libraries, GET THEM APPROVED! If someone has already written a good version of one of the components, there's no need to reinvent the wheel, but confirm it with the copilot before you pull it in.
Please refer to the attached files to get an idea of what we want the filter components to look like. Refer only to the 2nd and 4th artboards ("Challenge Cards - Desktop - no filter" and "Challenge Cards - Desktop". The filters on the sidebar are out of scope for this challenge). Remember, though: we'll be scoring on how well the React components are implemented, not how closely you match the design (though your components still need to be visually recognizable).
Submissions should be a git patch. Make sure the patch has a user email so that we don't have to add it manually. Please provide a short deployment guide, and an accompanying video that shows a) your components in action and b) a brief code walkthrough.