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.
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.
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!