September 12, 2017 A How To: UI Prototype Challenges at Topcoder
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:
Folders should be self-explanatory about their content.
Maintaining a clean folder structure makes your submission look professionally created.
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.
This is where you put any notes for the reviewers.
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.