Challenge Overview
Topcoder is in the process of developing a new version of the Connect platform, which connects customers with project managers, copilots and competitors to run projects through the Topcoder services.
We are happy to bring challenges to our community to help us building one of the main tools our teams and community members will be using soon!
For this challenge, we’re looking forward to create clean and easily maintainable front-end code for the project dashboard components.
Project Overview
The new version of Topcoder Connect aims to provide an easy experience for customers and project/challenge managers through a very clean and modern UI.
The goal of this challenge is to develop the front-end UI HTML/SCSS for project dashboard. The final HTML/SCSS is going to be used for the React components development, so we want really high quality and stand alone HTML/SCSS.
Overall Requirements
- HTML and CSS code must be W3C validated.
- DO NOT create any type of user interaction. Deliver each status of the items (hover, selected, etc) as a separate item. They are going to be coded as React components in a follow up challenge after this one.
- Source code and design text must be written in US-English.
- The minimum size of a screen is 768px. NOT mobile.
- Use the base-unit, corner-radius, and color names variables instead of pixels and #fff colors.
- Create high quality SCSS, look at https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_checkboxes.scss - the Slider is a good example of well abstracted code.
- Don't overly nest your code; we'll need to abstract the final DOM into multiple components; try to stay into smaller logical pieces.
- We use autoprefixer, so don't worry about all browser-specific rules.
- For color references you can also use our style guide https://app.frontify.com/d/zEXqGHFD1YN2/ui-library#/elements/colors.
- Use flexbox instead floats.
- Define spacing with multiples of $base-unit, and corner radius through $corner-radius.
- Do not include third-party libraries; we want to stay as vanilla as possible at this stage.
- The full design is mostly for showcasing the final stage - we'll need that as well, but you should be able to build id through reusing the stand-alone sub-components (explore the spec files).
- DO NOT redeclare hex colors as variables - use the ones we have in /styles/_colors.scss.. (https://github.com/appirio-tech/tc-ui/tree/feature/connectv2).
- When creating the component page and repo, try to break them into the separate items - make sure that header, a row, and the footer are different self-sufficient styled elements (do not overly nest the SCSS).
- Do not use external icon repositories; we're including the icons as React.js components. It is important for us to minimize external dependencies for resources (SCSS libraries, icon fonts [not good at all], icon libraries, etc.).
- Do not redeclare/style buttons and form elements that exist in the /styles/_forms.scss and the library as whole. If you need to define a button style (or extend an existing one) - think how this could happen in the /styles/_forms.scss (or relevant _*.scss) file. In the end we want to add extrapolate the styles you create int 2 places:
-- Component-specific styles (used only once).
-- Global styles (/styles/*.scss) used from all components.
-- Can you try to work in such a way so we can just copy-paste the SCSS for the appropriate DOM structure for the component?
Project Dashboard Components
1. Feed
- See “Feed” screen in the HTML Spec (left panel).
- Ignore the header and subheader (username, subnavigation). Not necessary to code them (we have it already).
- Create your components as modular as possible. We want to re-use them in other scenarios and they should be easy to fit.
- “Load Earlier Messages” should be a link/button, for your consideration.
2. Messages
- See “Messages” screen in the HTML Spec (left panel).
- The message panel is fixed size at 720px width. However, the elements inside should be responsive and fit within the parent container.
3. Side Panels
- See “Side Panel” and “Side Panel Components” screen in the HTML Spec (left panel).
- The panel is fixed size at 360px width. However, the elements inside should be responsive and fit within the parent container.
- You will notice that “project team” is actually the sample starter project. Re-use it, don’t create anything new out it. Except for the “+” button, which now is in a different position, make the proper adjustment.
- “You are about to delete ..” notification is already provided. Re-use it.
* Note: as demo purpose, we also want to see the “all-in” versions of the components working together in the dashboard (projects and messages). This means, we want to see the six (6) pages you can see in the HTML Spec left panel.
Browser Requirements
- IE 11+
- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows
Resources
- Project Template (local running sample, your starting sample/template)
- Team Management Specifications (interactive HTML files with measurements and assets)
- Topcoder UI Kit Guidelines
Final Submission Guidelines
Provide all your files in a zip container.