Challenge Overview
Challenge Objectives
-
Develop Angular web app prototype for a set of application screens
Project Background
-
Desktop Deployment Management Tool application - a web application to help the desktop migration team in managing activities at customer end. The tool will help in quick view of user and asset (desktop data including OS,applications & hardware), rationalize and report asset categories, validate user information and help in scheduling migration activities through automated emails.
-
Application frontend interface will be built based on the previous designs and Angular styling package. In the following challenges we will develop the backend API, integrate with the frontend and build a test suite.
Technology Stack
-
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/b4dcj2e . Design resources are available in project forums. PrimeNG components should be used for common page elements - it’s up to you to update primeNG styles to match design.
Individual requirements
-
Base code setup
The first task is to create the base code and configure build process for the web app. It should be hosted on Heroku as a demo and include build instructions 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.
-
Login screen
Application will support two user types:
- admin users (login required) - most of the application screens will be used by admin users only
- self service - users will open a magic link (delivered via email) and will be automatically logged in. Only two pages are available as self service: select migration time and survey screen.
Screens in scope:
- https://marvelapp.com/b4dcj2e/screen/54512822
- https://marvelapp.com/b4dcj2e/screen/54512821
-
Welcome screen
This static screen will only display the menu items and a global search box.
Screens in scope:
- https://marvelapp.com/b4dcj2e/screen/54512824
-
Data import and onboarding
Data import screen allows the user to import the raw data about users/applications/computers into the app. We will support only csv import at this point, so please make the SCCM, AD and HR options disabled (visually disabled too with a gray overlay). Once raw data is imported, the user has the option to onboard it into a project (so project is essentially a grouping for a single migration activity - ex “Upgrade Win7 to Win10 for Marketing Department”. User will select the records from the database that aren’t already onboarded to a different project and click the “Publish” button. That will create a new project record with the selected migration data records.
Screens in scope:
- https://marvelapp.com/b4dcj2e/screen/54512826
- https://marvelapp.com/b4dcj2e/screen/54512825
- https://marvelapp.com/b4dcj2e/screen/54512828
- https://marvelapp.com/b4dcj2e/screen/54512827
-
Dashboard and record details screen
Dashboard will list all the onboarded records with support for sorting, filtering and search. Sort and filter operations will be handled on the client side as the number of records will not be large.
Screens in scope:
- https://marvelapp.com/b4dcj2e/screen/54512829
- https://marvelapp.com/b4dcj2e/screen/54512832
- https://marvelapp.com/b4dcj2e/screen/54512831
- https://marvelapp.com/b4dcj2e/screen/54512834
- https://marvelapp.com/b4dcj2e/screen/54512833
- https://marvelapp.com/b4dcj2e/screen/54731073
- https://marvelapp.com/b4dcj2e/screen/54512836
- https://marvelapp.com/b4dcj2e/screen/54512835
- https://marvelapp.com/b4dcj2e/screen/54512838
- https://marvelapp.com/b4dcj2e/screen/54512837
- https://marvelapp.com/b4dcj2e/screen/54512840
- https://marvelapp.com/b4dcj2e/screen/54512839
- https://marvelapp.com/b4dcj2e/screen/54512817
-
Self service screens
There are two self service sections: selecting the migration date and filling out post migration survey. Note that the migration survey screen is configurable (see settings section below)
Screens in scope:
- https://marvelapp.com/b4dcj2e/screen/54512818
- https://marvelapp.com/b4dcj2e/screen/54512819
- https://marvelapp.com/b4dcj2e/screen/54666110 -
Migration schedule planning
Schedule planning screen enables admin to configure which teams are available on particular days for migration (and setting up the capacity for each team) - this will be used in the self service screens to enable/disable some dates based on the migration team availability.
Screens in scope:
- https://marvelapp.com/b4dcj2e/screen/54512816 -
Reports and app readiness
App readiness screen enables the admin to set the status of each application that should be migrated. All the applications are listed on this screen and there is no pagination/sorting/filtering.
Screens in scope:
- https://marvelapp.com/b4dcj2e/screen/54512820
- https://marvelapp.com/b4dcj2e/screen/54512814
- https://marvelapp.com/b4dcj2e/screen/54512815 -
Settings screens
There are two setting sections that are available to the admin: email template settings and survey forms settings. NOTE: Email templates are specific for a project (each project has a different set of templates) - remove the "Group" and "Migration type" fields on schedule configuration screen.
Screens in scope:
- https://marvelapp.com/b4dcj2e/screen/54666106
- https://marvelapp.com/b4dcj2e/screen/54666107
- https://marvelapp.com/b4dcj2e/screen/54666109
- https://marvelapp.com/b4dcj2e/screen/54710928
- https://marvelapp.com/b4dcj2e/screen/54710927
- https://marvelapp.com/b4dcj2e/screen/54666111
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
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