Challenge Overview
We are building an internal web application for a client. This application will be divided into frontend and backend. This is in 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 previous challenge implemented a large portion of the requirements, so for this challenge there are two goals:
- Fix the bugs from the previous challenge
- Update the converted design to match the updated Sketch file that the client has provided
Technology and Framework details
Supported Browsers
- Chrome
- IE 11 (MAJOR requirement)
- Edge
Source code
The source code from the previous challenge will be provided in the forum.
Bug fixes
In the forum is a set of PDF files that outline the individual bugs that we are looking to fix in this challenge. Each bug is considered a major requirement. We can't miss fixing any of these.
Updated design
An updated Sketch file is provided in the forum with some updates to specific views and states. The updates necessary to match this updated design are
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 and in the unit tests (major requirement)
- The app MUST be responsive. The cards are fixed-width, but the number of columns can change as the page resizes (major requirement)
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
- We want at least 95% coverage of each individual file
- Backend must be mocked (Backend will be integrated in a future challenge)
- Angular application must past lint and NPM audits. Note that the original starter pack may not entirely pass the lint checks, but we need to discuss this in the forum and get an approach finalised.
Validation
Ensure that your Validation.md is
complete. You must detail each individual bug that's being fixed, including how to validate that the fix is appropriate. You must also cover the updates made to address the changes in the updated Sketch file.
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)
- All listed bugs are fixed
- Updated Sketch file is handled appropriately
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.
Final Submission Guidelines
Please see above