FAST!! Mediafly NC Application Responsive HTML5 Prototype Challenge

Welcome to the FAST!! Mediafly NC Application Responsive HTML5 Prototype Challenge! The goal of this challenge is to create a fully responsive HTML5 Prototype application for desktop, iPad and iPhone based on provided storyboard design using AngularJS & Bootstrap frameworks.

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge. 

IMPORTART: As per the project schedules the review timelines are very close, please note the post submission timelines for further reference.

Competition Task Overview:

The main task of this competition is to develop a fully responsive HTML5 prototype using provided storyboard designs. You need to use Bootstrap to implement responsive page layouts to support both portrait and landscape views on iPad & iPhone devices and desktop browsers. Your prototype must work properly in all the required browsers noted below.

Note: Instead of using ngRoute of AngularJS, you could use ui-router framework for navigation (https://github.com/angular-ui/ui-router).

Required Pages:

Below are the required pages in both Portrait and Landscape orientations. Follow iPad versions for desktop browsers layout design.

0. Login Page:

• -User opens the application and will see the login page (00 Login Page).
• -Click on Login button, navigate user to home page.
• -Click on "30 Days Free Trial" button navigate user to trial page (01 Trial Page).
• -All pages should be responsive web support.
• -Use dead links for all remaining links and button click actions for now.

1. Trial Page:

• -Once user click on 30 days free trial button navigate user to trial page (01 Trial Page).
• -Click on try free trial button navigate user to home page.
• -Click on back button navigate user to login page.

2. Home Page:

• -Once user successfully logged in, show user the home page (02a Home Page Admin, 02b Home Page All Users).
• -On home page, show both Audit & Share buttons for now.
• -Click on username at header, show the user profile (02c Home Page All Users Profile).
• -'My Interests' section will show group of all selected interests (categories) from 'Select Your Interest' popup as blue/gray buttons.
• -User can click these items to toggle between blue/gray colors, where blue color indicates selected for filtering and gray color indicates deselected from filtering.
• -Below sections ('Authors', 'Products in my Interests', 'Recommend Segment' / 'Recently Played') will show or filter results on the basis of selected items (blue colored categories).
• -Show items of these sections in circular carousel like container.
• -Click on author items, navigate user to author page.
• -Click on product items, navigate user to product page.
• -Click on 'Recommend Segment' / 'Recently Played' buttons, show corresponding items for that section.

3. Select Interest:

• -Once user clicks 'Select Your Interest' button on home page, show user the select interest popup (03 Select Your Interest).
• -Once user clicks any interest item from the list, toggle the items selection.
• -Click on "Done" button close the popup.
• -Once user selects Interests (Categories) from popup, show those selected interests under 'My Interests' section on home page.

4. Author Page:

• -Once user selects any author items on home page, show user the author page (04 Author).
• -Show list of categories (blue/gray filter buttons) under "Author's Product" section.
• -If there are more items under categories, add link 'Show All' at the end of second row and click on 'Show All' link display all categories available for this Author.
• -Click on 'See More' link, display full author description text.
• -Display filter results (product list) below listed categories.
• -Click on "Load More" button, show all items.
• -Click on back button, navigate user to previous page.

5. Product Page:

• -Once user selects any product items on home page, show user the product page (05 Product).
• -Show list of categories (blue/gray filter buttons) below product name.
• -If there are more items under categories, add link 'Show All' at the end of second row and click on 'Show All' link display all categories available for this Product.
• -Click on 'See More' link, display full product description text.
• -Display filter results (segments, authors in this product, other downloads) for each section.
• -Click on "Load More" button, show all items.
• -Click on back button, navigate user to previous page.

6. Downloads Page:

• -Once user selects my downloads at header, show user the download page (06a Download Datetime).
• -Click on 'Sort by downloaded date' / 'Group by product' / 'Group by author' buttons, show corresponding data as per screens (06b Download Product, 06c Download Author).
• -Click on 'x' icon, remove that downloaded item from the list.
• -Click on back button, navigate user to previous page.

Specific HTML/CSS/JavaScript Requirements:

• -Your HTML code must be valid HTML5 and follow best practices
• -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 style-sheet.
• -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.

Font Requirements:

Use font - Arial.

JavaScript Requirements:

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. We would like to use following JavaScript libraries:

• jQuery
• AngularJS
• Bootstrap 3

Browsers Requirements:

• Latest Chrome, Safari Browsers
• iPhone and iPad Safari Browsers

Documentation Provided:

Storyboard screens and PSD files