Canteen Card Web Clients (Web UI)

Introduction

The Canteen Card Web Client is a service type of product used by the administrative staff that aims to provide a convenient and secure way for students to pay for their food and other items in the school canteen using a smart card. The system consists of 3 web clients: the Canteen Card (Admin Client), the Canteen Card (Canteen Client), and the Canteen Card (Transaction Client).

Design

The front-end development of these clients took almost 3 months to develop which started last January 2023. The UI design of these clients was inspired from Google's design language called 'Material You'.

Canteen Card (Admin Client)

The Canteen Card (Admin Client) is a web client used by the system administrator to manage all the parts, components, and features of the system such as the users, the products sold in the canteen, the transactions made by the users, the feedback reported by the users, and the system operation statuses.

Canteen Card (Admin Client) Web UI Preview 2

Canteen Card (Canteen Client)

The Canteen Card (Canteen Client) is another web client used by the counter personnel in the canteen to select the products and confirm the orders of the users.

Canteen Card (Canteen Client) Web UI Preview 2

Canteen Card (Transaction Client)

The Canteen Card (Transaction Client) is another web client to be used by the person-in-charge of the accounting section of the system to approve the transaction requests made by the users.