Iotweb

Problem

IoT backends expose devices as JSON endpoints. Operators still need a calm console: which nodes are online, which raised alerts, and how to search a growing fleet without leaving the browser.

iotweb is a SvelteKit-style Svelte app with typed page data, composable widgets, and client-side filters for status and search across device cards and alert summaries.

Console widgets

• Device cards with online/offline state and type metadata
• Health bar summarizing fleet posture at a glance
• Alert cards cross-linked to affected device IDs
• Search across device name and type with status filters (all, online, alerts, offline)
• Vitest unit and component tests with Tailwind typography and forms plugins

const alertDeviceIds = $derived(new Set(data.alerts.map((a) => a.deviceId)));

const filteredDevices = $derived.by(() => {
  let devices = data.devices;

  if (statusFilter === 'online') {
    devices = devices.filter((d) => d.online);
  } else if (statusFilter === 'alerts') {
    devices = devices.filter((d) => alertDeviceIds.has(d.id));
  }

  if (searchQuery) {
    const q = searchQuery.toLowerCase();
    devices = devices.filter(
      (d) => d.name.toLowerCase().includes(q) || d.type.toLowerCase().includes(q)
    );
  }

  return devices;
});