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).
This challenge is responsible for creating the Forum UI prototype. This module is completely new and does't require Foundershare background from submitters.
1.1 Challenge task overview
Source PSD files are attached.
Existing codebase is provided at the forum for reference. From UI perspective, you don’t need to research the source codebase. It is provided for reference and you can, but not must, reuse some styles from screen.css. You are also encouraged to use bootstrap.
There must be a forum integrated into the desktop app.
In the code structure please create the pages as separate module in frontend/app/forum folder.
1. A "Forum" menu item to left from FAQ must be added.
2. There will be 2 levels of content: 1) sections (created by Platform Admin), 2) threads within sections (created by any registered member).
3. Users will act at the forum with their F$ accounts.
3.1. Once a user posts to the forum for the first time the system asks to come up with a unique nickname. It will be tied to the F$ account. The motivation for it is technical: we need a unique ID to be displayed at the forum and don't want it to be an e-mail address.
3.2. The system will prompt a user with a default user name made of firstName and lastName concatenated.
3.3. The system will check if the nickname is unique asynchronously (before user submits it) and mark it with a green tick (if yes) OR red cross + "This username already exists" label (if not).
4. All roles will be able to create posts and update their own posts.
5. Only Platform Admin will be able to update/delete anyone's post.
6. Anonymous user will have access to forum in read-only mode.
7. Against each member the following info must be displayed:
- surname (if public)
- picture (logo if business owner)
- number of posts
8. Each Champion must be able to send a gift to any other Champion (provided that a sender has any gift cards). When a "Send Gift" button against a nickname is clicked user is redirected to his "My foundershares" page but with a name of the receipt. When he clicks the "Gift" button against a gift card he is navigated to the gifting page with the recipient's nickname pre-populated. The gift will be sent tho this account via e-mail.
9. Against business owner's name the total amount of gift cards sold is displayed.
For WYSIWYG editor you can resuse the CKEditor already included in the current codebase, or SummerNote or come up with your own suggestions.
Corrections to the screens
19-admin-username-hover - when admin nickname is clicked nothing shall happen.
20-champion-username-hover - amount sold and redeemed shall not be shown, remove those section.
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 codebase
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)
- Safari (MacOS)
- Chrome (Windows and MacOS)
- Internet Explorer (Windows)
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.
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.