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 add tooltips to the challenge card components we're building.
High-Level Requirements
For this first iteration of the component, we want to see well-written React components that are styled close to the specs provided. A follow-up challenge will deal with styling the components, so right now, just try to write clean SCSS that doesn't nest more than 3 levels deep. You can see the challenge tooltips in the attached spec files; just try to make your style near what's provided (it doesn't have to be exact). You will be mainly scored on the quality of your JSX, not your CSS.
The tooltip components we're building will appear above the track abbreviation on the left, the prizes in the middle of the card, the progress bar on the right side, the user avatars when they appear on the card, and the numbers of users and submissions on the right side of the card. These components should NOT be card-specific, but should be reusable anywhere in the Topcoder site. That means they should be function, "black-box" components.
Follow the specs attached to this challenge. Look at the 4th part of the live spec for the tooltips; on the .png, look at the bottom of the image.
Below is a breakdown of requirements for each part.
Parts of the Challenge Tooltips
1. Track abbreviation
For the tracks we've provided so far, please hard-code an example description that can be displayed on every instance of that kind of challenge.
2. Prizes
The image pretty much tells the story. It looks like the API is only providing reliability bonus when it's there, so just list that one.
3. Progress bar
The phase information isn't in the API, so use what you can of what you're given and mock the rest out.
4. User avatars
This display will require a query to the user profile API (here's our API reference). Again, the image is a reference. At the bottom, just show some of the challenge types with the highest number of wins.
5. Numbers of users and submissions
Follow the card. Just show the number with a bit of extra text to explain.
Please try to make components as reusable as possible!
You should do a little bit of styling so that your components are close to the designs provided, 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! We've already added this tooltip component, and you can optionally bring in this mixin if it makes things easier or more elegant. 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 to add tooltips to the challenge card components we're building.
High-Level Requirements
For this first iteration of the component, we want to see well-written React components that are styled close to the specs provided. A follow-up challenge will deal with styling the components, so right now, just try to write clean SCSS that doesn't nest more than 3 levels deep. You can see the challenge tooltips in the attached spec files; just try to make your style near what's provided (it doesn't have to be exact). You will be mainly scored on the quality of your JSX, not your CSS.
The tooltip components we're building will appear above the track abbreviation on the left, the prizes in the middle of the card, the progress bar on the right side, the user avatars when they appear on the card, and the numbers of users and submissions on the right side of the card. These components should NOT be card-specific, but should be reusable anywhere in the Topcoder site. That means they should be function, "black-box" components.
Follow the specs attached to this challenge. Look at the 4th part of the live spec for the tooltips; on the .png, look at the bottom of the image.
Below is a breakdown of requirements for each part.
Parts of the Challenge Tooltips
1. Track abbreviation
For the tracks we've provided so far, please hard-code an example description that can be displayed on every instance of that kind of challenge.
2. Prizes
The image pretty much tells the story. It looks like the API is only providing reliability bonus when it's there, so just list that one.
3. Progress bar
The phase information isn't in the API, so use what you can of what you're given and mock the rest out.
4. User avatars
This display will require a query to the user profile API (here's our API reference). Again, the image is a reference. At the bottom, just show some of the challenge types with the highest number of wins.
5. Numbers of users and submissions
Follow the card. Just show the number with a bit of extra text to explain.
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 build on the existing card component, using the V2 API (i.e., don't use the 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 close to the designs provided, 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! We've already added this tooltip component, and you can optionally bring in this mixin if it makes things easier or more elegant. 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.