Built with n8n, ngrok, CodePen and Claude

This is my first project using n8n, and ngrok.

<aside> ⚠️

Demo only. This app is for demo experience purposes only. Please do not enter any personal information, real addresses or sensitive details.

</aside>

A delivery fare estimator for the Philippines. Enter the route, distance, cargo weight, vehicle type, pickup date and an optional discount code, and it returns an itemized fare breakdown.

Features:

• Vehicles that cannot carry the cargo weight are grayed out automatically
• Pickup calendar with holidays marked in blue and a 10% weekend and holiday surcharge
• Optional discount codes
• 12% VAT
• Itemized breakdown showing how the total was calculated
• Built-in calculation as a backup when n8n is offline

🚀 Live Demo

<aside> 💡

The calculator runs through my n8n workflow when my system is online. If it is offline, the page calculates the same result with a built-in formula, so it always works.

</aside>

https://codepen.io/dan-capellan/embed/dPvvJGv?default-tab=result

⚙️ How It Works

1. The CodePen page sends the pickup, drop-off, distance, weight, vehicle and date to my n8n webhook, exposed through ngrok.
2. The n8n workflow (Webhook, Code in JavaScript, Respond to Webhook) calculates the base fare and distance charge and sends them back.