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 clean up some of the current problems with the page.
High-Level Requirements
Our aim is to always have well-written React components with clean, functional ("black-box") JSX.
Right now, there are problems with (1) challenge timeline tooltips, (2) the prize list tooltips, (3) the TCO icon link, (4) the My Challenges filter in the sidebar, and (5) the absence of data science challenges.
Below is a breakdown of requirements for each part.
Parts of the New Filter Functionalities
1. Challenge timeline tooltips
There are several issues here. First is that the tooltips don't display correctly in the listing view. They do, however, work in the ChallengeCardExamples view. This bug should be fixed. Some other problems are that phase end times that end in 0 don't format correctly (e.g., 15:00 is ok, but 15:0 is not). Also, some long challenges extend ridiculously far. The timeline tooltips should all have the same length.
2. Prize list tooltips
There are several issues:
a) The tooltips don't work in the listings view. They work in the challenge cards view, though. This should be fixed.
b) The tooltips are mocking out 2nd and 3rd prize information. We don't have this information. Leave it out.
c) Prize numbers. This is actually outside the tooltips, but until the API gives us more information, we'd like to leave the prize numbers tags out. (this appears right under the prize amount)
3. TCO icon link - this should take you to www.topcoder.com/tco
4. My Challenges filter in sidebar
Right now, this is mocking out some data. This option should actually only appear for logged-in users, and it should pull from the my challenge API endpoint (/user/challenges).
You may want to use the auth service from topcoder-app. You can copy this, or just run the listings from this repo (it's available at /listings). Either way, you'll probably need to make sure the URL you're serving it at is similar to local.topcoder-dev.com.
5. Add Marathon Match challenges
We should make sure the data science button actually pulls in MM challenges. The styling should be similar to dev, but with a yellow icon color.
Get the active Marathon Matches: https://api.topcoder.com/v2/data/marathon/challenges/?listType=active
Get dev challenges that are tagged "Data Science": https://api.topcoder.com/v2/challenges/active?challengeType=First2Finish,Code&technologies=Data+Science&type=develop
Before the listings components, we hadn't done much development in this repo, so please ignore all the Coffeescript components you see.
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!
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 clean up some of the current problems with the page.
High-Level Requirements
Our aim is to always have well-written React components with clean, functional ("black-box") JSX.
Right now, there are problems with (1) challenge timeline tooltips, (2) the prize list tooltips, (3) the TCO icon link, (4) the My Challenges filter in the sidebar, and (5) the absence of data science challenges.
Below is a breakdown of requirements for each part.
Parts of the New Filter Functionalities
1. Challenge timeline tooltips
There are several issues here. First is that the tooltips don't display correctly in the listing view. They do, however, work in the ChallengeCardExamples view. This bug should be fixed. Some other problems are that phase end times that end in 0 don't format correctly (e.g., 15:00 is ok, but 15:0 is not). Also, some long challenges extend ridiculously far. The timeline tooltips should all have the same length.
2. Prize list tooltips
There are several issues:
a) The tooltips don't work in the listings view. They work in the challenge cards view, though. This should be fixed.
b) The tooltips are mocking out 2nd and 3rd prize information. We don't have this information. Leave it out.
c) Prize numbers. This is actually outside the tooltips, but until the API gives us more information, we'd like to leave the prize numbers tags out. (this appears right under the prize amount)
3. TCO icon link - this should take you to www.topcoder.com/tco
4. My Challenges filter in sidebar
Right now, this is mocking out some data. This option should actually only appear for logged-in users, and it should pull from the my challenge API endpoint (/user/challenges).
You may want to use the auth service from topcoder-app. You can copy this, or just run the listings from this repo (it's available at /listings). Either way, you'll probably need to make sure the URL you're serving it at is similar to local.topcoder-dev.com.
5. Add Marathon Match challenges
We should make sure the data science button actually pulls in MM challenges. The styling should be similar to dev, but with a yellow icon color.
Get the active Marathon Matches: https://api.topcoder.com/v2/data/marathon/challenges/?listType=active
Get dev challenges that are tagged "Data Science": https://api.topcoder.com/v2/challenges/active?challengeType=First2Finish,Code&technologies=Data+Science&type=develop
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.
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!
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.