Building an Alerts Monitoring Dashboard: Self-Referential Hierarchies and Idempotent Actions

Field Note — Alerts Monitoring Dashboard

---

This project started as a take-home engineering assignment and evolved into a portfolio piece that demonstrates how to handle a problem most backend engineers encounter but few discuss: querying hierarchical data at scale.

The problem is deceptively simple: a manager needs to monitor alerts across their team. But "their team" might mean direct reports only, or it might mean the entire reporting subtree — their direct reports, their direct reports' direct reports, and so on. For a large organization, this subtree can be thousands of people. Loading all their alerts client-side is impossible. Filtering, searching, and paginating has to happen on the server.

---

The Problem: Flat Lists Don't Work for Hierarchies

A flat list of alerts is fine for a single user viewing their own alerts. But a manager needs context:

All of this has to be fast, correct, and scalable.

---

Architecture: React Frontend, Django Backend, Self-Referential Model

React + TypeScript with Controlled State

The frontend is built with React and TypeScript, with fully controlled filter state. Every filter change — severity toggle, search input, subtree toggle, page navigation — triggers a new API call and updates the URL query parameters. This makes every filter state shareable and bookmarkable.

interface FilterState {
  scope: "direct" | "subtree";
  severity: AlertSeverity[];
}