Showcase

Web Development Demos

Web Demos

Please see below for a selection of web development mini-apps and online demos.

Codebreaker

Enter a simple short message, see the message be converted into symbols, press print and let your children figure out the message. A great way to teach children about symbols. Suitable for ages 4+. Created with Laravel Livewire, Tailwind CSS, and Alpine.js.

Livewire
Tailwind CSS
Web Fonts
Print Styling

See more...

Soundboard

Developed as a standalone full-screen web app for use in an educational large touchscreen setting, the wildlife soundboard demonstrates some of the less often used capabilities of modern web browsers to create a rich soundscape. Created with Alpine.js and Tailwind CSS, web audio and SVG graphics.

Alpine.js
Tailwind CSS
SVG
Web Audio

See more...

Location Data

Branch locations? Store locations? Making the most of location data is a valuable exercise. By allowing a visitor to enter their postcode we can use advanced queries and external API requests to work out their nearest branch.

Livewire
Advanced SQL
External APIs
Open Map Data
Leaflet.js

See more...

Sales Dashboard

An interactive sales dashboard that allows you to view sales data and make sales decisions. Created with Laravel Livewire, Tailwind CSS, and Alpine.js.

Livewire
SQL Queries
Data Summary
Live updating

See more...

Keeping track of time in minutes for lots of tasks? Add up all the minutes and use Time Converter field on the right to work out how many hours and minutes the tasks took.

Livewire

Result: 0 minutes