Challenge Overview
PROJECT OVERVIEW
Detect IT is a web application that is being developed by the World Wildlife Fund that allows comparison of trade data to identify discrepancies in reporting of imports and exports between countries which may be a sign of illegal activity. For example: if Russia reports significantly less exports of king crab to South Korea than South Korea reports in imports of king crab from Russia, this suggests there may be some illegal trade occurring in king crab between the two countries.
This challenge is part of the Living Progress Build Challenge Blitz program.
COMPETITION TASK OVERVIEW
In previous challenges list below we’ve built functionality that allows users to perform live searches against our Trading Data database and display results in both tabular and graphical form:
Living Progress - Build - WWF - Real Time Search Implementation and Results Display
Living Progress - Build - WWF - Real Time Search Implementation and Results Display - Part 2
We’ve also developed the Forum-like pages to allow users to conduct discussions around the topic of illegal trade:
Living Progress - Build - WWF - Forum Development
You can see the current prototype in action here: http://54.218.19.28:8080/
Here are the items we’re going to be tackling in this challenge:
1. Implementing the publishing feature on the results display pages:
Clicking the publish button brings up a dialog.
The tags should be based on the Countries and Commodities selected in the Search and displayed in the results.
Clicking Publish should push the content to the Contentful CMS system as a POST content type and should be available in our forum page. It takes about 10-15 seconds for content posted to the CMS to be available for retrieval by end users.
2. You should implement dynamic tagging on the forum page (/forum). The tag names should be based on the countries and commodities in the TradeData.countries table and TradeData.commodities table. Vertica database access and record retrieval has already been implemented in previous challenges.
Some of the names/text in our tags are going to be very long -- several hundred characters in fact. We’ll need to implement mouse-over/popup bubble capability which can display the complete text. I think as a guideline each tag should be a maximum of 75-100 characters on the forum pages.
3. Please make sure that the post by users actually publishes. In a recent smoke test of the current publishing capability on the site my content went to the CMS only in draft form. https://github.com/topcoderinc/HP-LP-WWF-Detect-IT/issues/16. Any user should be able to post content to the CMS and have it displayed on the forums tab. We’ll provide an id and password to the Contentful CMS system in the forums. Please be considerate and do not delete content which you haven’t created.
4. Users should be able to edit and delete posts after they make them.
5. Our search data (/searchdata) page has a few issues:
5.1. The page has a strange rendering issue while the dropdown lists are populating from the database. Every time the page loads there are odd little boxes being displayed on the screen near each of our multi-select picklists. This is disconcerting and we should try to make the page loading less obvious to users.
5.2. We have a usability issue with each of our multi-select picklists. We have some screenshots logged here. Currently it is a two step process to include an item you’ve selected from the picklist into your query. First you have to select the item in the dropdown, then you have to click the little plus button to include it and generate the “tag” which is shown on the screen. I’m afraid this isn’t intuitive -- no one (including myself) gets it right away. Let’s remove the “plus” sign buttons. The little checkboxes found in the Importers and Exporters multi-select picklist should be sufficient to identify which items have been selected. When a row is checked/selected that should add the “tag” to the page/search parameters. For some reason the little checks haven’t been added to the Fisheries Product dropdown so we’ll need to add them there. We should allow users to deselect an item from the dropdown list as well as clicking the minus sign on the tag to remove tags from the queries.
5.3. Please enable the tooltips bubble which are currently in place on the Fisheries Product list.
https://github.com/topcoderinc/HP-LP-WWF-Detect-IT/issues/24
5.4. The tooltip should display the complete Commodity.text field of each commodity record. Some of them will be long -- several hundred characters -- too long in fact to fit into the multi-select list itself so these popups will be very important. There is some placement/rendering issue with the popups currently. The first 20 popups appear beside the appropriate row but then they start appearing below the list itself and eventually disappear from the page altogether.
6. On our search data page, could we create a formatted alert dialog rather than using the default javascript system popup. https://github.com/topcoderinc/HP-LP-WWF-Detect-IT/issues/8
7. We should also display a dialog warning to users when there are no results found for a particular query. https://github.com/topcoderinc/HP-LP-WWF-Detect-IT/issues/9
8. On our results display screen (/datacompare) we should display a label for the Vertical axis in our chart: Kg or USD: https://github.com/topcoderinc/HP-LP-WWF-Detect-IT/issues/15
9. Please remove the chart format dropdown. We’re only going to support Line charts for our initial release. https://github.com/topcoderinc/HP-LP-WWF-Detect-IT/issues/23
10. Let’s implement the print button on the /datacompare page. The print button should render the current graphic (either the chart or the map) to a pdf file.
11. Please implement the download button on the /datacompare page. The download button should download a csv file of the current data set shown in the tabular data.
12. We have an issue with our Contentful content rendered on the following pages: http://54.218.19.28:8080/tips. It doesn’t reflect the formatting which has been done in the editor. It looks like the content is being provided/returned by the API in “markup” format rather than HTML. https://github.com/topcoderinc/HP-LP-WWF-Detect-IT/issues/22
Testing
For the backend services, you must provide unit tests and postman file to test the REST services.
For frontend, we've asked our prototype developers to create some basic unit tests for their AngularJS code. Please make sure that you update the front-end unit tests to ensure they are still functional. Any additional unit tests that you think would be helpful for future developers to understand your updates would be appreciated.
Technology Overview
Java 1.5
C# / .NET 4.5+
Visual Studio 2015
ASP.NET MVC Web API
SQL Server Express 2016
REST
Angular.js
CSS
Vertica
D3.js
Final Submission Guidelines
Submission Deliverables
1. Complete projects that cover all the mentioned requirements
2. For the backend, we need a word based deployment guide with details on how to configure and deploy the services to IIS, and details on how to test / verify the REST services.
3. For the frontend, please provide a README in markdown format with details on how to deploy and test the pages.
4. Please keep your frontend and backend code in separate and independent folders, because they will need to be merged into different repos.
Final Submission
- For frontend, please fork the following repo: https://github.com/topcoderinc/HP-LP-WWF-Detect-IT. We are working from the angular-dev branch (which is the default). This contains the existing front-end website code.
- For backend, please fork the following repo: https://github.com/topcoderinc/HP-LP-WWF-Detect-IT-Services. We are working from the master branch (which is the default). This contains the existing backend services code.
- You will need to request access to the repos by providing your GitHub ID in the GitHub Access thread in the forum.
- The winner will be asked to provide a pull request to each of the repos with his or her updates.
- You will still need to submit a submission.zip with your source code, build scripts, and configuration files via the challenge detail page on topcoder.com.
- Check README file to deploy this Angularjs app
- For each member, the final submission should be uploaded via the challenge detail page on topcoder.com.