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 cards.
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 cards 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 challenge card (ChallengeCard) should a highly reusable component that takes in a `challenge` prop and renders a challenge card that functionally matches the attached specs. The scope of this challenge is limited to cards for develop and design challenge types. Also, tooltips do not need to be addressed as part of this challenge.
Parts of the Challenge Card
These parts of the card can be separate components; some may just fit in the top-level ChallengeCard component. Whereever possible, components should be functional (stateless, "black-box" components). Every significant component should have its own file; every separate file should have its own scss file.
1. Track Code
This component belongs on the leftmost part of the card and displays an abbreviation that is related to the challenge's subtrack. A full mapping of subtrack to abbrreviation can be found here.
2. Title
This is to the right of the track code. This is pretty straightforward. Since it's just text, it likely doesn't need to be its own component.
3. Tag
The tags are directly under the title, and provide a list of the project's technologies. This may or may not be a separate component.
4. Prize
Moving rightward, the next piece of information is the challenge prize. We currently lack a field for the number of prizes in the API, so this will be omitted for now.
5. Progress Bar
If the challenge is open, there should be a progress bar that tracks how far along the challenge is based on the amount of time remaining in the challenge. This should absolutely be its own component. How far along the green part of the bar is should be proportional to the amount of time left in the challenge. On the card, there will also be a label under the bar that will report the amount of time left, and a label above it displaying the current phase name.
6. Icons and labels
In many cases, we use icons and labels to display the number of submissions and registrants. These should also be links to these parts of the challenge details page. When a forum link is available, we also have an icon to display for that.
7. Avatar & placement
For finished challenges, we want to show the users who won in the form of circular avatars. This should use the member profile photo; when that's unavailable, it should just display the first three letters of their username. The avatar should definitely be its own component.
8. Register button
For challenges that are open for registration, there should be a register button on the right-hand side of the card that allows users to register for the challenge.
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 cards to look like. 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 cards.
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 cards 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 challenge card (ChallengeCard) should a highly reusable component that takes in a `challenge` prop and renders a challenge card that functionally matches the attached specs. The scope of this challenge is limited to cards for develop and design challenge types. Also, tooltips do not need to be addressed as part of this challenge.
Parts of the Challenge Card
These parts of the card can be separate components; some may just fit in the top-level ChallengeCard component. Whereever possible, components should be functional (stateless, "black-box" components). Every significant component should have its own file; every separate file should have its own scss file.
1. Track Code
This component belongs on the leftmost part of the card and displays an abbreviation that is related to the challenge's subtrack. A full mapping of subtrack to abbrreviation can be found here.
2. Title
This is to the right of the track code. This is pretty straightforward. Since it's just text, it likely doesn't need to be its own component.
3. Tag
The tags are directly under the title, and provide a list of the project's technologies. This may or may not be a separate component.
4. Prize
Moving rightward, the next piece of information is the challenge prize. We currently lack a field for the number of prizes in the API, so this will be omitted for now.
5. Progress Bar
If the challenge is open, there should be a progress bar that tracks how far along the challenge is based on the amount of time remaining in the challenge. This should absolutely be its own component. How far along the green part of the bar is should be proportional to the amount of time left in the challenge. On the card, there will also be a label under the bar that will report the amount of time left, and a label above it displaying the current phase name.
6. Icons and labels
In many cases, we use icons and labels to display the number of submissions and registrants. These should also be links to these parts of the challenge details page. When a forum link is available, we also have an icon to display for that.
7. Avatar & placement
For finished challenges, we want to show the users who won in the form of circular avatars. This should use the member profile photo; when that's unavailable, it should just display the first three letters of their username. The avatar should definitely be its own component.
8. Register button
For challenges that are open for registration, there should be a register button on the right-hand side of the card that allows users to register for the challenge.
Please try to make components as reusable as possible!
Final Submission Guidelines
We want you to build this component in our react-components repo. Use the challenge-card branch, which blocks out a little area for you to do your building (all the code written can be deleted, it's just simple example code). As the example code shows, your components should be built for the Topcoder v3 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 cards to look like. 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.