Key Information

Register
Submit
The challenge is finished.

Challenge Overview

Challenge Introduction:

In this challenge, we want to build the members and statistics page for the new TopCoder Site.

Challenge Requirements:

General Requirements

  1. The prototype should be built using HTML5, CSS3 and plain javascript (no other framework should be used). For HTML5, please use JADE template engine (http://jade-lang.com/); for CSS, please use SCSS. 
    • ������Please see https://github.com/appirio-tech/topcoder-app/blob/dev/README.md on the code convention and how to structure your submission. As this prototype will be integrated into the topcoder-app (www.topcoder.com)
  2. Please use this branch as work base: https://github.com/appirio-tech/topcoder-app/tree/sup-1508-sup-1509-community-pages 
    • Styles should be in .scss and put in assets/css/community folder
    • Markup should be in jade and should be modifications to the existing to jade files:
      - app/community/members.jade
      - app/community/statistics.jade
    • AngularJS should be used, please stick to the style of controllers, etc as in the existing app with any javascript changes, members.controller.js and statistics.controller.js should be put in the same folder as jade files, etc. If there is any directives, follow the similar naming pattern as existing pages. For
    • For responsiveness, make the default CSS for mobile and use @media queries for anything larger
  3. Prefer use of .svg images to .png to allow images to naturally scale to different platform sizes rather than media queries for specific platforms.

Detailed Requriements

  1. The Members page should follow
    • 01. Members.jpg
    • User can use the "Search member here..." input box to perform the search, after the user clicks search icon or press enter, the result should be retrieved via a REST API. In the prototype, please use a json file to simulate the behavior.
      • The search result GRID view is like 02. Members Search Result.jpg
      • The search result LIST view is like 03. Members Search Result List.jpg
      • Grid view is default view
    • The mobile version should be like Mobile/01. Members.jpg and Mobile/02. Members Search Result.jpg. There is only one view for the search results in the mobile view.
  2. The Statistics page should follow 04. Statistics.jpg for desktop version and Mobile/03. Statistics.jpg for mobile version.

Browser Requirements:

  • IE9+

  • Latest Google Chrome (Windows & Mac OS)

  • Latest Safari (Windows & Mac OS)

  • Latest Firefox (Windows & Mac OS)

  • All Mobile & Tablet browsers

Challenge Input:

Download the storyboard in the challenge forum.



Final Submission Guidelines

  • The updated files or a patch file to the branch.
  • A txt README on how to deploy and verify the prototype.

ELIGIBLE EVENTS:

2016 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30051686