Challenge Overview
Challenge Overview
We are building an internal web application for a client. This application will be divided into frontend and backend. This is the first challenge of a series of challenges to build both applications.
Goal of the challenge
The goal of this challenge is to convert the Sketch files provided into a skeleton Angular app. A future challenge will tie the Angular app into the backend API.Technology and Framework details
- Angular 9.x
- Typescript
- NodeJs 12.x
- Material Design (https://material.angular.io/)
- Angular Flex Layout (https://github.com/angular/flex-layout)
Supported Browsers
- Chrome
- IE 11
- Edge
UI requirements
- The layout uses Angular flex (https://github.com/angular/flex-layout)
- Angular Material CDK (https://material.angular.io/cdk/categories)
- The design must match the sketch files in the forum.
- The sketch file contains the view details and detailed notes about different states and app flows. Please read these notes carefully and ask questions if things are unclear. The notes are in scope and may detail alternate views that need to be covered in the converted views and detailed in your validation documentation.
- Must use the provided CSS file for theme
- Note that there are alternate states for a number of the views, including the header (when viewing a past period), filters (we won't always show "In-Network / Out-of-Network" switches). These are covered in the notes, and are *in scope* for this challenge. Please ensure you cover this in your validation documentation.
- The app must be responsive. The cards are fixed-width, but the number of columns can change as the page resizes.
Services
Mock services should be provided to load data. These mocks will be replaced by the real backend in a separate challenge.Testing
- Unit tests are *required* for this challenge
- Add unit tests to the Angular Application (frontend) for the service calls (backend calls)
- 100% coverage for service calls is in scope
- Backend must be mocked (Backend will be integrated in a future challenge)
- Angular application must past lint and NPM audits
Scoring guidelines
Major requirements:
- UI is converted appropriately and works in Chrome, IE 11, and IE Edge
- Resizing works as expected (according to the notes in the Sketch file)
Minor requirements:
- Internal code documentation is clear and complete
- Data access is well encapsulated and will be easily swapped for a real backend service
Submission Requirements:
- Angular project source code
- Unit tests
- README.md covering the environment requirements, deployment, and how the tests are run
- Validation.md covering how to validate each of the individual screen and notes seen in the Sketch file and generate the test coverage report.