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/
First, please start a new project with Vaadin 14 https://vaadin.com/start.
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.
Login: 00A - 00B
Validation error needs to be implemented.
Dashboard: 01A - 01G
Please notice when the width is less than 1024px, the sidebar is hidden (compared 01E and 01F).
In page 4, “Status” has a funnel icon, we don’t implement filters this way, please ignore this filter.
All headers are clickable to sort that column.
Dashboard with Side panel: 02A - 02G
Clicking the top three big buttons will show side panels.
CSV upload is required.
Dashboard Enhancement: 08B - 08D
In the dashboard, add two icons after “Search Order” input. One is to show filters 08C, the other is to show column settings 08D. Please make sure the logic of two panels works.
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.