Back to Portfolio
Live in ProductionLoRaWAN Network Operations
๐Ÿ“ก

TTN Custom IoT Dashboard โ€” The Things Network Integration with React

A white-label React dashboard built on top of TTN's API for a LoRaWAN network operator managing 2,000+ devices across 50 enterprise clients โ€” replacing TTN's default console with a branded, client-facing portal.

2,000+
Devices
50
Tenants
2 hrs
Onboarding

โš The Problem

A LoRaWAN network operator in the Netherlands was managing 2,000+ devices across 50 enterprise clients using TTN's default console. Clients wanted a branded experience with their own logo, RBAC, custom alerting, and automated PDF reports โ€” features TTN's console doesn't provide. The operator was losing enterprise contracts to competitors offering white-label portals.

๐Ÿ’กOur Solution

We built a white-label multi-tenant dashboard that integrates with TTN's API and MQTT broker. The Node.js backend authenticates with TTN using API keys, subscribes to device uplinks via MQTT, and exposes a WebSocket API to the React frontend. Each tenant has isolated data views, custom device grouping, and an integrated payload decoder editor (JavaScript sandbox) so operators can write custom decoders for any sensor type. The system supports 50 tenants sharing infrastructure while maintaining complete data isolation.

๐Ÿ”—System Architecture

TTN Network Server โ†’ MQTT โ†’ Node.js Backend (multi-tenant proxy) โ†’ WebSocket โ†’ React Dashboard (per-tenant view)

Tech Stack

Hardware
  • Any TTN-registered LoRaWAN devices
  • TTN Gateway integration
  • Payload decoders for all major sensor types
Communication
  • TTN MQTT broker
  • TTN Webhook integration
  • WebSocket (backend to frontend)
Cloud
  • Node.js backend (TTN API proxy)
  • PostgreSQL (device registry + multi-tenant)
  • Redis (real-time cache)
  • TTN Cloud (network server)
Frontend
  • React + TypeScript dashboard
  • Dynamic payload decoder editor
  • Live device status grid
  • Chart.js time-series visualizations

Key Features

Multi-tenant architecture โ€” 50 isolated client portals on shared infrastructure
Custom payload decoder editor (JavaScript sandbox, no restart needed)
Real-time device status grid with last-seen timestamps
Configurable alert rules per device type and tenant
Automated daily/weekly PDF reports per client
RBAC: Admin, Operator, Viewer roles per tenant
Device metadata management (location, description, custom tags)
TTN webhook integration for bi-directional downlinks

Results Delivered

  • 2,000+ devices managed across 50 enterprise tenants
  • 3 enterprise contracts won after demo of white-label portal
  • Payload decoder changes deployed in < 30 seconds (vs. code deploy)
  • 100% data isolation verified in third-party security audit
  • Client onboarding reduced from 2 days to 2 hours

Technologies

TTNLoRaWANReactNode.jsWebSocketMQTTMulti-tenant

Who This Is For

LoRaWAN network operators, smart city operators, IoT platform companies with TTN deployments

Need a similar solution?

We've built production IoT systems like this across 15+ countries. Let's talk about yours.

Let's Build Together

Got an IoT challenge?
We've shipped it.

Whether you need a fleet to track, a factory to monitor, or a farm to automate โ€” our team has done it before and we'd love to build it with you. Typical response time: under 24 hours.

No upfront commitment99.9% uptime SLANDA on requestFixed-price options