Key Information

Register
Submit
The challenge is finished.

Challenge Overview

We are adding a new, comprehensive leaderboard to the topcoder site and we need your help to lay down the functional base of this new leaderboard. We have a UI prototype of the leaderboard here (http://appirio-tc-leaderboard.herokuapp.com/), which should give you a good idea of what we're aiming for. However, since that UI prototype was built, requirements have changed a good amount, so we want to start from scratch with the new requirements in mind. What we're hoping you'll provide us with is completely clean and functional Angular code that follows our styleguide (https://gitlab.com/topcoderinc/angularjs-styleguide/tree/master) and fulfills all our requirements, and hooks up to a simple, stripped down UI which you'll create. The UI should behave like the Heroku app linked above, and roughly resemble it in terms of form, but you need not pay close attention to style or closely imitate the exact look and feel of the Heroku app. What we're looking for is clean, concise Javascript that follows are styleguide, and review scores will reflect this.

Here's what we're providing you with:

  1. A skeleton of the topcoder UI (essentially just a header and footer -- basically everything you see in the Heroku app, minus the main content section that holds the leaderboard). - LB-submission-frame.zip in the download section. You need to run it under nodeJS
    • Install NodeJS
    • Browse to the archive folder and run 'npm install'
    • run 'node web.js'
    • Check http://localhost:5051/
  2. JSON that you'll deliver with a mock backend for each track (the real backend isn't ready, so this will have to do for now. You can decide how to mock out the backend, but the services should be very close to what the finished product will look like).
    • The data is avaiable at LB-submission-frame\public\js\app\leader-board\data

And naturally, we're also going to give you some more detailed requirements:

  • Things will generally mirror the prototype
    • same tabs
    • same structure: the overall tab will lack a table, but the different tracks will have a table
  • ...but there are lots of changes
    • there won't be a hover effect when your mouse is over a member's picture.
    • things will generally reflect what the design tab is like in the prototype, which was updated from the initial version
      • no sorting in the table
      • no indication of change in place
      • everything will be determined by total first place wins, and there will be no indication of rank or points
    • pagination will happen on the front end���
    • some indication should be given of the current index (e.g., 1-25 of 342)
  • there will be two templates
    • an overall template for the overall leaders
      • no table
      • just shows the top leader of each track
      • no selection of challenge type
    • a 'track' template that will be used for the three tracks
      • top section with pictures of top 10 leaders, plus a table that the user can page through
      • should have a selector for challenge type
        • will be populated at controller level
  • controllers
    • two controllers:
      • OverallLeaderController
        • no methods
        • vars
          • lastUpdatedAt
          • members
            • {data: { ... }, design: { ... }, dev: { ... }}
      • TrackLeaderController
        • methods
          • getLeaders(track, challengeType)
            • second var is optional -- default to all challenge types
            • load all data, handle paging in grid
          • loadPage(n)
            • loads the nth page using the members that are currently in scope
            • maybe this won't be necessary if the grid handles everything
        • variables (this isn't comprehensive, but should get you started)
          • leaders
            • the list of leaders currently in scope
          • pageSize
          • track
          • challengeType
          • lastUpdatedDate
          • etc.
  • table
  • routes
    • /overall
      • doesn't take any inputs
    • /:track/:challengeType
      • should also be able to handle pagination in routes
        • /:track/:pageNumber
        • /:track/:challengeType/:pageNumber
    • try to use resolve on the route level to resolve promises and load data
  • services (only one)
    • LeaderboardService
      • init()
        • returns top 25 leaders of each track and challenge types for each track
        • data should be loaded once and shared between controllers
      • getLeaders(track, challengeType)
        • same logic as controller method
    • mock out the backend so that the service is basically doing the same AJAX stuff it'll do when hooked up to a real backend
    • for the different challenge types, just return the same data as you're returning for the track
      • for now this is fine, since we're just using static JSON
      • but still, actually make the AJAX call
    • nothing to POST, only GET calls
  • All code must adhere to our styleguide (linked above)
  • Should implement some basic error handling
    • for routes
      • / -> /overall
      • /asfdsa (invalid track) -> /overall
      • /design/afsd (invalid challenge type) -> /design
      • /design/9999 (out of scope page number) -> /design

Please post questions in the forum and I'll update the spec as they're answered. This should be enough to get started, but I'm sure questions will come up.

 



Final Submission Guidelines

Use the included download 'LB-submission-frame.zip' to build your submission on. Since we're building from scratch, submissions should be as a zip file. The app should be built in public/js/app/leader-board.

ELIGIBLE EVENTS:

2015 topcoder Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30046926