DMF Fence Calculator
Precise fencing material quantity calculator with real-time pricing
Visit Live Site →Overview
The Problem
Customers buying fencing materials need accurate quantity calculations that account for complex variables: fence layouts, corner posts, gravel boards, different panel widths, post fixing methods, and gate requirements. Manual quoting was slow and error-prone.
A Next.js application built for David Musson Fencing that helps customers calculate exact material quantities and pricing for their fencing projects. The calculator guides users through a 6-step process covering layout, height, panel type, gates, finishing options, and post selection.
Real-time pricing is pulled from a Supabase database that syncs daily with the client's WordPress/WooCommerce store via an automated pipeline. The sync extracts product data, cleans and normalises it with Python scripts, and performs an incremental sync to Supabase — all logged and monitored.
The project went through 7 phases of development including user testing with 7 participants, multiple rounds of client feedback, and iterative data pipeline fixes to handle edge cases like imperial panel dimensions, gate classification, and galvanised post detection.
652
Calculator Products
7
Development Phases
7
User Testers
Daily
Data Sync
Key Features
6-Step Calculator
Guided flow: layout selection, fence height, panel type, gates, finishing options (gravel boards, post fixing), and post selection with real-time totals.
Automated Product Sync
Daily automated workflow extracts product data from WordPress, cleans it with Python, and syncs to Supabase with full logging.
Complex Business Rules
Handles European vs standard panel widths, DuraPost steel with colour selection, timber post filtering, gate compatibility, and multiple post fixing methods.
Trade/Consumer Modes
Toggle between trade (ex VAT) and consumer (inc VAT) pricing with all calculations adjusting in real-time.
Quote & Export
Complete materials list with CSV export and quote request form via Netlify Forms.
Iterative User Testing
Seven phases of development driven by user testing feedback and client error reports, each fixing data edge cases and UI improvements.
Technology Stack
Frontend
Database
Data Pipeline
Infrastructure
Architecture
Static Next.js app pulling product data from Supabase at runtime. A separate data pipeline runs daily via GitHub Actions: extract product data from WordPress, clean with Python, and incrementally sync to Supabase with monitoring.
View More Projects
Explore the full portfolio of web platforms, data pipelines, and AI-powered tools.
Back to Portfolio