Challenge Overview
Welcome to the "CRM - Correspondence Angular Application Challenge". We are building an internal web application for a client. This application will be divided into frontend and backend. This the first challenge of the series of challenges to build both applications.
Goal of the challenge
The goal of this challenge is to build the angular web application UI prototype based on the design screens.Technology and Framework details
- Angular 9.x
- Typescript
- Angular Material Design (https://material.angular.io/)
- Angular JSONForms
- NodeJs 12.x
Browsers
- Chrome (Latest)
- IE11
- Edge (Latest)
Requirements
- Build the Correspondence frontend based on the design screens. Design Sketch file will be shared in the forum
- The screens in scope are shown here:
- https://wellmark.invisionapp.com/share/TUW7BOCZVMS#/screens
- The WEB tab is not in scope
- The Angular material design should be used. CSS style will be provided in the forum
- Make the Letter and Form related pages belong to different modules to allow better loading performance
- Please populate the dropdowns with the values already found in the design and invision links
- Don't hard code any data. Use JSON files to allow moving to a real backend later
- For count drop in form list screen, the allowed values are 0 to 5. The CONTINUE button should only be enabled if one of the values is greate than 0
- Angular Material Design should be used to render the application
- To render the input fields shown in the letter/form details screen JSON forms must be used:
- https://wellmark.invisionapp.com/share/TUW7BOCZVMS#/screens/406301806
- For JSON forms the following references must be used:
- JSON form inputs fields are provided in the design and JSON response files will be provided in the forum
- Document upload should allow only PDF files and it should be rendered in the right side of the details view:
- https://wellmark.invisionapp.com/share/TUW7BOCZVMS#/screens/406301806
- User can click on the items in the list (example: Cover and Uploaded Document (1)) to show the document preview
- Cover will come from backend
- Documents will be the uploaded document
- Clicking in the X button will remove the uploaded document
- The uploaded document should be stored in memory until it’s sent to the backend
- At the moment, UPDATE PREVIEW button won’t do anything. It will be implemented once the backend API is integrated
Final Submission Guidelines
- Angular application with all the screens in scope