Employee Web App - UI prototype part 1

Challenge Objectives

• Develop Hybrid app prototype for a set of application screens
   

Project Background

• Employee Self service application - a hybrid mobile web application to be rolled out at a large company and used by employees for self-service access to Technology requests, Project status, company events and news, managing support ticket requests and more.

Application frontend interface will be built based on the previous designs and Angular styling package.

• In the following challenges we will develop the remaining application screens

Technology Stack

• Cordova

• Angular/Typescript

• SCSS

• HTML
   

Code access

We’re starting a new project so you should create the base code in this challenge.

Marvel app designs are available at https://marvelapp.com/54ajh61 . Design resources are available in project forums. We have an existing set of styles that will be used in this project (styles based on PrimeNG) - see forums for details.

 

Individual requirements

1. Base code setup
   The application will share the same code base for the mobile apps (android/ios) and the standalone web application. The first task is to create the base code and configure build process for all 3 supported platforms (Cordova/Angular/Typescript). Web app should be hosted on Heroku as a demo and include instructions for all 3 platform builds in a top level README.md file. Custom PrimeNG styles should be included in the application (see forums). Configure lint tool to check the source code errors.
    

2. Welcome screens
   This screen will show the getting started info for the user and will be displayed the first time application is loaded.
   Screens in scope:
   - https://marvelapp.com/54ajh61/screen/42631773
   - https://marvelapp.com/54ajh61/screen/42631772
   - https://marvelapp.com/54ajh61/screen/42631775  
   - https://marvelapp.com/54ajh61/screen/42631774  
   - https://marvelapp.com/54ajh61/screen/42631777  
    

3. Authentication screens
   This screen will let the user log in to the application with email/password or fingerprint. In case fingerprint login isn’t available (web browser, mobile devices without the scanner) the email login screen should be displayed.
   Screens in scope:
   - https://marvelapp.com/54ajh61/screen/42631776
   - https://marvelapp.com/54ajh61/screen/42631779

 

4. Common navigation
   Set up the common navigation menu and title bar, and add placeholder components for each route.
   Screens in scope:
   - https://marvelapp.com/54ajh61/screen/42631787
   
   NOTES:
   - remove the search icon in the title bar - we don’t need the global search

 

5. Settings screen
   This screen will let the user configure his dashboard settings, profile info, change password and application wide font size (changing this value should reflect on the entire application)
   Screens in scope:
   - https://marvelapp.com/54ajh61/screen/42631780  
   - https://marvelapp.com/54ajh61/screen/42631787
    

6. Notifications screen
   This screen shows a list of recent notifications. Each notification can be marked as read (click or swipe).
   Screens in scope:
   - https://marvelapp.com/54ajh61/screen/42631788
   NOTES:
   - clicking the View older notifications would open a new screen that lists all the notifications ordered by date descending and has infinite scroll to load older notifications

 

General for all requirements

Follow the required code style and make sure there are no lint errors. All data should be loaded from json files - no entries should be hardcoded and data should be loaded from services, not just included as json in the view components (best option would be to implement the services layer and add a http interceptor that returns the data from local json files). Create and use data model classes for data/state management - using “any” data type is not acceptable. All API actions should display user feedback (loading indicator).

 

What To Submit

Submit a the full source code with Readme for application configuration, build, run, debug steps

Submit a short video overview and a link to Heroku demo

Final Submission Guidelines

Submit a the full source code with Readme for application configuration, build, run, debug steps

Submit a short video overview and a link to Heroku demo