<DT/> DeepTier Labs Demo Project
← Back to main site
Demo #1 — API Integration

SaaS Analytics Dashboard

A real-time analytics dashboard that pulls data from multiple API endpoints, aggregates metrics, and displays them in an interactive UI. Built to demonstrate our API integration and data visualization capabilities.

Stack: HTML, CSS, JavaScript APIs: REST, JSON Build time: ~2 hours
Total Revenue
$48,295
▲ 12.5% vs last month
Active Users
2,847
▲ 8.3% vs last month
API Requests
1.2M
▲ 23.1% vs last month
Avg Latency
42ms
▼ 5.2% vs last month
Revenue Over Time Last 12 months
Revenue
Projected
Activity Feed View all
Payment received — $2,400 from Acme Corp
2 minutes ago
New user signup — sarah@techflow.io
18 minutes ago
API rate limit — 85% threshold reached
1 hour ago
Deploy successful — v2.4.1 pushed to prod
3 hours ago
Webhook failed — Stripe endpoint timeout
5 hours ago
Integration added — Slack notifications enabled
Yesterday
API Endpoints Manage endpoints
Endpoint Method Avg Latency Requests/hr Status
/api/v2/users GET 28ms 12,450 Healthy
/api/v2/payments POST 145ms 3,280 Healthy
/api/v2/analytics GET 89ms 8,920 Degraded
/api/v2/webhooks POST 312ms 1,100 Down
/api/v2/auth POST 52ms 6,740 Healthy
How It's Built View full source
dashboard-api.js
// Fetch and aggregate data from multiple API endpoints
async function loadDashboard() {
  const endpoints = [
    '/api/v2/users',
    '/api/v2/payments',
    '/api/v2/analytics'
  ];

  // Parallel fetch for performance
  const results = await Promise.allSettled(
    endpoints.map(url => fetch(url).then(r => r.json()))
  );

  // Graceful degradation — show what we have
  const [users, payments, analytics] = results.map(
    r => r.status === 'fulfilled' ? r.value : null
  );

  renderStats({ users, payments, analytics });
  renderChart(payments?.monthly || []);
  renderEndpointHealth(endpoints);
}