Project 79, E-commerce and business

Order Tracking Timeline

The page customers check again and again after buying. It shows where the order is, what happens next and when it should arrive.

Main API: Notification API
Updates: Simulated polling
Dependencies: None
Your browser: Checking

Track an order

Try order 10482 (on its way), 10519 (delivered) or 10533 (just placed). Press Live updates to watch it move.

How it works

Steps and timesEach order has a current step. Earlier steps are done and get a time, the current step pulses, and later steps wait.
Estimate and countdownThe delivery estimate turns into a friendly countdown that refreshes every 30 seconds.
Live updates and alertsA timer stands in for polling your server. When the status changes, a toast appears and, if allowed, a browser notification.

async function poll(orderId) {
  const res = await fetch(`/api/orders/${orderId}`);
  const { step } = await res.json();
  if (step !== lastStep) {
    lastStep = step;
    render(step);
    if (Notification.permission === "granted")
      new Notification("Order update", { body: steps[step - 1].title });
  }
}
setInterval(() => poll("10482"), 60000);