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 fine-tune the SCSS stylings of the components we've been writing to match our component specs and SCSS guidelines. This will be done within the original ChallengeCard and ChallengeFilters components we've been building, as well as their subcomponents. There will be some mocked components in this challenge, but primarily, the styling will be for the working components that we've built.
SCSS Guidelines
An important part of this challenge will be getting our SCSS to match our SCSS guidelines. Any new SCSS you write should match these guidelines, but you should also try to bring all the component SCSS files you work to in line with these guidelines.
Live Specs
Your guide to what you're implementing are the attached live specs. Please refer to the specs for dimensions, font weights, copy for components that are being mocked out, etc. Below, we go over some of the individual parts of the specs.
First up are the artboards from the UI_Kit.zip:
1. Mobile layout
This artboard illustrates how the layout should scale as the challenge card shrinks. All the styling should be done on the challenge card component level.
2. Challenge cards - mobile
This one got squished a little, so skip it in favor of the third board
3. Challenge cards - mobile
This shows what the challenge cards should look like when displayed with the filters in mobile view. Use this artboard to style the filters bar for mobile view.
4. Cards - Desktop
This gives some more detail on the challenge cards. It also shows SRM cards. Although we're not currently displaying any SRMs, please mock this up in HTML/CSS. You can make a separate React component for it in the repo. For the tooltips, some of the data is mocked out, but can still be styled.
5. SRM Cards
This shows what the SRM Cards look like in the filter view. If you can use the filters component along with your example SRM components to create a mock of this, that would be great. No need to use exact data/copy in the spec, just use the SRM components you mocked up.
6. Challenge Cards - Desktop
This gives some more details on the styling for challenge filters. Please style everything we've already implemented for filters, and also mockup the sidebar on the right.
Lastly, Card_Components.zip contains a spec that breaks down the challenge cards into individual components. You may not need this, but it may be helpful in implementing the designs for the cards. When you implement the card designs, please do everything on the component level and do not exceed a maximum of 3 level of SCSS nesting.
Experience with React is not required for this challenge, but some familiarity will be helpful as we're using JSX to generate our DOM components. If you happen to write any JS/React in the course of doing this challenge, code should match the Airbnb React Styleguide. Use ES6 syntax and build functional components.
If you want to pull in outside components or other CSS or 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 fine-tune the SCSS stylings of the components we've been writing to match our component specs and SCSS guidelines. This will be done within the original ChallengeCard and ChallengeFilters components we've been building, as well as their subcomponents. There will be some mocked components in this challenge, but primarily, the styling will be for the working components that we've built.
SCSS Guidelines
An important part of this challenge will be getting our SCSS to match our SCSS guidelines. Any new SCSS you write should match these guidelines, but you should also try to bring all the component SCSS files you work to in line with these guidelines.
Live Specs
Your guide to what you're implementing are the attached live specs. Please refer to the specs for dimensions, font weights, copy for components that are being mocked out, etc. Below, we go over some of the individual parts of the specs.
First up are the artboards from the UI_Kit.zip:
1. Mobile layout
This artboard illustrates how the layout should scale as the challenge card shrinks. All the styling should be done on the challenge card component level.
2. Challenge cards - mobile
This one got squished a little, so skip it in favor of the third board
3. Challenge cards - mobile
This shows what the challenge cards should look like when displayed with the filters in mobile view. Use this artboard to style the filters bar for mobile view.
4. Cards - Desktop
This gives some more detail on the challenge cards. It also shows SRM cards. Although we're not currently displaying any SRMs, please mock this up in HTML/CSS. You can make a separate React component for it in the repo. For the tooltips, some of the data is mocked out, but can still be styled.
5. SRM Cards
This shows what the SRM Cards look like in the filter view. If you can use the filters component along with your example SRM components to create a mock of this, that would be great. No need to use exact data/copy in the spec, just use the SRM components you mocked up.
6. Challenge Cards - Desktop
This gives some more details on the styling for challenge filters. Please style everything we've already implemented for filters, and also mockup the sidebar on the right.
Lastly, Card_Components.zip contains a spec that breaks down the challenge cards into individual components. You may not need this, but it may be helpful in implementing the designs for the cards. When you implement the card designs, please do everything on the component level and do not exceed a maximum of 3 level of SCSS nesting.
Final Submission Guidelines
We want you to write these styles in our react-components repo. Create a branch that forks off of the challenge-listings branch, and write all your stylings for the existing ChallengeCard and ChallengeFilters components and their subcomponents (mocked components may be a partial exception to this). Global styles belong in the /styles folder.Experience with React is not required for this challenge, but some familiarity will be helpful as we're using JSX to generate our DOM components. If you happen to write any JS/React in the course of doing this challenge, code should match the Airbnb React Styleguide. Use ES6 syntax and build functional components.
If you want to pull in outside components or other CSS or 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.