Challenge Overview
Challenge Objectives
-
NativeScript Angular SPA
-
<10 screens
-
Used by Client’s sales associates, to submit ideas
Project Background
-
The purpose of this application is to allow our Client’s sales associates, to submit ideas using text, photos, videos and audio; search through all ideas to up/down vote them.
-
This app will be used both iOS and Android. The designs we have are for iOS but we expect them to work seamlessly on Android. It should work as a SPA so there should be no page refreshes when moving across pages.
Users/Roles
-
Admin user
-
Standard user
See screen requirements for details
Form Factors
Please make sure your design supports these form factors:
-
In-scope
-
Mobile portrait
-
-
Out of scope
-
Desktop portrait and landscape
-
Tablet portrait and landscape
-
Mobile landscape
-
Development Assets
-
Marvelapp
-
User Interface Design
Technology Stack
-
NativeScript
-
Angular 6
Screen Requirements:
Login Screen
1-Login
- Forgot? is a dead link
- Email should be validated. User will enter only the text before @companymail.com
- Password should be masked
- Remember Me should be checked by default
2-Login
- Shows focus on Email
3-Login-error
- Shows error when either username or password or both are invalid
- Show the same error when either username or password has been left blank
4-Form-Filled
- Shows both username & password filled
- On successful login, user is redirected to 7-Home
Register Screen
5-Register
- All fields are mandatory
- Enforce password to be minimum 8 characters, else show an error
- Show an error if password and confirm password do not match
- Use the same style as in 3 Login-error to show the above errors
- Clicking ‘Have an account? Login’ should take user to 1-Login
6-Register Form Scrolled
- Shows the Register screen in scrolled state
Home Screen
7-Home
- Shows the app home screen
- See Marvelapp for the various clickable items on this screen
- Clicking ‘Submit an Idea’ takes user to 9-Submit Idea
8-Home-with-Filter
- Clicking Filter on Home screen opens this screen
- Any one sorting order can be chosen. Default to ‘Newest post first’
- See later screens for how categories and dates work
- Clicking Close should close the Filter overlay
Submit Idea Screen
9-Submit Idea
- Title & Category are mandatory
- Description is optional and should allow multi-line text
- ‘Submit Idea’ button should be disabled until mandatory fields have been populated
10a-Submit Idea Tags
- Please add mock category data from a JSON file based on this screen
10b-Submit Idea Tags-Admin Dropdown
- Please add mock category data from a JSON file based on this screen
- For admin user, they should be able to see an additional option ‘+Create Category’ as shown in storyboard
11-Create Category-Admin
- For admin user, they should be able to see add a category using this page
- Done button should be disabled until the user has entered the category name
- Clicking ‘Done’ should take user back to previous screen and newly added category should be visible in the dropdown
12-Submit Idea Text Active- Shows the description active
13-Submit Idea Text Typed
- Choosing a category should automatically pre-populate the description field with associated text. Please read this category-text mapping from JSON file
- The user should be able to override or append to this description
14-Audio- Clicking Audio on Submit Idea screen navigates user to this screen
- Cancel should navigate the user back to earlier screen
- You do NOT need to implement actual audio recording in this challenge. None of the elements on this screen are are expected to be clickable.
15-Audio-Recorded- Not in scope for this challenge
16-Upload- Clicking Upload on Submit Idea screen navigates user to this screen
- Allow user to choose either a photo or a video
17-Camera- Clicking Camera on Submit Idea screen navigates user to this screen
- Launch the device camera and allow user to click a photo or video
18-Camera Photo Taken- Allows user to retake the photo or use the clicked photo
- We’ve some flexibility here on design - it can be replaced with native photo confirmation screen
19-Video- Toggling from Photo to video navigates user to this screen
- This should invoke the native video functionality on Android and iOS device
20-Video Taken- Allows user to retake the video or use the clicked video
- We’ve some flexibility here on design - it can be replaced with native video confirmation screen
21-Submit Idea All Types- Shows an idea with audio, gallery, photo and video attachments
- Clicking X should remove the corresponding attachment and reposition others accordingly
22-Submitting Idea- Clicking ‘Submit Idea’ on previous screen shows this toast message
Search Functionality
23-Search Empty- Clicking search glass on home screen leads to this screen
- Populate the Recent search data from a JSON file
- Clicking ‘X’ should clear the search phrase
24-Search Active- Search should work in a type-ahead manner as shown
- Should show search items as well as search categories based on the matching criteria
- Clicking ‘X’ should clear the search phrase
25-Search Filter- Clicking ‘Filter’ when on search screen will open this screen
- Clicking ‘X’ should clear the search phrase
- Clicking ‘Close’ should close the filter overlay
26-Search Date Range- Clicking ‘Date Range’ will open this screen
27-Search Date Range Picker- Clicking on ‘Starts’ or ‘Ends’ should open the native date picker
- Clicking ‘Done’ should set the selected month value
28-Search Select Categories- Only one category can be selected
- Select the first category by default
- Read the category list from a JSON file
29-Search Results- Shows the idea search results based on a specific term
Idea Screen
30-Idea Detail
- Clicking on an idea tile in search results opens this screen
- Please mock the data for ideas from JSON file
- Shows a sample idea with audio, video and images
- Please use sample audio, video files that can be played
- Clicking thumbs up or thumbs down should increment/ decrement the corresponding score
31-Idea Detail Text Only- Shows an idea detail without any attachments
32-FAQ- Shows the FAQ list
- Read FAQ list from a JSON file
33-FAQ- Shows the FAQ detail
- Read FAQ details from a JSON file
34-Admin Email
- Keep the email id configurable
- It is not expected to actually send an email in the scope of this challenge
CODE REQUIREMENTS:
- “think in Angular” when coding.
- 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.
CSS
- 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.
Assets/Images
- Use SVG to make graphics look sharp on your submissions.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
- For all the image, please pull them as PNG format from provided Assets
- For all the icons, please pull them as SVG format from provided Assets
Final Submission Guidelines
Final Submission Guidelines
1. Source code zip file.
2. Compiling and building instructions.
3. Demo video of your app in action