Challenge Overview
1.1 System Description
The client for this project built a platform that supports the sale, exchange, and redemption of gift cards between businesses and individuals. The goal of this platform is to help small businesses expand, using both web and mobile layouts, by giving them a simple way to raise capital and acquire new customers using gift cards. The main function of the platform will be to allow business to post virtual gift cards for sale on the platform. Individual users will be able to browse and buy these gift cards, as well as resell or trade gift cards they own. Using the mobile layout, users will be able to redeem their gift cards at the business, and the business will be able to process gift card redemption at their point of sale.
A brief desription of the workflow is attached. The platform is already live https://foundershare.com but requires various enhancement to satisfy all user needs. You can also check out the Sandbox at https://qa.foundershare.com/#/ to pass the end-to-end flow without paying with a real credit card (just a fake one number 4111 1111 1111 1111 is enough). You can the mobile version at the desktop as well: https://qa.foundershare.com/mobile/
This challenge is responsible for updating home page and gift card offer look&feel for both mobile, as well as adding "How It Works" section to mobile version.
Challenge Task Overview
Source PSD files are at https://www.dropbox.com/sh/cqfmliqxlba1b0v/AABu8_hp3Cw5xoQJRx0sVbRsa?dl=0
Existing codebase is provided at the forum. Please reuse the existing CSS as much as possible until there is need to update/improve them.
Please see the PDF attached for reference.
The scope will be:
1. Mobile - Gift card offers view and Home page.
- Update search panel.
- The heart icon must be a toggle (Pages 1, 3-5).
- Once a tile is tapped, it flips, grows a bit larger and displays more details (page 2).
- Once any other tile is tapped, the tile tapped previously must flip back into its default state.
2. Mobile - Gift card offer details screen.
Once the flipper tile is tapped once again, it navigates to the Gift Card Offer details screen (as it works now).
But Offer details screen is to be reprototyped: pages 6-7.
3. Mobile "How It Works" - see FS-Mobile-Site-R4.PDF, page 8-21.
Page 8 - Navigated relevant menu item in the right-hand sliding menu).
Page 9 - when any of 2 circles is tapped a green "gear-like" frame appears before user navigates next.
All "Sign Me Up" and "... Sign Me Up" button navigate to Sign up screen, when tapped. No need to reprototype this screen.
Back and Next buttons navigate to previous and next page correspondently.
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)
- Mobile Safari (iOS)
- Chrome for iOS and Android mobile devices
- Android Browser
Final Submission Guidelines
Submission Deliverables
Working Angular.js prototype with the listed requirements covered.
Instructions for assemblers how to integrate the HTML/CSS deliverables into the codebase.
The winner will integrate mobile "How It Works" into the existing codebase.
Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.
The submission must not have any back-end part so that it can be easily deployed at a very basic web server (e.g. Github pages) without any additional software (e.g. node.js) to install.