Challenge Overview

Project Overview

Catalyst is a serious, reliable, high-quality application to provide design patterns and links of example apps for both developers and designers. Users of Catalyst cannot upload their files directly. Files will be reviewed by an entity outside of Catalyst first, and then get approved to be published officially to Catalyst. Patterns and apps provided in Catalyst are therefore of high quality and relevant. 

Competition Task Overview

This challenge should convert the provided UI into prototype working on mobile browsers.

You are required to use HTML5/CSS3/JavaScript to develop the prototype.

Please use Angular + Bootstrap for JavaScript code.

Technologies Requirements

HTML Suggestions:

  • Write readable code - please use logical nesting of text when writing your HTML to ensure that it is easy to read
  • Use 2 spaces for each individual indent, no more, no less.
  • Use commentary when necessary. Let comments be informative but concise.
  • It is okay to use comments as “headings” for future developers to read within the HTML, for example: <!-- FOO SECTION 1→
  • PLEASE USE GOOD NAMING CONVENTIONS FOR IDs and Classes. This is so important. Make sure the names you use for IDs and Classes have some sort of meaning and are also obvious to future developers.
  • When naming IDs and Classes, make sure to use an elegant naming convention like: lowerCamelCase or under_score_naming or UpperCamelCase. lowerCamelCase is preferred but use what you need.

CSS Suggestions:

  • Use 2 spaces for each individual indent, no more, no less.
  • Use commentary when necessary. Let comments be informative but concise.

AngularJS Suggestions:

  • Use commentary as much as is necessary and ensure that comments are meaningful
  • Use good naming conventions for variables and functions. Use good naming conventions like lowerCamelCase, UpperCamelCase, and under_score_naming. While lowerCamelCase and UpperCamelCase is preferred, use what you need for whatever situation.
  • Do your best to write efficient code, without sacrificing readability and elegance.
  • Format your code to be as readable and as nice looking as possible. Use proper Javascript/AngularJS conventions.

Detailed Requirements

00. Splash screen
No wireframes reference.
- By default, this screen will appear first when the application being launched.

01. Login page
wireframe references page 3 - middle
- user will needs to login first to use the application.
- Standard login features (email/password/sign in button/cancel button/forgot password link).
- Login page for users who just finished registration (or are already registered)

02. Connect Screen (GitHub and Bitbucket)
wireframe references page 3 - right
- This screen showing repository connectivity for users who just finished registration (only showed 1 time)
- users who have already registered in the past don't see this page past the first time registering
- there are two repository options available, GitHub or BitBucket.

03. Homepage Screen
wireframe references page 4
- The top blue section is a carousel with images and captions that showcases design patterns that the current user might find interesting. 
- The user can swipe to the sides to go the the next slide
- This screen will show list of "Popular design patterns", "apps from catalyst".
- Tab navigation "home, search, categories, contribute, my catalyst".

04. Pattern/Apps Details Screen (info tab)
wireframe references page 6 - left and right
- These two wireframes represent the same page, just at different sections which the user can get to by scrolling. 
- First part are the screenshots of this pattern, by clicking these images, users can view larger images in another screen. 
- Screenshots and related patterns can be scrolled.

05. Pattern/Apps Details Screen (Demo tab)
wireframe references page 7 - left, middle and right
- left, The demo page showcases a working version of the pattern within the app/mobile device. It is only functional for certain languages.
- middle and right, These are the demo pages for patterns that do not have the acceptable languages for the app to display. Screenshots are used instead of a live demo.

06. Pattern/Apps Details Screen (code tab)
wireframe references page 8 - left, middle and right
- left, Part of the code section of the pattern. Showcasing the HTML code.
- middle, Part of the code section of the pattern. Showcasing a user swiping to get to Javascript code.
- right, Part of the code section of the pattern. Showcasing the Javascript code. 
- In both sections, the user can click the envelope to get a prompt for the user to obtain the code.
- the sample codes color must have different colors for syntax, attributes and content. just like a code editor.
 
07. Pattern/Apps Details Screen (Reviews tab)
wireframe references page 9 - left, middle and right
- left, Reviews page.
- middle, Same page with left wf. This shows how it works when scrolling. Users can filter reviews.
- right, Write a review. Comments are optional for users.

08. Search Screens
wireframe references page 11 - left, middle and right
- left, Just arrived at search page
- middle, Typing into search…auto suggestion
- right, Selected "capture video" and now have results

09. Categories and All function Screens
wireframe references page 12 - left and right
- left, Categories page. Users will be able to find patterns/apps by functions or by programming languages.
- right, All functions page. Media, notifications and mails are category names. Little red mobile phone means this is an app, not a pattern.
- provides us with icons creation for all items shown in the wireframes. 

10. Media/By functions Screen
wireframe references page 13 - left and right
- left, Media page. Users get to this page when clicking "media" under "all functions". Users should be able to view all, by latest, or popular.
- right, Pattern's page under categories. In this WF, video pattern has three versions written by Java, JavaScript, and PHP. 
- By clicking JavaScript, users can see the video pattern written by JavaScript.

11. Programming Language Screens
wireframe references page 14 - left, middle and right
- left, All programming languages page. There are limited programming languages for front-end development. Feel free to add more.
- middle, Categories by programming languages. This is an example of JavaScript. 
- middle, Users should be able to view by index, popular, or new. Little red mobile phone icon means this is an app, not a pattern.
- right, Same page with middle. This WF shows how it works when scrolling up.

12. Contribution Screen
wireframe references page 15 - left, middle and right
- left, First screen of contribute page. Ideally users can either import the patterns/apps from Github/Bitbucket, or type into a url of their patterns/apps.
- middle, Same screen with left, when scrolling up, users can type into their comments for the patterns/apps they just contributed. Users will be directed to home page after submission.
- right, Second screen of contribute page. Users will be able to contribute their ideas, suggestions, questions, comments for Catalyst, or for any patterns/apps in Catalyst.
- Users will be directed to home page after submission.

13. Favourites Screens (My Catalyst)
wireframe references page 16 - left and middle
- left, Displaying "My favorites" within My Catalyst. Show's design patterns or apps that I have favorited and any status updates for the patterns/apps.
- middle, Displaying "My contributions" within My Catalyst. Show's patterns/apps that I've tried contributing to Catalyst showing status of approval/pending/rejection.

14. Menu Screen
wireframe references page 17 - left
- Hamburger menu. Please design the Catalyst Logo, together with those icons.
- about, catalyst guidebook, FAQ, Contact Us, Settings, Logout.

15. Settings Screen
wireframe references page 18 - right
- Settings page. Feel free to add other ideal settings.

Specific HTML/CSS/JavaScript Requirements

  • You MUST use HTML5 and CSS3
  • Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
  • 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.
  • No inline CSS styles - all styles must be placed in an external stylesheet.
  • Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
  • 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).
  • Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
  • Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

JavaScript Libraries/Plugins

All JavaScript must not have a copyright by a third party. 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.

  • Angular and Bootstrap are allowed.

Browser Requirements

  • iPhone 5 Portrait orientation (640 x 1136 resolution 326 ppi)


Final Submission Guidelines

Submission Deliverables:

Final Submission:

ELIGIBLE EVENTS:

2015 topcoder Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30044778