About Me
A resourceful and self-directed full-stack developer with extensive hands-on experience architecting and building complete, end-to-end solutions. Specializing in creating practical, user-focused Progressive Web Apps (PWAs) using modern vanilla JavaScript. Proven ability to manage the entire project lifecycle, from initial concept and API integration to backend automation with PowerShell and deployment on self-hosted Windows (IIS) and SQL Server environments. A natural problem-solver who excels at taking a complex requirement and delivering a robust, finished product.
Core Skills
Backend & API Development
- C# & ASP.NET: Building robust, custom backends and RESTful APIs using .ashx handlers.
- PHP: Server-side scripting for form processing and security (CSRF).
- Authentication & Security: Implementing user authentication, IP-based access control, and secure API gateways.
- Data Processing: Expert-level parsing, filtering, and transformation of complex XML & JSON data feeds.
Frontend Development
- Vanilla JavaScript (ES6+): Writing clean, efficient, and modern JavaScript without framework dependency.
- Progressive Web Apps (PWA): Architecting installable, offline-capable applications with Service Workers.
- HTML5 & CSS3: Advanced responsive design using Flexbox, Grid, and hardware-accelerated transforms.
- Interactive Web Tech: Three.js (3D Graphics), Leaflet.js (Mapping), and Video.js (Media).
DevOps & Systems Administration
- PowerShell Automation: Authoring complex scripts for automated data pipelines (ETL), task scheduling, and system management.
- Windows Server & IIS 10: Full configuration and administration of a self-hosted web server environment.
- Microsoft SQL Server: Database design, setup, and security management (including SQL Express).
- Media Server Management: Real-time transcoding and HLS re-streaming using FFmpeg.
Digital Strategy & E-commerce
- Local SEO: Technical and content-based search engine optimization.
- Google Ecosystem: GSC & Google Business Profile (GBP) management.
- nopCommerce: Full deployment, customization (CSS, .cshtml), and administration of a self-hosted e-commerce platform.
- Payment Gateway Integration: Securely implementing and testing live payment APIs (PayPal).
Project Showcase
NZ Freeview EPG - Progressive Web App (PWA)
A high-performance PWA built to deliver a reliable, native-like live television experience. This project showcases full-stack proficiency, focusing on front-end user experience, resilient video delivery, and back-end data automation.
Key Features & Technologies:
- Front-End: Built with clean, modern HTML5, CSS3, and Vanilla JavaScript (ES6+).
- Intelligent Streaming: Utilizes Video.js with HLS and Adaptive Bitrate (ABR) control to optimize video quality for desktop and mobile, preventing buffering.
- Dynamic EPG: Asynchronously fetches and parses JSON data to build and continuously update the Electronic Program Guide.
- PWA Core: Employs a Service Worker for asset caching, enabling instant loads and a fully installable, offline-capable experience.
- Back-End Automation: Leverages PowerShell scripts for scheduled tasks, including fetching and transforming raw XML/JSON data feeds for the EPG.
- Server Environment: Deployed on a self-hosted **Windows Server with IIS 10**, including secure .ashx endpoints for user authentication and stream proxying.
Australian Freeview EPG - PWA
A robust, cross-platform Progressive Web App demonstrating real-time data processing, modern media delivery, and advanced responsive design to aggregate live Australian television streams.
Key Features & Technologies:
- Real-Time EPG Engine: Utilizes vanilla JavaScript to continuously parse raw **JSON broadcast data** from an external API, calculating live "Time Remaining" and "Next Program" metrics on the fly.
- Cross-Browser HLS Playback: Implements **HLS.js** for decoding streams on Chrome/Android, with a crucial fallback to **native HLS** for flawless performance on Safari and iOS devices.
- Advanced UX Solutions: Employs **hardware-accelerated CSS transforms** to create a fluid UI and solve complex mobile issues like the "phantom click," ensuring a predictable user experience.
- Modern JavaScript: Includes custom, Promise-based solutions to reliably handle browser **Autoplay Policy** restrictions.
- Core Technologies: HTML5, CSS3 (Flexbox, Transforms), **Vanilla JavaScript**, HLS.js, REST API Integration.
Better Radio PWA - Resilient Streaming Engine
A modern, installable Progressive Web App (PWA) designed for a reliable and seamless radio streaming experience, featuring a custom-built, high-performance C# backend.
Key Features & Technologies:
- Custom C# Backend (.ashx): Developed a suite of server-side handlers in C# to provide secure user authentication and manage stream delivery.
- Recursive HLS Proxy Engine: Engineered a powerful, recursive HTTP handler (`recursive-proxy.ashx`) to solve complex streaming challenges. This proxy intelligently parses HLS playlists (`.m3u8`) on the fly, rewriting segment and key URLs to ensure continuous playback and bypass common ad-blocker or cross-domain issues.
- Advanced Audio Streaming: Integrates **HLS.js** with a native `HTMLAudioElement` fallback, ensuring maximum compatibility for live audio streams across all modern browsers and devices.
- PWA Core Architecture: Utilizes a **Service Worker** for robust asset caching, enabling an instant-loading, offline-capable, and fully installable application.
- Core Technologies: C# (ASP.NET Web Handlers), HTML5, CSS3, **Vanilla JavaScript**, HLS.js.
In-Car Media Hub - Progressive Web App (PWA)
A specialized PWA designed as a distraction-free media and navigation hub for Android car head units, demonstrating advanced geolocation, API integration, and modern UX patterns.
Key Features & Technologies:
- Advanced Geolocation & Mapping (Leaflet.js): Implements a battery-efficient, event-driven GPS (`watchPosition()`) and a custom "heading-up" map display by rotating the entire map container with CSS transforms while keeping the user's marker icon stationary and upright.
- Live Data Enrichment: Utilizes the **OpenStreetMap Nominatim API** for real-time reverse geocoding to display current street-level location data.
- PWA Core for Head Units: Employs a **Service Worker** and a **Web App Manifest** to create a fully installable, full-screen, native-like application experience on Android car stereos.
- Safety-Focused UI/UX: Features an **automatic day/night mode** using `prefers-color-scheme` detection with a time-based fallback to ensure optimal readability and reduce driver distraction.
- Core Technologies: HTML5, CSS3 (Transforms, Modern Units), **Vanilla JavaScript**, HLS.js, **Leaflet.js**, REST API Integration.
NZ TV Signal Finder - PWA
A Progressive Web App demonstrating proficiency in sensor integration, real-time geo-computation, and robust mobile event handling to solve a real-world antenna alignment problem.
Key Technical Achievements:
- Advanced Mobile Debugging: Diagnosed and engineered a robust solution for a persistent **Mobile Touch Event Race Condition** ("phantom click") that caused functional failure on specific iOS devices, utilizing advanced event flow control (`e.stopPropagation()`).
- Device Sensor Integration: Implements the `DeviceOrientationEvent` to provide real-time compass bearing, enhanced with a custom **EWMA Smoothing Filter** for signal stability and dynamic **Magnetic Declination Compensation**.
- Real-Time Geo-Computation: Utilizes the **Haversine Formula** in JavaScript to perform precise, on-device calculation of distance and bearing to TV transmitter sites from the user's live GPS location.
- PWA Core Architecture: Built as a fully installable, offline-capable Progressive Web App using a **Service Worker** for a reliable, network-first caching strategy.
- Core Technologies: Advanced **Vanilla JavaScript (ES6+)**, HTML5, CSS3, Custom Data Parsing (JSON).
IPTV Content Delivery & Management Platform
A complete, end-to-end platform built from scratch to automatically ingest, process, and securely deliver IPTV content. The system includes an automated data pipeline, a secure API, and a PWA front-end for users and administrators.
Key Technical Achievements:
- Automated Data Pipeline (ETL): Engineered a robust backend process using **PowerShell** to:
- Automatically scrape and ingest EPG data from multiple (7+) external sources.
- Parse, filter, and normalize raw XML/JSON data.
- Dynamically generate a unified, composite XMLTV program guide.
- Automate the creation of `.m3u` playlist files by recursively finding root stream URLs.
- Secure API & Access Control (.ashx): Developed a custom **C# (ASP.NET) API** (`playlistscervice`) to act as a secure gateway for all content.
- Implements password-based user authentication.
- Features an IP-based session control system, locking user access to a single IP address for a 48-hour period to prevent unauthorized sharing.
- Effectively protects `.m3u` playlists from being directly accessed, copied, or played in external players like VLC.
- API-Driven PWA Front-End:** Built a Progressive Web App (`myguide`) for end-users to browse available playlists and view the live EPG. The PWA is driven entirely by the secure backend API.
- Administrative Dashboard:** Created a custom admin page that provides real-time monitoring of connected users, their IP address, and their current playlist, demonstrating full-stack system visibility.
Automated Live Stream Capture & Delivery System
A full-stack application designed to allow authenticated users to browse a live TV guide, book specific events, and trigger an automated backend process to record and re-stream the live broadcast as an HLS feed.
Key Technical Achievements:
- Custom C# (.ashx) Booking API: Architected and built a robust, multi-endpoint RESTful API to serve as the core of the system. The API handles user authentication, EPG data requests, and manages the entire event booking lifecycle.
- Dynamic Task Automation (PowerShell & Windows Task Scheduler): Engineered a powerful backend process where the API, upon receiving a booking request, dynamically creates and registers a new task in the **Windows Task Scheduler**. This task is precisely timed to the event's start and stop time.
- Live Stream Transcoding & Re-streaming (FFmpeg): The scheduled task automates the execution of **FFmpeg** to capture the source stream, transcode it in real-time, and re-package it as a standard, high-quality **HLS (.m3u8) stream** served directly from the local IIS server.
- API-Driven PWA Front-End:** Developed a user-facing Progressive Web App (PWA) that consumes the custom API to display a live, searchable Sky Sport program guide with a "Live" filter and a "Book Event" functionality for authenticated users.
- Full-Stack Integration:** Successfully integrated a complex chain of technologies: a user-facing front-end, a C# API, the Windows operating system's Task Scheduler, a PowerShell execution layer, and the FFmpeg media server.