Employee Web App - UI prototype part 3

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

See forums to get access to project repository. Use develop branch as base.

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. Existing screen changes
   There are 5 tickets in project repository logged for the existing screens (developed in the previous challenges). Addressing those tickets is a major requirement. 
    

2. Tech support screen
   This screen will show support tickets created by current user and allow the user to create a new ticket.
   Screens in scope:

   - https://marvelapp.com/54ajh61/screen/42631767

   - https://marvelapp.com/54ajh61/screen/42631768

   We also need to add ticket details screen (clicking on a ticket in the list will open this screen). There are no designs, but we do need to show
   - title,
   - category,
   - description
   - comments added to the ticket by the support team
   - comment box for the user to add a comment (we can use the same message box from the messages screen, see the next section)
   
   NOTE: Clicking the instant message button will open a chat screen with a "Support team" user

3. Messages screen
   This screen will display user conversations - direct and group chats.
   Screens in scope:

   - https://marvelapp.com/54ajh61/screen/42631796
   - https://marvelapp.com/54ajh61/screen/42631795
   - https://marvelapp.com/54ajh61/screen/42631782
   - https://marvelapp.com/54ajh61/screen/42631781
   - https://marvelapp.com/54ajh61/screen/42631769
   - https://marvelapp.com/54ajh61/screen/42631770
   - https://marvelapp.com/54ajh61/screen/42631751
   - https://marvelapp.com/54ajh61/screen/42631753
   - https://marvelapp.com/54ajh61/screen/42631765
   - https://marvelapp.com/54ajh61/screen/42631766
   - https://marvelapp.com/54ajh61/screen/42631763
   - https://marvelapp.com/54ajh61/screen/42631752
   - https://marvelapp.com/54ajh61/screen/42631801

   NOTE: remove the options for voice messages and attachments, but keep rich text formatting for messages (emoticons, etc)
   Message history should be lazy loaded - infinite scroll

 

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