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 for the sticky sidebar that will allow users to do default filtering on challenges, as well as use, save, and edit custom filters.
High-Level Requirements
For this first iteration of the component, we want to see well-written React components with clean, functional ("black-box") JSX. For styling, it's enough that these components resemble the specs. We're running a separate challenge right now to generate HTML and SCSS, so the only important thing is that this component can be modified to fit with someone else's templating and styling.
The sidebar component will have several options that users can select: "All Challenges", "My Challenges", "Open for registration", "Ongoing challenges", "Past challenges", and then the "My Filters" section. These are all broken down in more detail below, but in short: the first five options will apply a filter, and the last option will be for using and modifying user-created filters.
Since this component will be dealing with filtering, it should probably be a child on the larger "filters" component. Certainly, it will share state with it: for example, when "Open for registration" is selected, a filter on the challenge's "registrationOpen" property will need to be applied; and when a new filter is created, it will be created from the current state of challenge filtering. The mechanics of this will be explained in more detail below.
In terms of style, the one thing that will definitely need to be implemented is stickiness. For this purpose, we've chosen to use Yahoo's react-stickynode component. Implementing stickiness for the sidebar using this component is a requirement for the challenge. Note that you will need to set "enableTransforms" to false to disable the use of CSS3 transforms when using this component.
For a visual overview of the components (filter editing may be implemented as a separate component that uses the same visual container), consult the attached live specs. The 5th artboard in the UI_Kit.zip live spec shows the overall layout for the sidebar. Filters.zip shows this again, and breaks down the flow for deleting a filter.
Below is a breakdown of requirements for each part.
Parts of the New Filter Functionalities
1. "All Challenges" -- This should show all active challenges (like the /challenges page does by default).
2. "My Challenges" -- This should fetch the user's challenges from the "My Challenges" API endpoint (see API spec) and put them into the current view, with all current filters applied.
3. "Open for registration" -- This should show all active challenges with an additional filter on all challenges currently in scope on the "registrationOpen" field. This will require modifying the existing "Filters" component.
4. "Ongoing Challenges" -- This should show all active challenges for which registration is not open. Logic is basically the inverse of (3).
5. "Past challenges" -- This should work kind of like the "Past Challenges" option in the current challenge listings works; i.e., it should switch from showing active challenges (/v2/challenges/active) to past ones (/v2/challenges/past) with all current filters applied (except for the ones about being open for registration, since these don't apply).
6. "My Filters" -- This component has multiple parts, which I'll label a, b, and c. All of them will interact with the member settings service, but right now, we don't have a working instance of this service in dev. Because of this, you'll need to mock out the CRUD/backend parts of this service into some simple storage on the frontend. The UI and basic logic will be the same, and the page should show a new filter when you save it, but you won't be hitting an API or anything.
a) "My Filters" list in main sidebar view
This is what is seen in UI Kit artboard 5: a list of the user's filters, and the option to edit. Editing will take you to part 2:
b) Edit view for "My Filters"
This is what's shown in the 3rd, 4th and 5th parts of the Filters artboard. Users should be able to delete filters they've saved.
c) Add filter
In the UI Kit's 5th artboard, you can see a "Save as tab" in the filters dropdown. This is currently mocked out in the UI, but doesn't do anything. Modify it so that it saves the new filter. This will require modifying existing challenge filters code.
Before the listings components, we hadn't done much development in this repo, so please ignore all the Coffeescript components you see.
You should do a little bit of styling so that your components are recognizable, but exactly implementing the designs is not the priority 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! (Though, like I said above, that Yahoo sticky component will be used for this challenge.) If someone has already written a good version of another one of the components you're working on, there's no need to reinvent the wheel, but confirm it with the copilot before you pull it in.
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 for the sticky sidebar that will allow users to do default filtering on challenges, as well as use, save, and edit custom filters.
High-Level Requirements
For this first iteration of the component, we want to see well-written React components with clean, functional ("black-box") JSX. For styling, it's enough that these components resemble the specs. We're running a separate challenge right now to generate HTML and SCSS, so the only important thing is that this component can be modified to fit with someone else's templating and styling.
The sidebar component will have several options that users can select: "All Challenges", "My Challenges", "Open for registration", "Ongoing challenges", "Past challenges", and then the "My Filters" section. These are all broken down in more detail below, but in short: the first five options will apply a filter, and the last option will be for using and modifying user-created filters.
Since this component will be dealing with filtering, it should probably be a child on the larger "filters" component. Certainly, it will share state with it: for example, when "Open for registration" is selected, a filter on the challenge's "registrationOpen" property will need to be applied; and when a new filter is created, it will be created from the current state of challenge filtering. The mechanics of this will be explained in more detail below.
In terms of style, the one thing that will definitely need to be implemented is stickiness. For this purpose, we've chosen to use Yahoo's react-stickynode component. Implementing stickiness for the sidebar using this component is a requirement for the challenge. Note that you will need to set "enableTransforms" to false to disable the use of CSS3 transforms when using this component.
For a visual overview of the components (filter editing may be implemented as a separate component that uses the same visual container), consult the attached live specs. The 5th artboard in the UI_Kit.zip live spec shows the overall layout for the sidebar. Filters.zip shows this again, and breaks down the flow for deleting a filter.
Below is a breakdown of requirements for each part.
Parts of the New Filter Functionalities
1. "All Challenges" -- This should show all active challenges (like the /challenges page does by default).
2. "My Challenges" -- This should fetch the user's challenges from the "My Challenges" API endpoint (see API spec) and put them into the current view, with all current filters applied.
3. "Open for registration" -- This should show all active challenges with an additional filter on all challenges currently in scope on the "registrationOpen" field. This will require modifying the existing "Filters" component.
4. "Ongoing Challenges" -- This should show all active challenges for which registration is not open. Logic is basically the inverse of (3).
5. "Past challenges" -- This should work kind of like the "Past Challenges" option in the current challenge listings works; i.e., it should switch from showing active challenges (/v2/challenges/active) to past ones (/v2/challenges/past) with all current filters applied (except for the ones about being open for registration, since these don't apply).
6. "My Filters" -- This component has multiple parts, which I'll label a, b, and c. All of them will interact with the member settings service, but right now, we don't have a working instance of this service in dev. Because of this, you'll need to mock out the CRUD/backend parts of this service into some simple storage on the frontend. The UI and basic logic will be the same, and the page should show a new filter when you save it, but you won't be hitting an API or anything.
a) "My Filters" list in main sidebar view
This is what is seen in UI Kit artboard 5: a list of the user's filters, and the option to edit. Editing will take you to part 2:
b) Edit view for "My Filters"
This is what's shown in the 3rd, 4th and 5th parts of the Filters artboard. Users should be able to delete filters they've saved.
c) Add filter
In the UI Kit's 5th artboard, you can see a "Save as tab" in the filters dropdown. This is currently mocked out in the UI, but doesn't do anything. Modify it so that it saves the new filter. This will require modifying existing challenge filters code.
Final Submission Guidelines
We want you to build this component in our react-components repo. Create a branch that forks off of the challenge-listings branch, and using the V2 API (i.e., don't use the v3 API), build a sidebar component that nests within the existing filters component (so they can share state). Modify the existing component when you need to, but try to make your changes as "black boxed" as possible.Before the listings components, we hadn't done much development in this repo, so please ignore all the Coffeescript components you see.
You should do a little bit of styling so that your components are recognizable, but exactly implementing the designs is not the priority 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! (Though, like I said above, that Yahoo sticky component will be used for this challenge.) If someone has already written a good version of another one of the components you're working on, there's no need to reinvent the wheel, but confirm it with the copilot before you pull it in.
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.