Skip to main content

Web Developer Case Study

Training web app for clinicians to encourage recycling

Our cost simulator and game helps train clinicians in what is and isn’t recyclable in their clinics. Built with Angular as a single page app. And has a built-in content management system.

Image of health worker who could use the web app

Project features

Angular Single Page App

We used the Angular frontend javascript framework to build this single page app (SPA). An SPA behaves like an app but in the browser.

Image from the single page app
icon of checkmark

Single Page App - behaves like an app but in the browser

icon of checkmark

Cost simulator with interactive savings

icon of checkmark

Drag and drop game with savings calculator

icon of checkmark

PDF document library

icon of checkmark

Built-in content management system

icon of checkmark

Serverless architecture - uses Googles Firebase

icon of checkmark


icon of checkmark

Image optimisation on any images uploaded

Our cost simulator and game helps to train clinicians in what is and isn’t recyclable in their clinics. Built with Angular as a single-page app. And has a built-in content management system.

This is a CPD project that I wanted to build as a single-page app. I built it using Angular for the frontend. And Firebase for the serverless backend. It’s a great little project that has a host of features.

1. What is this Single Page App?

It’s a web app to help clinicians learn more about what can and can’t be recycled in their clinics. (Ed. currently it has demo products in it). It aims to encourage recycling and reduce the costs of incineration for the clinician’s business. So as the strapline on the app says - “Better for the planet, better for your business”.

2. Features of the app

3. The cost simulator

The clinician uses the cost simulator to see the savings that their business will save each year. The simulator shows the exact cash saved. Plus the weight saved from incineration. The value saved is also compared to the cost of a full-time nurse. This is via an interactive SVG image.

Notice that the cost simulator behaves like an app. With values being immediately updated without any page refreshes… this is the wonder of web apps. And this is how the web is heading.

4. The Game

The clinician can also play a simple game to help with their learning. The game simulates the three bins that clinicians have in their clinics. The user is presented with an item to dispose of. They have to choose the correct bin.

Once they have completed dragging all objects, the user is presented with savings missed. And also given a score. At which point they can reorder the objects and mark the game again.

5. Document Library

The web app comes with a library for supporting learning documents. The admin of the app can upload documents to here via the content management system.

6. Content Management System

The app has a built-in content management system. This allows the admin to control the content throughout the app. Everything from header strap lines through to products in the game.

It’s super-easy to use and the updates happen almost immediately. Again, this is a benefit of a web app.

7. Serverless Architecture / No Updates

The app uses Firebase for the management of data. I used Firebase’s Firestore NoSQL database. And Firebase’s authentication so that the administrator can log in and out.

Whilst data comes from Firebase. The actual app is served via Netlify’s hosting.

This is a serverless setup. It’s great… it means that I don’t need to worry about updating server-side systems.

We’re also using Firebase’s storage buckets for images and documents. For images, we have image optimisation so that admins don’t upload super-sized images that could wreck the app’s performance.

Again, this is a CPD project that demonstrates some of Pendigital’s capabilities. Especially, with creating sites that have dynamic content.

Image of guiding lighthouse

Helping you navigate the complex world of web and apps

Helpful guidance, profitable solutions

Get started on a project with Pendigital