In this challenge, we are going to continue the development of the frontend for a new secure communication app. Topcoder will help take the designs already done and convert them into a new front-end application, utilising existing backend services.
- Angular 11
An existing prototype and mock backend will be provided in the forum. You are required to build on the skeleton here, ensuring that the key requirements for responsiveness, accessibility, and internationalisation are met.
Designs (major requirement)
The screens and designs are available in the forum.
You must exactly match the designs including:
- Font spacing
- Font face
- Font size
- Line height
- Padding / spacing between elements
- Hover states for buttons
Previous components have not implemented unsubscribe destroy methods to release subscriptions. This could cause memory leaks, so please ensure this is done for any new components.
For this challenge we want to convert the following sections from the storyboard into a usable prototype:
- Section 12 - Address book management
- Section 13 - Searching and search states
- Section 14 - Filters
Please ensure the implementation is properly responsive and exactly matches the storyboards. There are numerous places in the application where the panels will be reused, so ensure that your code is properly encapsulated and reusable. Redundant views won't be tolerated - we want to ensure the code is very easily maintained for future use.
These libraries must be used:
- Angular v11 (v11.2.14)
- Foundation library v5.5.1 (https://get.foundation)
- jQuery v3.5.1
- @ng-bootstrap/ng-bootstrap v9 (9.1.3)
- @angular/material v11 (v11.2.13)
Accessibility / internationalisation
Please ensure that your design is set up to be properly accessible to WCAG 2.1 AA standards. A future challenge will fully validate this and fix it up to ensure that the standard is met, but this challenge should set the groundwork for future proper validation of this client requirement.
There are modals shown in the design - please ensure that those display over the background content with a dimmed background. Please ensure the modal display is consistent with what's in the prototype already.
The client coding guideline will require the following HTML DOM elements to have one Unique Identifier. In Angular there should be an easy way to generate the id automatically.
- Input fields like input box, text area, dropdown box
- The container of Error/warning messages like div, span etc.
At least one unique identifier like name/id/css selector is required for each DOM element list above and the client QA team prefers “id”.
<div> <label for="borrow-amount">I'd like to borrow</label> <input id="borrow-amount" autocomplete="no" type="text" aria-describedby="errMsg2" aria-invalid="true" /> <div><span></span></div> </div>
For all test data shown in the screens, please ensure that the data is loaded dynamically from static JSON files hosted on a basic Node server, not hard-coded. This will make integration and translation into the final app easier. An existing mock backend server is provided.
This design will target the desktop browser environment and phones. Please ensure that the design can scale easily from desktop down to tablet, and then phone, and that the app looks good in the latest versions of:
- IE Edge
- Safari (desktop, phone, tablet)
- Chrome (desktop, phone, tablet)
Bootstrap can be used to implement the responsiveness
Previously, HTML files were not coded in a responsive way. Label, field width, margins were hardcoded in pixels instead of percentages. We should ensure that proper percentages are used in conjunction with Bootstrap CSS.
Please avoid using
as blank space it will cause accessibility and responsive UI issues. (footer.html … )
A responsive web design automatically adjusts for different-sized screens and viewports. With a responsive website, someone can browse your website from any device, and it will still look and function perfectly.
Responsive design break points for CP
- Phone: 320px to 640px
- Tablet: 641px to 1024px
- L: 1025px- 1439px
- XL: 1440px +
What to submit
- Submit the full source code with README for application deployment steps.
- Submit a short video overview and a validation document describing how to navigate to see the individual screens shown in the storyboard that we're converting.