TCO18 UI Prototype challenge

The TCO18 UI Prototype Championship was held on 15th Nov 2018 at Southfork Ranch in Dallas, Texas, USA. There were 12 finalists from around the world. In this challenge finalists have to create the frontend of a website using HTML, CSS, JS & Google Maps. The finalists were provided with a design storyboard & requirement specifications. The challenge submission phase was four hours long, so the finalists had to be very fast in-order to complete everything in time. Finalist had to start from the scratch & doing research on internet was allowed.

The challenge had two major requirements. The first was to create a bar-chart where bar-color depends on different properties such as time, datapoint value etc.

The second was the biggest in which finalists have to integrate google maps on the web page. The google map was required to have a custom style. After map integration it was required to add several custom map-markers. These markers on the map represent different activities done by thousands of topcoder members around the world. All of their activities are tracked & plotted on the google map.

On clicking the map marker a pop-up showing member activity details should appear. The background color of the pop-up should differ based on the topcoder track attribute of the activity/marker.

Apart from these two major requirements there were several usual requirements to create different UI elements & sections based on storyboard.

How to start?
There are several approaches to create this application. In this article I’ll be explaining creating this application using on jQuery, NodeJS server and some plugins.

To start creating the application, add package.json & include all the dependencies those will be required to complete the challenge requirements.

Add other required assets and files such as images, icons, styles.js, main.css and so on.

The icons, images & some other details are required to be extracted from zeplin based storyboard.

HTML

Create index.html that serves as the landing page of the application. In index.html include all the css libraries, main.css for custom adding css code, JS libraries & scripts.js for adding JS functions. Once css & scripts are included start writing the html code required to implement charts, maps and several other UI elements and functionalities.

In the code above <aside class=”sidebar”> is for the sidebar section & <main> wraps all other sections. Make sure to use HTML5 specific tag wherever application in order to avoid score deductions by the community reviewers.

Javascript

Scripts.js is our main Javascript file. In this file add functions to initialize the map, add markers, add marker popup, filter the map markers and so on. For quickly creating the custom map theme, these urls can help:  https://snazzymaps.com/style/1443/cleaner-midnight

https://mapstyle.withgoogle.com

Refer to this link: https://github.com/googlemaps/v3-utility-library & to know about the google maps api in details: https://developers.google.com/maps/documentation/javascript/reference/

Try to match the map theme with map style in storyboard to get full  scores.

After map is initialized fetch the member activity data using AJAX from JSON data files.

Using the fetched data create markers and add listener to bind the ‘click’ event to display the marker modal:

For creating the the chart third party libraries like d3 or jQuery based libraries can be used.

Once everything is implemented double check the important functions to ensure that everything is working as expected.

CSS

The main.css is our main stylesheet file. Add all the css styles needed to match the application with the zeplin storyboard. There are border-radius, shadows & colors with transparencies so pay attention to those.

Do not directly add all the CSS properties of an element directly from zeplin, these are often required to be updated before we can use them in the main.css.

Use svg image format icons & for images use the png image format.

Validation & Readme

After finish implementing all the application requirements, validate the HTML code using https://validator.w3.org and validate CSS using http://jigsaw.w3.org. Fix all the validation errors.

Add a Readme file & specify steps required to deploy & run the application.

Submission

Once satisfied with your application, submit the application using the “Submit” button on the challenge posting page: https://www.topcoder.com/challenges/30074389/?type=develop .

After successful submission it’s ready to be reviewed by the community reviews & admins based on which the scores will be announced.