---
title: "DMF Fence Calculator"
url: https://hurricane.works/ai/projects/dmf-fence-calculator/
description: "Precise fencing material quantity calculator with real-time pricing"
status: "Production"
categories: ["Web Platforms"]
---

# DMF Fence Calculator

Precise fencing material quantity calculator with real-time pricing

**Status:** Production
**Live URL:** https://dmf-calculator.com/

## 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.

## 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
- Next.js 16
- React 19
- TypeScript 5
- Tailwind CSS 4

### Database
- Supabase (PostgreSQL)

### Data Pipeline
- Python 3
- Automated sync scripts
- GitHub Actions

### Infrastructure
- Netlify
- Netlify Forms

## 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.

- Next.js static site (Netlify)
- Supabase PostgreSQL (product data + sync logs)
- GitHub Actions (daily automated sync)
- Python scripts (data cleaning + normalisation)
- Data migration from WordPress/WooCommerce