Project 30: Admin Dashboard

JS Wizard

Builds on these lessons

Generating With Claude Generating With Chatgpt Refactoring With Ai Ai Code Review Ai Debugging Ai Performance Optimization Ai Documentation Ai Test Generation

Step 1 of 2

Project

Assembling the Dashboard's Data Layer

This is the capstone: combine the month's techniques into one real module. An async loadDashboardMetrics() awaits a fetch, a debounced refreshMetrics wraps it for a manual refresh button, and every step is wrapped in try/catch so a failed request never crashes the whole dashboard.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

async function loadDashboardMetrics() {
  try {
    const response = await fetch("/api/dashboard/metrics");
    const metrics = await response.json();
    console.log(metrics);
    return metrics;
  } catch (err) {
    console.log("Failed to load dashboard metrics:", err.message);
    return null;
  }
}

const refreshMetrics = debounce(loadDashboardMetrics, 500);
refreshMetrics();

← Previous