Reporting dashboard

Website feature (React) - service usage reports

Reporting feature that provides users with high level usage metrics for services they are subscribed to. This was built using React, Material-UI, and Highcharts (for the graphs). Some of the written content is anonymised due to data sensitivity.

Reporting dashboard

Project - React UI component library and Storybook site

React UI component library based on Material UI currently in its alpha phase. It aims to speed up front-end development for React applications in the company, establish design coherency, and ensure accessibility standards are being met. Some written content is anonymised due to data sensitivity.

I architected the tooling and infrastructure (bundling, automated tests, build and deploy pipelines, etc), set up the Storybook site to showcase components, and also continuously work on the components with my team members. Users can use the components in their React applications as an NPM package.

Change password feature
Change password feature - error
Site menu
Landing page

Website components (React)

Examples of React components developed as part of a subscription and services management site.

Reporting dashboard 1 Reporting dashboard 2

Website feature (React) - detailed data report

Detailed reporting feature that transformed user experience from receiving CSV reports to interactive visualisations. Some written content is anonymised due to data sensitivity.

Coffee app mobile UI
Coffee app mobile UI
Coffee app admin UI balance Coffee app admin UI users

Personal project - NFC Coffee app

A Coffee logging app that I development as a personal project to be used in the office. It uses a NFC scanner and chip, Raspberry Pi device, and a web application to log coffee usage. It replaced a paper based logging system that we used.

Users (after registering on the system) would select the number of coffee shots on a mobile phone set up next to the coffee machine and scan their chip on an NFC scanner. The administrator could then view users' balance, manage user details, and also configure NFC chips.

Technologies used for this included: JavaScript, HTML, SCSS for the front-end. The back-end is a python Flask application hosted on the Raspberry Pi device. NFC read/write was also done via python on the Raspberry Pi. I also did some Android app development to show the mobile web UI and add some hidden controls for admins (eg long press to change the URL, scheduled the screen to turn off during office closure hours, etc.).

EMERGE - physical shape-changing bar chart

The EMERGE project involved building a shape-changing physical, and also dynamic bar chart. Imagine if on-screen 3D bar chart visualisations came to life as physical bars which you can interact with. EMERGE is made up of 100 motor controlled plastic bars, illuminated by RGB LED lights, custom-made circuit boards, and 3 Arduinos. The software consists of a C# back-end, a JavaScript front-end, a Node server, gelled together using websocket communication.

The project enabled me to gain a signficant amount of experience in leading and managing a large scale project, CAD modelling (i.e. Autodesk Inventor), fabrication using laser cutting and 3D printing for bespoke parts, working with various materials, developing a Node.js application combined with websockets, and lots and lots of soldering (and burning my fingers slightly).

floor display

Website - floor display

I developed website to showcase the Floor Display - an augmented reality advertising display that uses interactive projections to engage with customers.

shapeclip 1 shapeclip 2

Website - Shapeclip

This website showcased and provided resources for ShapeClip, a project that aimed to simplify the process of prototyping shape-changing interfaces.

shape-changing interfaces

Website - shape-changing interfaces

I developed a Wordpress site to disseminate work on shape-changing interfaces. The goal was to enable researchers and developers of shape-changing interfaces to have access to a resource where they can easily find previous work. I also designed the icons on the website using Illustrator.

business management system

Website - business management system

While I was self-employed, I developed and deployed a business management system for an engineering company. The web-based system was designed to enable the company administrators, employees, and partners to manage jobs, enquiries, quotes, purchase orders, and log timesheets.