Challenge Overview

Project Overview

This project aims to create an entire platform with the goal of supporting and expanding small businesses everywhere, using both web and mobile applications. We are looking for experienced members to help us make our vision of an attractive, user-friendly platform a reality. This project presents a unique opportunity to make a real difference in the world.  As most people know, small business is the backbone of any economy. Unfortunately, small businesses have the most difficult time raising money, finding customers and being able to apply new products and approaches to help their businesses grow. Client has set out an ambitious goal to change this and we need someone to help us realize our goals.

 

Challenge Task Overview

  1. Being provided a storyboards and wireframes (you can find it in the attached file) the contestants have to implement a responsive UI prototype.
  2. User's bevahiour and navigation is described by the wireframes.
  3. Only those pages for which are the storyboards are provided are in scope. If you are navigating to the pages that are not in scope, the navigation must work and a blank page with its name only must be opened in the browser.
  4. Style guide is provided for reference however, please note it is obsolete.
  5. Please note that the web app target both desktop/tablet layout and mobile layout and functionality will differ a bit between them. This challenges addresses desktop/tablet layout only.
  6. As this is the Part 2 (and the last) of a UI prototype consisting of 2 parts run in parallel, at final fix the winner might be asked to integrate pages of Part 1 into a single prototype.
  7. Conceptualization is also attached but please note that wireframes takes precedences over it in case of discrepancy.

 

Time constraint
This project has tight time line so
1) the review phase is only 24 hours  (might be extended to 48 though if there are 3+ submissions passing screening)
2) we would like to avoid any timeline extension, so please ask questions early
 

Key Requirements

  • Convert the existing prototype to be HTML5 using AngularJS
  • AngularJS best practices should be followed, for example: consider using AngularJS routing feature.
  • Look & feel should remain the same for all elements on all pages
  • Maintain the same hover state for all buttons and links
  • Test in all the required browsers (see the list below)
  • Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly
  • Ensure you submission clear of HTML and CSS Validation error and warning
  • We'd like to have the code modularized so it's easier to maintain the code
  • Follow the structure / coding standards of the provided prototype

 

CODE REQUIREMENTS:
HTML5

- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.

- 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 your reason for any validation errors. Use the validators listed in the scorecard.

 

CSS3

- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.

- 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

- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.

- Please use clean INDENTATION for all codes so future developers can follow the code.

- 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.

���

JavaScript Libraries/Plugins

  • AnguarJS must be used as the main framework
  • jQuery & jQuery UI

 

Browser Requirements (latest versions)

  • Chrome
  • Firefox
  • Internet Explorer
  • Safari (MacOS and iOS)
  • Chrome for iOS and Android tablets
  • Android Browser


Final Submission Guidelines

A working prototype with the listed requirements covered.

Submit an archive file contains all HTML/CSS/JS/images and other required files into Online Review.

ELIGIBLE EVENTS:

2015 topcoder Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30048395