Challenge Overview
Project Context
In this project our European telco client, Trinity, is looking for your help in designing and implementing their new voucher management system (VMS). This system will help their employees in managing the end to end lifecycle of Trinity top-up vouchers.
Challenge Context
The goal of this challenge is to build the web application UI prototype based on the design using Vaadin framework.
NOTICE: We will use Java to implement frontend in this challenge, NOT react or angular.
Technology Stack
- Vaadin 14
- Java 11
- Spring Boot
- SASS/CSS
General UI Requirements
- You are expected to build the prototype following the provided design unless otherwise specified.
- The UI should be fluid and generally responsive to different screen sizes.
- Make sure you don’t just copy & paste code to create the UI, it’s very important to maintain code reusability so that integration will be easier later. This will be evaluated in the scorecard as a major requirement.
- Do NOT use global z-indexes.
- The data to be displayed can be hardcoded in Java code, but please create corresponding models.
- The pages should clearly indicate invalid input as shown in the design.
Individual Requirements
Design Link: https://xd.adobe.com/view/f1eccad1-1b57-4e10-85bb-38fcadb867f2-a4bf/
Codebase: https://gitlab.com/topcoder-consulting/trinity/vouchers-app-ui (access url in the forum)
Below is the list of screens that are supposed to be implemented in the challenge. Please cross-compare this with the design, and if you see any inconsistencies or have any questions, raise them in the forum for clarification/confirmation.
- Order List: 03A - 03B
Order List has the same table component as in Dashboard, please make sure to create reusable component. Don't not duplicate code.
- Order Detail: 04A - 04D
Once select one order either in Dashboard or Order List, show order detail.
In design, there is no Filter and Column Settings as 08C and 08D for Batches table, but they are required. Similar to the note in Order List, please create reusable component for the table, which allows Filter and Column Settings.
- Voucher Maintenance: 05A - 05B
In 05A, users can choose "Serial Number" or "PIN", and fill text in input.
Please also implement one CSV upload panel, similar to 02A. Once upload, parse the csv and fill in the blanks. The format of CSV could be very simple: header is either "Serial Number" or "PIN", then each row represent one number.
Once click "Block" button, go to 06A.
Once click "Retrieve status" button, go to 07A.
- Pinblock: 06A - 06B
Both Reason Code and Reason are mandatory.
- Pincheck: 07A - 07B
The table requires Filter and Column Settings although it's not in design.
Reference:
- Styling guide https://vaadin.com/docs/themes/themes-and-styling-overview.html
- Components available https://vaadin.com/components/browse
- More docs https://vaadin.com/docs/index.html
Note:
- We are using Java to implement UI. Styles are in SASS.
Browsers
Vaadin 14 has built-in support for Chrome, Firefox (and the latest ESR), Safari, Edge, and Internet Explorer 11.
Final Submission Guidelines
- Code that covers all the requirements.
- A detailed README file including information on how to set up, run and verify your application.