Interactive

Live Demos.

Running right in the browser — no installs needed.

Next.js

Calorie Counter

Daily food logging across multiple days with BMR estimation based on your profile.

Next.jsPrismaMySQL

Next.js

InstaClone

Instagram-style post feed where anyone can create posts and leave comments.

Next.jsPrismaMySQL

Next.js

Citizen Projects

Platform for citizens to submit and track repair/maintenance projects.

Next.jsPrismaMySQL

Next.js

Daily Dismay

Cookie-persisted daily task manager with section grouping, hide/reveal, and Taskman mode.

Next.jsTypeScriptTailwindCookies

Next.js

Table Coordinator

Real-time seating coordinator using Prisma + MySQL (Socket.io simplified to poll-on-load).

Next.jsPrismaMySQL

Next.js

Knudsen Krudt

Fireworks e-commerce storefront with product catalogue, colour/category filters, cart, and VAT order summary.

Next.js 12→16TypeScriptTailwindE-commerce

Next.js

Irrigation Manager

Irrigation system management: machine parks, machines, and maintenance schedules. Live on MySQL.

Next.jsPrismaMySQL

Next.js

Masterwork Calculator

RS3 Masterwork crafting calculator — track bars and ores needed across all items with localStorage persistence and modifiers.

Next.jsReactTypeScriptTailwind

React

Pearl Pattern Grid

Interactive bead/pearl pattern grid — click or drag to toggle pearls.

ReactCSSInteractive

React

Sign Language Translator

Type text and see it translated to ASL hand-sign images.

ReactReact RouterAPI

React

Seat Booking

Reserve seats with email confirmation, JWT auth, and MySQL persistence.

ReactJWTNodemailerMySQL

React

Company Website v2

Radial navigation concept for a company website redesign — nine service areas as pie slices around a central disc.

ReactCSS Transforms

React

ShareSpace

A code snippet sharing feed built with React, Express, and Sequelize. Post snippets in JavaScript or C#, browse the feed, and like posts.

ReactNodeExpressSequelize

Angular

Pokémon Browser

Pokédex catalogue with type filtering, pagination, and stat detail panels. Calls the public PokéAPI.

AngularPokéAPITailwind

Node.js

Peculiar Notes (Vanilla HTTP)

Personal notes app — create, edit, and delete notes with localStorage persistence. Ported from a raw Node.js/MySQL/JWT original (auth removed for demo).

Node.jsVanilla HTTPJWTMySQL

Node.js

Employee Database API

HR employee directory with search, department filter, and add/remove. Ported from an Express + MySQL original.

ExpressMySQLREST API

Node.js

Coding Katas

12 algorithm challenges with Jest tests — run interactively in the browser: Basketball Points, IPv4 validation, Anagram finder, and more.

Node.jsJestAlgorithms

Node.js

RS Hiscore Tracker

Look up any OSRS player by RSN — live skill levels, XP, ranks, and progress bars via the Wise Old Man API.

Node.jsOSRSREST APIChart.js

Node.js

Gantt Chart

Task and team management with an interactive Gantt timeline — add tasks with date ranges, assign team members, edit or remove tasks, and visualise your project schedule across the year.

Node.jsExpressSequelizeMySQL

.NET

Algorithm Playground API

ASP.NET Core Minimal API serving algorithm and game endpoints. 10 endpoint groups, Swagger UI.

ASP.NET CoreMinimal APISwaggerC#

.NET

Socket Client Encryption

TCP client/server messaging secured with three layers of cryptography: Elliptic Curve Diffie-Hellman key exchange, AES-256 encryption, and a Playfair classical cipher bonus mode — all built from scratch in C# .NET.

C#.NETECDHAES

.NET

RPG Character System

Pick a class, equip weapons and armour, level up, and watch your stats change.

C#OOPRPG

PHP

Web-Based Calculator

A calculator built three ways: a PHP frontend calling a C# console backend via system(), a WPF desktop app with INotifyPropertyChanged data binding, and this Next.js version.

PHPC#.NETWPF

PHP

Sudoku Game

Playable Sudoku grid rendered as an HTML table with a number selector row and JavaScript-driven cell interaction.

PHPHTMLCSSJavaScript

PHP

Canvas Triangle (Keyboard)

HTML5 Canvas exercise: draw and move a triangle with WASD + J/L keyboard controls. Ported from jQuery/CSS-transforms to the canvas 2D API.

HTML5 CanvasJavaScriptjQuery

Python

Battleship

Terminal Battleship game running real Python 3 in the browser via Pyodide (WebAssembly). 5×5 grid, 4 turns, async input bridging.

PythonPyodideWebAssemblyGame

Misc

Whack-A-Mouse

Unity game built during education to deliver ad-free games to kindergarteners. Features mouse spawning and animation, a countdown timer, pause menu, difficulty settings, and mouse-tracking hammer — packaged to run without internet or ads.

UnityC#Game DevelopmentEducation