September 12, 2017 A How To: UI Prototype Challenges at Topcoder

In UI Prototype challenges, members use their rapid prototyping skills and their knowledge of responsive frameworks to convert the design of a web or mobile application into a clickable web page using mainly HTML/CSS & JavaScript.
Matching the designs as close as possible is the main goal of a UI prototype competitor but keep in mind that your code will be later used by developers who will make it functional thus writing clean and well-documented code is equally important.
The process of working on a UI prototype challenge is quite simple.

• Register for the challenge.
• Read the spec carefully to make sure you have a strong understanding of what you have to create.
• If you have any doubts, ask in the challenge private forum as soon as possible to get clarifications by the challenge co-pilot.
• Start coding 🙂

How to organize your submission

Organizing your project folder structure should be very straightforward in UI Prototype challenge.
Here’s an example of a project folder structure on a UI Prototype submission:

Folder structure

Folders should be self-explanatory about their content.
Maintaining a clean folder structure makes your submission look professionally created.

README.md

If you haven’t seen the `.md` file extension before, that stands for Markdown which is a lightweight markup language with plain text formatting syntax.
Since most projects are hosted in git repositories (eg Github) it’s a very convenient way to write all the instructions on how to deploy your project and how to use various functionalities like “build a production version” or “login credentials” in a `README.md` file.

submission.txt

This is where you put any notes for the reviewers.
For example:
If you’ve implemented something in a different way than it was mentioned in the challenge spec but the co-pilot confirmed that your approach is acceptable, it’s good to leave a note with a link to the corresponding thread to make sure that reviewers won’t miss it and they won’t score you down.
Check out some of our past UI Prototype Challenges:

• CLOUD BANKING UI PROTOTYPE CHALLENGE
• AUTHENTICATION SOLUTION ANGULAR4 AND MATERIAL UI PROTOTYPE CHALLENGE
• BERMUDA – AUTOMOTIVE MANUFACTURING RESPONSIVE UI PROTOTYPE CHALLENGE

This article is part of the 5 Weeks to Learn Topcoder educational series. Want to learn more? Check out the entire series and all the helpful content here.