Challenge Overview
Please take a look at challenge spec here:
https://docs.google.com/document/d/1CfvsmwCPJufYvT-GtlYkDe1PjBkMinIosUYZl8Vauqo/edit?usp=sharing
Project Overview:
Welcome to Topcoder – Member Search Responsive Pages UI Prototype Challenge! The goal of this challenge is to create the HTML5 Prototype for an application using the provided "Member Search" storyboards. The prototype must follow our standards and our guidelines. Review the details below.
The main task of this project is to create the HTML5 UI Prototype based on the provided Storyboard design by using industry standard best practices.
As part of this challenge you will need to document all HTML5/SCSS code. We need clear explanation of the code to help us figure out how all the HTML5/SCSS code functions and to make it easier for future developers and the Topcoder team to understand what you have built.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview:
This challenge is to create the HTML and SCSS for a new member search page on Topcoder. The results of this challenge will be used to create modular ReactJS components, so we’ve specified the way that we want the HTML to be structured in the tree below. Color-coded items will be modular components that are reused in multiple places. The assets provided for this challenge include clickable .html files, which you can reference for SCSS variable names, CSS values (padding, margin, line-heights, etc.) and .svg exports.
General Requirements:
- Please use this branch as work base: https://github.com/appirio-tech/ui-prototypes
Each component should have its own SCSS file, so, in the end, there will be many small SCSS files. Use the variable names given in the specs and flexbox wherever appropriate (no tables, please). Furthermore, media queries should use the nested SCSS syntax. Here is an example:
.box {
height: 50px;
width: 50px;
@media screen and (min-width: 768px) {
height: 100px;
width: 100px;
}
.inside-box {
font-size: 14px;
@media screen and (min-width: 768px) {
font-size: 18px;
}
}
}
Feel free to create copies of components, which demonstrate that maximum character lengths display correctly. Here are the max char lengths to support:
-
username - 15 characters
-
example: Sky_fallingDown
-
-
user bio - 256 characters
-
country - 36 characters
-
example: United States Minor Outlying Islands
-
-
skill name - 34 characters
-
example: IBM Rational Application Developer
-
-
top-subtrack stat and challenge acronym - 9 characters
-
Rating/Achievements/Wins example: 4,462
-
Challenge acronym example: F2F
-
HTML Tree structure:
member-search-container
-
member-match
-
list-container (top members list)
-
list-container (members list)
member-match
-
user-info
-
user-stats
list-container (top members list)
-
list-header
-
top-members-list
-
top-member-item
-
list-number
-
user-info
-
user-stats
-
list-container (members list)
-
list-header
-
members-list
-
member-item
-
user-info
-
user-stats
-
list-header
-
header-text
-
list-count (only shown for member list)
user-info
-
user-profile
-
user-bio (only shown on member-match)
user-profile
-
user-avatar
-
user-image
-
user-rank
-
-
username
-
user-details
user-stats
-
skills-list
-
skill-item
-
-
top-subtracks-list (if top-subtracks-list is shown, user-tracks-list is not)
-
top-subtrack-item
-
-
user-tracks-list (only shown if there are no top-subtracks)
-
user-track-item
-
top-subtrack-item
-
subtrack-rating (shown only if subtrack supports rating)
-
subtrack-ranking (shown only if subtrack supports ranking)
-
subtrack-wins (shown only if subtrack supports wins)
-
subtrack-name
user-track-item
-
track-name
Required Pages:
1- Members – Desktop View:
- List cards-members-desktop.html
2- Members – Mobile View:
- List cards-members-mobile + scaling.html
Note: To clarify, this challenge is for the new member search results page. The new header and tabs (All/Challenges/SRMs/Members/Pages) are not part of this challenge, even though they are in the designs. Refer to the HTML tree structure for details.
Browsers Requirements:
- IE9+
- Latest Google Chrome (Windows & Mac OS).
- Latest Safari (Windows & Mac OS).
- Latest Firefox (Windows & Mac OS).
- All Mobile & Tablet browsers.
Documentation Provided:
- Storyboard Screens and PSD files can be found in forums.
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.