Attendee - Web App UI Prototype

Welcome to the Attendee - 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 normal users (event attendees) 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 the provided storyboard are in scope of this challenge. Do not assume that only the screens mentioned below are in scope. Each screen may have different states based on the user status (eg logged in, registered on event etc).

00-attendee - event detaill not login rev

This page shows the event details page when the user is not logged in.

• The carousel needs to be functional.

• The time countdown needs to be functional.

• Register will take the user to the registration page as he’s not logged in yet.

• Hide the “My Agenda” from the header as the user is not logged in.

• Clicking “See all” in speakers should show more results (more rows).

01-attendee - login

• The carousel on the left should be functional.

• You should show input validation for both required fields and wrong credentials error.

• Please create a set of valid credentials for testing.

• For invalid credentials, no need to show the error message twice. Just show it once.

• Social login buttons are dead-links.

03-attendee - register

• The carousel on the left should be functional.

• You should show input validation for required fields.

• Social sign up buttons are dead-links.

• After sign up take the user to the profile setup page

04-attendee - profile setup

• The user should be able to select an image. Selecting an image should preview it.

• Full name & email are required fields and should show an error message if not filled (unless the user clicks the SKIP button).

• In preferences, all fields are optional.

• In preferences, the social buttons are toggles.

• In preferences, the dropdown selects should allow selecting multiple options.

11-attendee - main screen after login

This is the main screen after login/signup.

• The carousel needs to be functional.

• Clicking on any card will take the user to the event details page.

16-attendee - event pre register

This page shows the event details. This screen has many states shown in different images. Please check the storyboard for more details.

• An event may be “Free” or may has some fee. If the even has a fee, the registration form should include payment details.

• The carousel needs to be functional.

• Social share buttons are dead-links.

• Attachment links are dead-links.

• The countdown should be functional.

• In the registration form, the map should be implemented using Google Maps.

• Clicking on a marker insider the map should select the hotel from the Recommended hotel dropdown.

• All fields are required. Please show an error message if a field is not filled.

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.