Attendee Admin - Web App UI Prototype

Welcome to the Attendee Admin - Web App UI Prototype challenge!

 

In this challenge, we need you to create an HTML5/JS/CSS prototype for our event management application that will be used from the admins based on the provided storyboard.

UPDATE!
You can use either plain HTML5/JS or Angular or ReactJS.
It's up to you.
Just make sure to follow the best practices for the technology you'll use.���

Feel free to ask on the challenge forum in case of any doubt/question.

Assets provided on forum (available on registration)

• Storyboard (source & images)

• MarvelApp link

Target Devices

• Desktop

• Tablet. We don’t have a specific design for tablet. Follow the best practices to make the app responsive. You are free to use Bootstrap.

Screen Requirements

All screens from 1 to 13 from the MarvelApp are in scope of this challenge.

You can download those screens from the link provided on the challenge forum.

20-top nav - dashboard

• The content in the blue box is a carousel and needs to be functional.

• The ACTIVE/PAST/UPCOMING events tabs need to show different events in the same format.

• Clicking Reject/Approve on the task section will remove the task from the list.

21-top nav - event

• Sorting/pagination needs to be functional

• Show # entries should have the following options: 5, 10, 20 and need to show more/less entries.

• The select action dropdown should have some dummy options.

• Clicking the 3-dots should show the same options from the select action dropdown.

22-top nav - users

• Sorting/pagination needs to be functional

• Show # entries should have the following options: 5, 10, 20 and need to show more/less entries.

• The select action dropdown should have some dummy options.

• Clicking remove should remove the entry from the list.

23-top nav - reports

• Email, download and refresh icons are dead-links.

24-top nav - engagements & 25-top nav - engagements - utils

• Clicking the 3-dots should open the option menu.

• Clicking delete should remove the item from the list.

• The whole row should be clickable. It can be dead-link for now.

26-events-dashboard

• The PAST SESSION section is a carousel and needs to be functional.

• Pagination/sorting should be functional.

• Clicking the 3-dots should open the options menu.

• Clicking delete should remove the row.

• Show # entries should have the following options: 5, 10, 20 and need to show more/less entries.

• The Select action dropdown should have a ‘Delete’ option.

• Clicking edit time should open the edit session time modal (32-events- session quick edit time).

27-events- edit event - information

• All fields are required.

• Date fields should show a datepicker. We don’t have a design, just make sure it looks good.

• The map needs to be implemented using Google Maps.

• Predefined location should allow selecting a CSV file.

• Clicking Add more in place nearby should add another row of the same fields.

28-events- edit event - invitee list bulk mail

• Pagination/sorting needs to be functional.

• Show # entries should have the following options: 5, 10, 20 and need to show more/less entries.

• The select action dropdown should have some dummy options.

29-events- edit event - personalize & 30-events- edit event - personalize accordion

• The user should be able to drag & drop one or more images in the event gallery.

• The user should be able to select a splash screen image (only if the checkbox is checked).

• The customer web and customer mobile sections needs to be collapsible.

• Customer mobile section is the same as the customer web.

• The user should be able to select and preview and image/icon.

31-events- session

• Pagination/sorting should be functional.

• Clicking the 3-dots should open the options menu.

• Clicking delete should remove the row.

• Show # entries should have the following options: 5, 10, 20 and need to show more/less entries.

• The Select action dropdown should have a ‘Delete’ option.

• Clicking edit time should open the edit session time modal (32-events- session quick edit time).

Browsers Requirements

• IE11+

• Latest Google Chrome (Windows, Mac OS & Tablet devices).

• Latest Safari (Windows, Mac OS & Tablet devices).

• Latest Firefox (Windows & Mac OS).

HTML/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

• 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

• All JavaScript must not have a copyright by a third party.

• It is fine to use GPL/MIT/Open Source code.

• 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.

Images

• Images should be properly compressed while still having good visual quality.

• Please use best practice repetition usage of background based image.

• Please use sprites when using icons for your submission.

• Make sure your submission look sharp for Retina and Standard devices

• Wherever it makes sense, you can use icon fonts instead of images.

Final Submission Guidelines

• Source code in a zip file.

• Instructions on how to test your submission.

• Instructions on how to deploy your submission on Azure.