Challenge Overview

Overview

In this challenge, we’ll be creating a new member profile that builds upon the existing topcoder views, while importing an additional view/tab from coderbits. Use the existing design screenshots and the coderbits profile as a guide, modify the existing member profile page to build an angular view for the new profile.

All of the existing tabs (Design/Develop/Data Science) on the member profile from the screenshots that include existing data from topcoder will be sourced from the existing calls to the topcoder API.

The new “Member Overview” tab will include charts from the corresponding coderbits user of the same name. The additional sections of the portfolio (Summary, Skills, etc) will show on every tab, under the main section for that tab. All the data for these sections will come from the coderbits profile API, detailed below.

As a general rule, a particular section or navigation element should only be shown if there is data behind it. If the data source has no data for the user, that section should be hidden.

If no member exists by that name, the “Member does not exist” message from the existing topcoder profile should be shown:

Profile Header

An empty profile (exists, but no ratings or data from coderbits) should have the same size grey header as other profiles with no data below, then remain white until the footer shows in its natural spot. This differs slightly from the screenshot: all-complete/06.a.no-challenge-and-no-coderbit.png

The rating that should appear in the top right is the rating of the challenge type that they have received the most wins in. If they have not competed, this should be omitted and only the left part of the profile header should be shown. The rating color should correspond to the existing color coding for ratings:

 

Please note if they have the most wins in design, where there is no rating, the control will show the number of wins and number of submissions:

 

If a member has no wins, show the control based on the area that they have the most submissions in, but drop the number of wins from the control (see screenshots).

THE “CHALLENGE MASTERY” TEXT AND FLAG DOES NOT NEED TO BE INCLUDED. Please center the rating/wins/submissions numbers in the control instead.

Profile Tabs

As a general philosophy, if there is no data behind a tab, then don’t show the navigation elements for a tab. For instance if a user has data from the coderbits API and has competed in Design challenges, only show the Member Overview and Design tab. Similarly if a user only has Develop and Data Science challenges, but has not compete in design or have any data from coderbits, only the Develop and Data Science tabs should be available for navigation. This should hold true for all sub tabs as well (only show Challenge Types when the user has a rating, etc). See all-complete/06.b.coderbit-only.png and all-complete/06.c.tc-only.png

Also, if a navigation element only contains one element (user has only Design) then hide the navigation element and show the relevant tab.

For rendering of the charts in the member overview, chartjs provides an easy method for doughnut charts, so feel free to include that or any reasonable third party library for doughnut charts. Please not there are a total of eight charts to show (see coderbits profiles), and the arrow should behave similarly to coderbits (only show the arrow when there are more charts in that direction)

Although different in the screenshots, the rating history graphs can remain unchanged from graphs on the existing member profile page (rating color on background instead of data points).

Design Tab

There will be two sub tabs within the design portfolio tab (see all-complete/02.b.design-challenge-portfolio.png and all-complete/02.c.design-additional-portfolio.png). The sub tab navigation should work similarly, only show the navigation element if the member has data in that area, and don’t show the navigation element at all if they only have one tab. The “Challenge Portfolio” will be the designs included from competitions on topcoder, and should contain the same designs, descriptions and text as the existing topcoder design carousel.

The pictures should by default be sorted newest to oldest, top left to bottom right, by a server side sort (both API endpoints default sort newest to oldest).

In the “Additional Portfolio” section, drop the “Lorem ipsum” description text from the bottom (summary view) and only show the title. For the selected image that is clicked on, show all the details that are returned from the coderbits API, but many of the images have an empty “Description” so remember to account for that.

In addition, please include the icon from the social network (behance, etc) and the icon should link to the original post.

Badges

One of the few sections that contains data from topcoder and coderbits together is the “Awards and Badges” section (see design-spotlight/03.g.awards-and-badges.png). This section should be included on every page if the user has badges from either location, but one portion of the component or the other may not show. The coderbits badges will be under “Other Badges”

Other

If there are any parts of the design that remain unclear from the screenshots, please favor making the design consistent with the look and feel in the context of the existing topcoder site and coderbits profiles.

The loading bar on the existing member profile is inconsistent with the challenge listing page. While the profile data is loading from the API, please show the blue loading bar/circle from the challenge details, but please make sure the loading bar shows during the load (challenge listing loading bar only shows if you scroll down during the load)

Coderbits API

You will be able to call the test the coderbits API from:

https://ec2-54-164-107-36.compute-1.amazonaws.com

If you need additional test data, please use the profile builder on the test coderbits instance to modify the profile you wish to test:

https://ec2-54-164-107-36.compute-1.amazonaws.com/account/profile

Since the cert is invalid, you’ll need to accept that invalid cert in a tab before XHR requests from the client side will work, or postman will function to test against.

When making the calls, please define a variable to use as the host a configuration for that variable is being completed in another challenge, so your variable should be easily substitable with that configuration.

The API should include all the necessary data to build the profile and is available to be consumed cross domain via CORS XHR requests from *.topcoder.com.

First, on the coderbits host make a GET request to /username.json, for example:

https://ec2-54-164-107-36.compute-1.amazonaws.com/thabo.json

The response will include all the data necessary to show the summary view and return booleans indicating what other parts of the profile to show.

All endpoints should be available without authorization by a simple GET request. If there are any issues with the API, please post in the forums.

Depending on the state of those booleans, the following endpoints will be called to get the remaining data. All of these endpoints take page and page_size as query parameters and respond with data in a paged format, so be sure to include data from all the pages returned.

       if (showSkills) {

           '/api/skills/' + username

           '/api/languages/' + username

           '/api/environments/' + username

           '/api/frameworks/' + username

           '/api/tools/' + username

           '/api/traits/' + username

           '/api/interests/' + username

       }

       if (showCode) {

           '/api/repositoriesown/' + username

           '/api/repositoriescollaborate/' + username

           '/api/repositoriessupport/' + username

           '/api/repositorieswatch/' + username

           '/api/snippets/' + username

       }

       if (showBinaries) {

           '/api/apps/' + username

           '/api/packages/' + username

       }

       if (showDesigns) {

           '/api/designs/' + username

       }

       if (showEducation) {

           '/api/courses/' + username

           '/api/readings/' + username

           '/api/writings/' + username

           '/api/answers/' + username

           '/api/presentations/' + username

       }

       if (showCompetitions) {

           '/api/challenges/' + username

       }

       if (showAwards) {

           '/api/recommendations/' + username

           '/api/badges/' + username

           '/api/badgesother/' + username

       }

       if (showMemberships) {

           '/api/memberships/' + username

       }

       if (showActivityStream) {

           '/api/activities/' + username

       }

 

Browsers Requirements : 
- IE10
- IE11
- Latest Safari
- Latest Firefox
- Latest Chrome

Deployment Guide :

Local Setup : https://gitlab.com/topcoderinc/tc-site/blob/master/README.md#local-env-setup, if want to disable local minification, please configure it on config.json

You may use the incuded config.json to use the production servers to test since this challenge should not impact other areas of topcoder, but please remember that in this configuration, an action on local.topcoder.com is equivalent to an action on www.topcoder.com.



Final Submission Guidelines

  1. Please submit only PATCH files, reference :https://gitlab.com/topcoderinc/tc-site#challenge-submission-and-review
  2. Please also submit Deployment Guide file
  3. If additional / updates page on wp-admin is required, please provide them in TEXT file and explain it in your Deployment Guide
  4. Any new js or css file must be included in the registry. Learn about this in script-register.json file, and be sure it will be processed the Gruntfile.js as part of the build process. All tests must pass after the included files are minified.
  5. We will have winner to submit pull request once winner declared

ELIGIBLE EVENTS:

2015 topcoder Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30047458