Tutorials 8 min read
Building a Real-Time Order Dashboard with Webhooks
Learn how to build a live order tracking dashboard that updates instantly when new orders arrive. Step-by-step tutorial with code examples.
H
HookWatch Team
January 22, 2026
In this tutorial, we'll build a real-time order dashboard that displays new orders the instant they're placed. No page refreshes, no polling—just instant updates powered by webhooks.
What We're Building
A dashboard that:
- Receives order webhooks from your e-commerce platform
- Displays orders in real-time as they arrive
- Shows order details with status updates
- Works reliably even during high-traffic periods
Architecture Overview
Code
[E-commerce] → [HookWatch] → [Your API] → [WebSocket] → [Dashboard]
↓ ↓ ↓
Order placed Reliable Process & Real-time
delivery broadcast updateStep 1: Set Up the Webhook Receiver
First, create an endpoint to receive order webhooks:
Javascript
const express = require('express');
const WebSocket = require('ws');
const app = express();
const wss = new WebSocket.Server({ port: 8080 });
// Store connected dashboard clients
const clients = new Set();
wss.on('connection', (ws) => {
clients.add(ws);
ws.on('close', () => clients.delete(ws));
});
// Broadcast to all connected dashboards
function broadcast(data) {
const message = JSON.stringify(data);
clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
}
// Webhook endpoint
app.post('/webhooks/orders', express.json(), async (req, res) => {
const order = req.body;
// Store in database
await db.orders.create({
id: order.id,
customer: order.customer_email,
total: order.total_price,
items: order.line_items,
status: 'received',
createdAt: new Date()
});
// Broadcast to dashboards
broadcast({
type: 'NEW_ORDER',
order: {
id: order.id,
customer: order.customer_email,
total: order.total_price,
itemCount: order.line_items.length
}
});
res.status(200).json({ received: true });
});
app.listen(3000);Step 2: Build the Dashboard Frontend
Create a simple dashboard that connects via WebSocket:
Javascript
// dashboard.js
class OrderDashboard {
constructor() {
this.orders = [];
this.ws = null;
this.connect();
}
connect() {
this.ws = new WebSocket('wss://your-api.com/dashboard');
this.ws.onopen = () => {
console.log('Connected to order stream');
this.updateStatus('connected');
};
this.ws.onmessage = (event) => {
const data = JSON.parse(event.data);
this.handleMessage(data);
};
this.ws.onclose = () => {
this.updateStatus('disconnected');
// Reconnect after 3 seconds
setTimeout(() => this.connect(), 3000);
};
}
handleMessage(data) {
switch (data.type) {
case 'NEW_ORDER':
this.addOrder(data.order);
this.playNotification();
break;
case 'ORDER_UPDATED':
this.updateOrder(data.order);
break;
}
}
addOrder(order) {
this.orders.unshift(order);
this.render();
}
render() {
const container = document.getElementById('orders');
container.innerHTML = this.orders.map(order => `
<div class="order-card">
<h3>Order #${order.id}</h3>
<p>${order.customer}</p>
<p>${order.itemCount} items - $${order.total}</p>
</div>
`).join('');
}
}
new OrderDashboard();Step 3: Handle Edge Cases
Real-world dashboards need to handle failures gracefully:
Missed Webhooks
If a webhook fails, you need a way to catch up:
Javascript
// On reconnect, fetch any missed orders
ws.onopen = async () => {
const lastOrderId = orders[0]?.id;
if (lastOrderId) {
const missed = await fetch(
`/api/orders?after=${lastOrderId}`
);
const missedOrders = await missed.json();
missedOrders.forEach(order => addOrder(order));
}
};Duplicate Detection
Webhooks may be delivered multiple times:
Javascript
const processedIds = new Set();
function addOrder(order) {
if (processedIds.has(order.id)) {
return; // Already processed
}
processedIds.add(order.id);
orders.unshift(order);
render();
}Step 4: Add HookWatch for Reliability
Point your e-commerce webhooks to HookWatch instead of directly to your server:
- Create an endpoint in HookWatch dashboard
- Set your e-commerce webhook URL to
https://hook.hookwatch.dev/wh/your-slug - Configure HookWatch to forward to
https://your-api.com/webhooks/orders
Now you get:
- Automatic retries if your server is down
- Full logs of every webhook
- Real-time alerts for failures
- One-click replay for debugging
Going Further
This basic dashboard can be extended with:
- Filtering: Show orders by status, date, or customer
- Search: Find specific orders quickly
- Analytics: Real-time charts of order volume
- Notifications: Sound alerts for high-value orders
The key is the webhook foundation—once you have reliable real-time data flowing in, building features on top is straightforward.
Tags: tutorialreal-timedashboardwebhooksuse-case