TCO18 UI Prototype Championship

Welcome to TCO18 UI Prototype Championship!

This challenge is for TCO18 UI Prototype Onsite Finalists competing in Dallas, Texas, USA ONLY. Please do not register or submit if you are not one of the finalists.

The UI Prototype Finals will be run as a single 4-hour round of coding. This time, we are asking to use your UI Prototype skills to create a HTML5, CSS & Javascript Prototype for a map landing page using Desktop screen size.

Please read the challenge details and review the associated storyboard design and assets on Zeplin.

Let us know any questions you have through the Challenge Forum. Good luck and have fun!

Challenge Objectives

• Create HTML5, CSS, Javascript UI Prototype on a Desktop screen size.
• Your submission need build a best practice of map implementation on UI Prototype
• Sidebar and map interactions need working/connecting
• Optional: Add simple animations to any elements at first load

Challenge Assets:

• Zeplin: https://zpl.io/2Golj0d
• Pull icons assets as SVG, image assets as PNG on Zeplin.
  • Let us know if you need some assets adjusted when building your submission
• Fonts: https://fonts.google.com/specimen/Roboto.
  • Embed fonts on your submission
  • Make sure you select correct font-weight based on the storyboard
• Google Map API Key
  • AIzaSyCkA6FtiFlzkKGS5TpTcLSuaToH1xOa3uQ

Submission Requirements
General

• Current desktop storyboard source file using 1920px
• Your prototype should be fluid from 1366px to 1920px
• You can limit the min width of your browser to 1366px
• This landing page contains left sidebar and map area
• Left sidebar can use fixed width
• Map need placed centered on the right side
• Create some animation effect on page load for every element

Topcoder Stats

• Topcoder logo placed on top and centered
• Feel free to suggest a library to build the bar chart
• Display 3 colors of each bar:
  • Light blue: the previous day
  • White: current day
  • Dark: empty data
• Display stats data for MEMBERS, NEW REGISTRATIONS, CHALLENGES & IN PRIZES // LAST 7 DAYS
• You may need to use count transition of those numbers

Tracks

• This area need to hide/show the marker on the map based on selected tracks
• We use existing Topcoder Tracks from Design, Development, Code Science & Algorithm
• By default display all marker
• Need match the color with the tracks
• Click each option needs to be able to turn off markers othe n map
• Use grey color radio when track become inactive

Map Filter

• Create toggle buttons
• Match active/inactive state
• No need for interactions between this toggles and map
   

Map

• You must use Google Map to build the map
• Map theme as possible need follow storyboard look with dark and light blue accents
• A sample of Google Map using the dark theme:
  • https://snazzymaps.com/style/1443/cleaner-midnight
  • https://mapstyle.withgoogle.com
• Let us know any questions about the map.

Map Interactions

• On page load, display the whole world
• Display animation pop up to all dot colored markers
• There are some different color marker based on Tracks toggle button on the left side
• Click on any marker will show the flyout, based on marker color
• Notice clicked marker using colored shadow around it.
• Flyout uses transparency, match storyboard
• Flyout arrow can use the same placement on the bottom of the bubble.
• Display flyout content like the storyboard, there is a user thumbnail and date.
• Flyout need auto expand when filled with more data.
• Only need 1 flyout opened at the same time
• Click marker or click map will need to hide the flyout

Scoring Priorities (The items that are considered highest prototype priorities)

• Creating quality and efficient UI Prototype - smoothness, the sharpness of graphics and the key items that can be captured and demo-ed
• Responsive Solution on Desktop screen size
• Map build to follow storyboard
• Animation effects
• Matching the storyboards (as close as possible) across the required browsers.

CODE REQUIREMENTS:
HTML/HTML5

• Provide comments on the page elements to give a clear explanation of the code usage. 
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• All HTML code naming should not have any conflicts or errors.
• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• No inline CSS styles- all styles must be placed in an external stylesheet.
• Validate your code- reviewers may accept minor validation errors, but please comment on your reason for any validation errors. Use the validators listed in the scorecard.

CSS3

• You can use plain CSS for this challenge submission
• Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all CSS so developers can follow the code.
• All CSS naming should not have any conflicts.
• As possible use CSS3 style when create all styling.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.

Javascript

• All JavaScript must not have a copyright by a third party. It is fine to use GPL/MIT/Open Source code.
• You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

Images

• For all the images/photos, please pull them as PNG format from provided Assets

Icons

• For all the icons, please pull them as SVG format from provided Assets

Browsers Requirements

• Chrome latest

Final Submission Guidelines

Placement and Winner Selection

• All submissions from the UI Prototype finalists will automatically pass screening.
• We will using HTML5 Scorecard for TCO18 Championship
• After Submission Deadline, the Judging Panel is presented with all of the submissions and will have sole discretion in determining the placements.

Overall Champion Winner Selection
The winner of the UI Prototype Competition will be the Onsite UI Prototype Competitor with the highest placement given by the Judging Panel Round. The champion will be announced during the awards ceremony.