Challenge Overview
Project Overview:
Welcome to the eBay New Hire Experience Application (Drupal) Challenge! The goal of this challenge is to create a Responsive application using Drupal theme (which is similar to WordPress theme prototype challenges) and Bootstrap.
NOTE: This application will use Drupal theme (https://drupal.org/start) and Bootstrap 3 (https://drupal.org/project/bootstrap). Please refer the helpful documentations on Drupal implementations below:
- Installation Guide - https://drupal.org/documentation/install
- Drupal Documentation - https://drupal.org/documentation
- Structure Guide - https://drupal.org/documentation/structure
- HTML and CSS techniques and tools - https://drupal.org/node/37156
- Web-based mobile apps - https://drupal.org/node/1388474
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Overview:
The main objective of this challenge is to develop a functional module (New Hire Onboarding Experience) based on the Bootstrap theme from Drupal, and based on the provided storyboard designs using Drupal template and content management features. You need to provide a deployment document as part of the submission.
Requirements:
Data Model
- Design and Develop the backend MySQL Data model to support the desired functionality that is illustrated through the Storyboards (attached in the forums).
- We will need to populate some sample data based on the Sotryboard visuals shared.
Key Application Features
*** NOTE:: The Storyboards are made available for guidance, however the kep Objective is to develop this functionality, it would be great if it is to the exact experience as the Storyboards, however the scope of this contest is the end to end functionality. ***
Below are the required interfaces in desktop and mobile for both Portrait and Landscape orientations.
1. Home Page:
- User opens the application and will see the welcome page (01-welcome, 07-mob-1-welcome).
- Make sure the header and footer are fixed for all pages - (this is specific to mobile view).
- Click on "Get Started!" button, navigate user to store page (02-store-1, 07-mob-2-store-1).
2. Store Page:
- User should be able to choose new employee store items and checkout (02-store-1, 07-mob-2-store-1).
- Allow user to select different categories like "Computers", "Accessories", "Mobile", "Ergonomics".
- The items under each category show in a carousel with indicators at buttom and also prev/next navigations for desktop view (02-store-3).
- Click on "Checkout" button, navigate user to cart page (03-cart, 07-mob-3-mobile-cart).
- Desktop View:
- Once user selects the item as shown on screen (02-store-2), allow user to deselect the item.
- Refer storyboard designs for all other categories.
- Mobile View:
- Click on "Select" button, show user the modal popup to allow customization on selected item (07-mob-2-store-2-customize).
- Once user selects the item as shown on screen (07-mob-2-store-3-selected), allow user to delect the item.
- Click on menu icon at header, show user the menu items as shown on screen (07-mob-2-store-4-menu).
- Refer all mobile view screen (07-mob-6-all).���
3. Cart Page:
- Once user checkout the store items, show the cart details page (03-cart, 07-mob-3-mobile-cart).
- Click on "Back in Store" link, navigate user to store page.
- Click on "Submit Order" button, show user the thanks page (04-thanks, 07-mob-4-thanks).
4. Help Page:
- Once user selects help menu item, show user the help page (05-help, 07-mob-5-help).
- Allow user to expand or collapse the full help texts using "Open" or "Close" links - (this is similar to 'show more' or 'show less' features).
*** BONUS Implementation Reward - $500 for completing the Admin Interface ***
5. Admin Page (desktop view only):
- Admin user opens the application should see the equipment page (06-admin-0).
- Allow user to select different categories like "Computers", "Accessories", "Mobile", "Ergonomics".
- Show 'Add' link next to selected category button.
- Equipment:
- Click on "Edit" button for each item under selected category, show user the "Edit Item" modal popup (06-admin-1-edit-add-item).
- Allow use to delete or save item from the popup.
- Click on delete icon for each item, delete the selected item from the list.
-
Add New Employee:
- Click on "Add New Employee" from the menu item, show user the new employee screen (06-admin-2-new-employee).
- Click on "Get URL", show user the generated url screen (06-admin-3-url).
- Click on back button, navigate user to new employee screen.
-
Send button has no actions for now.
-
Reports:
- Click on "Reports" from the menu item, show user the reports screen (06-admin-4-report).
- Allow user to select different categories like "All", "Not Used", "Used URL", "Used and not selected".
- Show one item each under other 3 categories as similar to "All" category items.
- Click on "Details" button, show user the item details screen (06-admin-5-report-details).
- Click on "Hide", allow user to hide the details.
- Approve/Reject buttons have no actions for now.���
Final Submission Guidelines
Specific Code Requirements:
As part of this challenge you will need to comment your code in all appropriate areas.
-
HTML/CSS Requirements:
- You are required to the core Drupal coding standards 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")
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:
Browsers Requirements:
-
IE 10+ Browsers on PC
-
Latest Safari Browser on iPad, MAC and PC
-
Latest Chrome Browser on MAC and PC
-
Latest Firefox Browser on MAC and PC
-
Latest Android, iPhone, iPad Browsers