Module Assembly - topcoder member profile Develop tab refactor - angular

The goal of this challenge is to refactor content-member-develop.php such that backend API requests are moved to an angular service instead from PHP.
Currently http://www.topcoder.com/member-profile/{handle} - which is using Wordpress - render tabs content by PHP code (wordpress template) which cause performance issues.

We've already refactored member profile (member information,photo,quote,country,etc) section, and now we will advance to Develop tab of this member profile page.

Big picture: What are we trying to do?

There will be series of challenges to refactor all of member profile pages. We want to remove all API calls to use angular/javascript instead of some calls happening in PHP and some in javascript in the current implementation. To check how the current page works: http://www.topcoder.com/member-profile/{handle}

Scope:

1. Sub track tabs (Assembly, UI Prototype, etc), please only list available subtrack of a member like the current page works
   API endpoint example : http://api.topcoder.com/v2/develop/challengetypes
2. Rating Summary
   API endpoint example : http://api.topcoder.com/v2/users/FireIce/
3. Develop statistic
   API endpoint example : http://api.topcoder.com/v2/users/FireIce/statistics/develop
4. Rating and Distribution
   API endpoint example : http://api.topcoder.com/v2/develop/statistics/fireIce/Assembly , http://api.topcoder.com/v2/develop/statistics/hohosky/Specification

 

Expected Results :
- Please see http://tcqa1.topcoder.com/member-profile/fireice/?tab=develop to see how current AJAX based work, and we will refactor it to AngularJS
- Develop tab content will be loaded by AJAX like the current state, but this feature should be by AngularJS based
- Please show "loading..." text while content is being loaded. this will be similar to "Downloads" section of http://tcdev1.topcoder.com/challenge-details/30041860/?type=design#.U4crWnZTBdg
- Switching from a sub track to another track should be by AngularJS and should NOT reload page (ideally entire profile page is a single page app, with routes for switching individual tabs develop/design/data science and their corresponding subtracks)
- Graph view should also work fine
- Please ensure Detail Statistic (Inquiries,Submissions,Submission Rate,etc) display correct values
- Please exclude badges section for now because it will be improved later. Currently AJAX will also load badges section at right side, which cause performance issue.
- Please be sure your submission and this https://github.com/topcoderinc/tc-site/pull/318/files would have the same pattern

Refactor Requirements:

Modify the submitted code to the following structure and coding guidelines.

1. Under /tcs-responsive create a new page ng-content-member-develop.php based of content-member-develop.php that will be new page using the refactored code. and be sure existing ng-page-member-profile.php includes this new page
2. Update all js code related to angular refactoring under js/app/member-profile
3. Organize html/js/css files under js/app/member- profile structure as below (adding files as necessary).     

• • member-profile

    • js/

      • module-member-profile.js

      • controllers-member-profile.js

      • directives-member-profile.js

      • filters-member-profile.js

      • services-member-profile.js

      • controllers/

        • {reallybigcontroller}-member-profile.js

      • directive/

        • {reallybigdirective}--member-profile.js

    • lib/ (if using any libs referred by profile pages)

      • {libname}/

        • files related to the {libname}

    • partials/

      • *.html (any template files)

    • demo/index.html (if you want to demonstrate use of the new services)

 

4. Refactor the code create a proper single page angular app for member-profile, splitting the model/view/services accordingly. All view code in html should be under partials/ as templates as much as possible.  Create logical controllers, services (for sharing data across controllers), directives to capture reusable ui behaviour. API calls should be under new angular service you will create called  MemberProfileService

5. For this challenge, badges, design and data science tabs will be out of scope because they will be enchanced later.

 

Resources Provided:
- Latest theme and plugin available on github https://github.com/topcoderinc/tc-site/tree/starting-point-member-profile-refactor, but we'll have winner to create PR to dev branch later
- Latest xml is available on https://github.com/topcoderinc/tc-site-data
- API doc : http://docs.tcapi.apiary.io/#get-%2Fv2%2Fuser%2Fprofile

Quick Installation guide:
1. Activate theme and plugin
2. Import provided XML file
3. Set "home" as front page
4. Set permalink to %post_name%
5. Please install site on local.topcoder.com (add to hosts file), so your local site can read tcsso and tcjwt cookie
6. Please set "Member Profile Using AngularJS" as template of "Member Profile" Page, maybe provided XML file is out of date
 

Final Submission Guidelines