Register
Submit a solution
The challenge is finished.

Challenge Overview

Challenge Objectives

  • HTML Web app, targeting Dojo, JQuery, and all the latest browser versions (Firefox, Safari, IE, Chrome)

  • ArcGIS will also be used (https://developers.arcgis.com/javascript/)

  • This challenge will build the skeleton on top of an existing proof of concept.  This will be part of the conversion of a large set of storyboards to a full HTML prototype

 

Project Background

 

  • The customer has an existing web application that is relatively unskinned.  We have worked to build them storyboards that implement a better UI

  • This challenge will continue the conversion process.  We already have a proof of concept, with a basic header and side menu, and one side menu option, around an ArcGIS view.  

  • Future challenges in this stream will convert more screens.

 

Technology Stack

 

  • For this challenge, we are targeting static HTML that will work in all modern browsers, including Firefox, Safari, IE, and Chrome.

  • In production, the code will run as JSP files on Apache Tomcat, but for this challenge, we are just building out the HTML

  • We want to keep the deployment environment server as lightweight as possible.  The simpler the better. The existing proof of concept can just be opened in a browser from the file system, which is fine.

  • ArcGIS integration will be required.  The proof of concept already implements this a bit, but the app will be built around an ArcGIS window.  

  • ArcGIS requires Dojo (https://dojotoolkit.org/).  We can also use jQuery and related plugins, like jQuery UI and jQuery Date Picker.  The client has specifically asked that we do NOT use Bootstrap for this challenge, so Bootstrap usage is explicitly prohibited.

  • For these prototype conversion challenges, you should use standard ArcGIS controls, where appropriate, skinning them through CSS.  This applies to things like the legend, layers, and filters. Do NOT re-create an ArcGIS control in HTML, as that will just make merging the design into the existing application harder.

Specific versions include:

   

Storyboards

The forum will contain a link to grant yourself access to the storyboard files, and a Marvel app link will also be available showing the web UI storyboards.

 

Individual requirements

These MarvelApp links are in scope:

Data

The data for the search panel, the job list view, the job details panel, and the trace results screens should be read from a JSON file.  Do not hard-code this into the prototype, since in the final integration this will be coming from API calls. 
Trace Results

On these screens, the results shown under "Trace Result" should be scrollable, and the data should be read from a JSON file:

���https://marvelapp.com/4hi5cia/screen/47968981 
https://marvelapp.com/4hi5cia/screen/47968980

 

Existing screens

Do not do anything to break the existing screens.  They work as expected and we don't want to regress on anything.  Any breaks to the existing screens are in scope for this challenge, so please make sure you test your submission appropriately.

CSS and HTML

We won’t be doing the actual implementation of the functionality for the final app.  We are only doing the prototype conversion. Because of this, we need to ensure that the HTML is extremely well laid out, easily split into pieces for JSP conversion, and the CSS has to be portable, DRY (don’t repeat yourself), and easily editable / applied to new prototype elements as we convert further.

 

Images

Any images converted from the storyboard should support 2x resolution, in addition to 1x resolution.

 

Deployment guide and validation document

These files are required as part of your submission:

A README.md that covers:

  • Basic deployment - how to run the app and view the results in a browser.  Plan on the reviewers having Windows or Mac.

Validation video / screencast

  • Please show as many browsers working with the app as possible, ideally all 4 major ones:  Firefox, Safari, Chrome, and IE.

 

What To Submit

 

Please submit:

  • The converted HTML, JS, and CSS

  • A README.md

  • A link to the validation video



Final Submission Guidelines

Please see above

ELIGIBLE EVENTS:

Topcoder Open 2019

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30073130