94 Case Study: Real-time Admin Dashboard

title: 94 Case Study: Real-time Admin Dashboard
date: 2024-06-19
author: TechLeadID

94 Case Study: Real-time Admin Dashboard

In today’s digital era, the Real-time Admin Dashboard has become one of the core requirements in many business applications, ranging from sales data analysis and user monitoring to critical alert systems. This 94th case study will break down how to build a real-time admin dashboard on top of a modern stack, the challenges involved, as well as the best practices for implementing it.

Case Overview: Real-time Dashboard for a Marketplace

Imagine you are part of the engineering team at an e-commerce marketplace. The management team wants to see sales performance, order status, and visitor counts—all of it live. The system must be able to:

• Display the latest order statistics
• Update charts & tables whenever a new event occurs (e.g., a new order comes in or a status changes)
• Be low-latency & scalable

For this case study, we’ll use React (Next.js) on the frontend, Node.js/Express on the backend, and Socket.IO as the real-time pipe. For demonstration purposes, the data will be mocked.

Designing the System Flow

Let’s start with a flow diagram for the real-time notification flow from the server to the client:

sequenceDiagram
    participant FE as Frontend (Admin Dashboard)
    participant BE as Backend API
    participant DB as Database
    participant SO as Socket.IO Service

    Note right of FE: User membuka dashboard
    FE->>BE: Request dashboard data
    BE->>DB: Query tabel order & statistik
    DB-->>BE: Data order & statistik
    BE-->>FE: Response data

    loop Perubahan terjadi
        Note over DB: Ada transaksi baru atau status berubah
        DB->>BE: Trigger event (order updated)
        BE->>SO: Emit event "order:update"
        SO-->>FE: Push update via websocket
        FE->>FE: Update UI secara instan
    end

sequenceDiagram
    participant FE as Frontend (Admin Dashboard)
    participant BE as Backend API
    participant DB as Database
    participant SO as Socket.IO Service

    Note right of FE: User membuka dashboard
    FE->>BE: Request dashboard data
    BE->>DB: Query tabel order & statistik
    DB-->>BE: Data order & statistik
    BE-->>FE: Response data

    loop Perubahan terjadi
        Note over DB: Ada transaksi baru atau status berubah
        DB->>BE: Trigger event (order updated)
        BE->>SO: Emit event "order:update"
        SO-->>FE: Push update via websocket
        FE->>FE: Update UI secara instan
    end

Designing the Data Structure

To keep our dashboard SPA (Single Page Application) reactive, we need good state management. Here’s an example of a simple order data structure:

1{
2  "id": "ORDER123",
3  "status": "processing",
4  "amount": 300000,
5  "updatedAt": "2024-06-19T09:12:00Z"
6}

Aggregate statistics can be served via the /api/dashboard/statistics API endpoint:

Implementing Real-time Updates

Backend: Setting Up Socket.IO

In the Node.js/Express layer:

 1const express = require('express');
 2const http = require('http');
 3const socketIo = require('socket.io');
 4
 5// Setup express and HTTP server
 6const app = express();
 7const server = http.createServer(app);
 8const io = socketIo(server);
 9
10// API endpoint
11app.get('/api/dashboard/statistics', (req, res) => {
12  // Fetch from DB, dummy here
13  res.json({
14    totalOrder: 1245,
15    orderToday: 98,
16    revenue: 456000000,
17  });
18});
19
20// Emit real-time events (e.g., after a DB update)
21function notifyOrderUpdate(order) {
22  io.emit('order:update', order);
23}
24
25// Listen for order changes (simulation)
26setInterval(() => {
27  const fakeOrder = {
28    id: `ORDER${Math.round(Math.random() * 100000)}`,
29    status: 'processing',
30    amount: Math.floor(Math.random() * 100000),
31    updatedAt: new Date().toISOString(),
32  };
33  notifyOrderUpdate(fakeOrder);
34}, 5000); // Update every 5 seconds
35
36server.listen(3001, () => console.log('Server running on 3001'));

Frontend: React + Socket.IO Client

A React hook to subscribe to Socket.IO:

 1import { useEffect, useState } from 'react';
 2import { io } from 'socket.io-client';
 3
 4export default function Dashboard() {
 5  const [orders, setOrders] = useState([]);
 6  const [statistics, setStatistics] = useState({});
 7
 8  useEffect(() => {
 9    // Fetch initial statistics
10    fetch('/api/dashboard/statistics')
11      .then(res => res.json())
12      .then(setStatistics);
13
14    // Connect to Socket.IO
15    const socket = io('http://localhost:3001');
16    socket.on('order:update', (newOrder) => {
17      setOrders(orders => [...orders, newOrder]);
18      // For example: also update other statistics
19    });
20
21    return () => socket.disconnect();
22  }, []);
23
24  return (
25    <div>
26      <h2>Dashboard Statistik</h2>
27      <div>
28        <span>Total Order: {statistics.totalOrder}</span> <br/>
29        <span>Order Hari Ini: {statistics.orderToday}</span> <br/>
30        <span>Total Revenue: Rp {statistics.revenue}</span>
31      </div>
32      <h3>Order Terbaru</h3>
33      <table>
34        <thead>
35          <tr>
36            <th>ID</th><th>Status</th><th>Amount</th><th>Updated</th>
37          </tr>
38        </thead>
39        <tbody>
40          {orders.map(order => (
41            <tr key={order.id}>
42              <td>{order.id}</td>
43              <td>{order.status}</td>
44              <td>{order.amount}</td>
45              <td>{(new Date(order.updatedAt)).toLocaleString()}</td>
46            </tr>
47          ))}
48        </tbody>
49      </table>
50    </div>
51  );
52}

Simulating the Real-time Flow

Let’s simulate it: when a new order arrives, the backend emits an update via Socket.IO, and the frontend immediately rerenders the latest data. There’s no manual polling delay, and no need to refresh the browser.

The dashboard display will be instantly up-to-date—perfect for admin monitoring needs during flash sale events as well as critical alerts.

Challenges & Solutions

1. Scalability

• Socket.IO works well for hundreds of connections.
• For thousands of users, use Redis Pub/Sub as a multi-instance adapter:

1const redisAdapter = require('socket.io-redis');
2io.adapter(redisAdapter({ host: 'localhost', port: 6379 }));

2. Consistency

• Eventual Consistency: The data on the dashboard can be slightly skewed if there’s lag or a fetch issue.
• Solution: combine periodic data fetching (interval refresh or SWR) + real-time push.

3. Security

• Make sure only admin users can access the streaming data.
• Use authentication on the socket handshake (for example, via a JWT token).

1io.use((socket, next) => {
2  const token = socket.handshake.auth.token;
3  if (verifyJWT(token)) next();
4  else next(new Error("Unauthorized"));
5});

Summary

The Real-time Admin Dashboard changes the way business decisions are made. In this case study, a modern stack like React, Node.js & Socket.IO can produce a dashboard that is responsive, low-latency, and interactive.

The key to success?

• Design a clear data flow
• Leverage real-time updates, but still provide a fallback (manual refresh/callback)
• Pay attention to scalability & security—two core principles of a production system

Suggestions for Further Implementation

• Integrate with an event-driven database (e.g., PostgreSQL LISTEN/NOTIFY)
• Use a charting framework (Recharts, ChartJS) for more compelling data visualization
• Automate real-time testing with Cypress / Playwright

Closing

A real-time dashboard isn’t just a buzzword—it has become an essential requirement of modern systems. May this 94th case study inspire you to implement an effective real-time admin dashboard at your company.

The next challenge? Scaling up to hundreds of thousands of updates per second. But that’s a story for case study number 95.

Digital handshake,
TechLeadID