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 this challenge, we’re addressing a series of issues to round out the functionality in the system:
1. Guest User Access
1.1. Users shouldn’t be required to log into the application in order to interact with it. That following pages should be available to users without logging in:
1.1.1. Dashboard
1.1.2. Search Data (login-only required for Save Query function)
1.1.3. Data Comparison Details
1.1.4. Search Alerts
1.1.5. Alert Detail
1.1.6. Tips and Best Practices
1.1.7. Forum (login-only required to Create New Posts or to Make Comments)
1.1.8. Species Database
1.2. Users should be required to log in to access any of the following pages:
1.2.1. Profile
1.2.2. Query List
1.2.3. Public Profile
1.2.4. Admin Profile
1.2.5. Save Queries on the Search Data page
1.2.6. Create New Posts and Comments on Posts.
2. Implement the table detail on the Alert Detail page.
2.1. On our Data Comparison detail page we allow users to see both the graphical treatment of the trading data and we provide a basic tabular data which supports the chart and map generation. We should implement this tabular data display on the alerts detail as well.
2.2. We don’t need to implement filtering on the detail page. You can simply display the table of results along with the already implemented graphics.
2.3. The rows in the table that have the alerts should be color coded/highlighted by alert type.
2.4. For table column headers we can go with the same columns as we have in the Search Data results:
2.4.1. Year
2.4.2. Commodity Name
2.4.3. Importer
2.4.4. Importer netWeightKg
2.4.5. Importer tradeValueUSD
2.4.6. Exporter
2.4.7. Exporter netWeightKg
2.4.8. Exporter tradeValueUSD
2.4.9. Diff in netWeightKg
2.4.10. Diff in tradeValueUSD
3. Our user profile page is functional but there are a couple of features which aren’t very clear.
3.1. We need to add a column header “Display in Public Profile” to the Contact Information section of the profile page. Users should be able to see which Contact Info they are revealing even in the read-only/detail view of the page.
3.2. Under the column header “Display in Public Profile” we should show the flags which indicate which fields are being displayed in the profile. These flags are shown on the Edit Profile page already.
3.3. On the Edit Profile page we need to add a column header above the checkboxes. The checkboxes work already but it just isn’t obvious right now what the checkboxes are doing. Let’s use the same label,. “Display in Public Profile” as we’re using on the User Detail page described above for consistency.
4. We have a couple of issues to remedy with our login popup which occur when the current user session expires:
4.1. Please implement tabbing on the login popup (and on the initial login screen). The most important tab order to set is between the Username and Password screen.
4.2. The submit button on the popup doesn’t work if we’re seeing the login popup from a timeout. When a user clicks the login link, the user is able to log in without issue. But if the login popup occurs from a timeout, then clicking the submit button simply clears out the form but doesn’t actually log the user in.
4.3. There are some display issues with the token expiration login overlay as well. It shifts to the right of the display rather than being centered over the screen. This issue is described here: https://github.com/topcoderinc/HP-LP-WWF-Detect-IT/issues/12
4.4. There are also a number of native system popup’s that occur when the application times out. This was okay for initial debugging but now that we have registration and authentication basically working I think we should suppress those javascript popups.
5. Please implement the download feature for the following pages:
5.1. Data Comparison Detail: this can just be a csv file of the tabular results on the page. The file can just be labeled “results.csv”
5.2. Alert Detail: also can simply be a csv file of the tabular results displayed on the screen. Let’s name the downloads “alerts.csv”.
5.3. Dashboard
5.3.1. Leading Exporters -- let’s implement two different data downloading features depending on what is currently displaying on the component
5.3.1.1. Exporters - Download the aggregate data shown in the bar chart in a file called exporters_by_weight.csv
5.3.1.2. Partners - Download the data for the selected partner for all years rather than just one year in a file labeled - exporter_by_weight_<countryname>.csv (e.g. exporter_by_china.csv)
5.3.2. Leading Importers -- let’s implement two different data downloading features depending on what is currently displaying on the component
5.3.2.1. Importers - Download the aggregate data shown in the bar chart in a file called importers_by_weight.csv
5.3.2.2. Partners - Download the data for the selected partner for all years rather than just one year in a file labeled - importer_by_weight_<countryname>.csv (e.g. importer_by_weight_china.csv)
5.3.3. Leading Importers By Value - let’s implement two different data downloading features depending on what is currently displaying on the component
5.3.3.1. Importers - Download the aggregate data shown in the bar chart in a file called importers_by_value.csv
5.3.3.2. Commodities - Download the data for the selected country for all years rather than just one year in a file labeled - importer_by_value_<countryname>.csv (e.g. importer_by_value_china.csv)
5.3.4. Top Ten Wildcaught Commodities By Import Value per KG
5.3.4.1. Overall - Download the aggregate data shown in the bar chart in a file called top_ten_commodities_by_import_trading_value.csv
5.3.4.2. Yearly - Download the aggregated data for each of the top commodities for all the years. The filename: top_ten_commodities_by_import_trading_value_by_year.csv
5.3.5. Top 20 Wildcaught Commodities By Export Trading Value
5.3.5.1. Download the aggregate data shown in the bar chart in a file called top_twenty_wildcaught_commodities_by_import_trading_value.csv
5.3.6. All the download file names should be configurable at the system level as they are likely to change.
6. Dashboard Page Updates
6.1. Please replace the Collaboration Messages component with the “Hot Topics” component found on the Forum page.
6.2. The “Forum and Case Studies” component in the right column panel should be updated to simply say “Case Studies”. This component should link to the Case Studies listed on Case Studies page: /casestudies. And should make queries to the CMS to retrieve the 3 or 4 most recently updated Case Studies from Contentful.
6.3. Please align the components so that they stack vertically without large gaps between them. They don’t need to align horizontally with the chart/map dashboard components.
You can see the current prototype in action here: http://54.218.19.28:8080/
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.jsFinal 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.