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. You have to fix the following issues in part 1:

#1 MyProfile.html: 
New error
The element input must not appear as a descendant of the a element.
 <input type="file" class="upload" id="file-upload" data-file-input="file">

Self-closing syntax (/>) used on a non-void HTML element. Ignoring the slash and treating as a start tag.
" type="text" data-ng-model="Myinfo.description" data-ng-if="Edit"/></textarea>

#2 at winder screen(1920*1080)
#2.2 page header and footer should fluid and middle content could be fixed
Now 1920*1080 is fluid
but 1024-1920 is not fluid,
fluid layout means from 1024-1920, header/footer width need extend, not just width point at 1920

#5 IE
http://grab.by/Ednq

#14.5 
#14.7 Browse button should vertical align with left input
http://grab.by/EdnM
Still not align well

#14.10 change between edit/read mode, left label and right input/plain value will move up/down
Now still move up/down some px
#14.12 slide switches 
- when I switch some slide switches in My Info tab and I go to the other tab (eg. My Founder$hares tab) and I go back to the My Info tab. Now I see slides with wrong titles Yes/No
http://grab.by/E6aA

#15 there are errors with load data on some pages like My Info, My Founder$hares (it becomes after refresh page)

#18 My Founder$hares
#18.3 - Resale and Cancel buttons shouldn't be like in storyboard, please look at Examples_ChampionsMyF$_screen.xlsx file attached

# - F$ PostingDetails popup - comment text box must not be scrolled up when the list of comments is scrolled.

  1. Being provided with 2 parts of UI prototypes (you can find it attached) the contestants have to merge them in one responsive UI prototype so that all the navigation will work.
  2. User's bevahiour and navigation is described by the wireframes (attached). Storyboards are provided for reference.
  3. Please note that the web app target both desktop/tablet layout and mobile layout and functionality will differ a bit between them. This challenge addresses desktop/tablet layout only.
  4. There are static pages (Terms Of Use, FAQ, Blog, Forums, How it works, About Us, Copyright, Privacy Policy) which will be addressed by WordPress pages and now can be blank with random text (as in the wireframes). They must be embedded into the resulting app with their routings configured (so that later they could be replaced with actual WP pages). 
  1. You have to make the updates in the resulting prototype as per the desktopUI_issuesFromClient_Mom and Pop.xlsx spreadsheet attached (reported by the client). 
  2. In case of any visible discrepancies with the storyboards in any browser, they must be fixed (e.g. overlapping buttons due to wrong padding/margining).
  3. Every mentionings of "Founder" must be replaced with "Business Owner" throughout all UI pages.
Time constraint
This project has tight time line and the scope isn't that large so
1) the review phase is only 24 hours (might be extended to 48 though if there are 4+ submissions passing screening)
2) screening and aggreagation phases will be reduced down to 6 hours 
3) we would like to avoid any timeline extension, so please ask questions early

 

Key Requirements

  • Convert the existing prototype to be HTML5 using AngularJS
  • 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.

- Using Bootstrap is encouraged

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: 30048609