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.
⚠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
- Any TTN-registered LoRaWAN devices
- TTN Gateway integration
- Payload decoders for all major sensor types
- TTN MQTT broker
- TTN Webhook integration
- WebSocket (backend to frontend)
- Node.js backend (TTN API proxy)
- PostgreSQL (device registry + multi-tenant)
- Redis (real-time cache)
- TTN Cloud (network server)
- React + TypeScript dashboard
- Dynamic payload decoder editor
- Live device status grid
- Chart.js time-series visualizations
Key Features
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
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.
Related Services
Frequently Asked Questions
What technology does this ttn custom dashboard lorawan use?+
TTN Custom IoT Dashboard — The Things Network Integration with React is built on TTN, LoRaWAN, React, Node.js, WebSocket. The stack was chosen for real-world reliability in a production deployment — full details are in the tech stack section.
Can CodeCaracal build a similar system for us?+
Yes. The same team that designed and deployed this lorawan network operations system takes on new projects across the stack — firmware, connectivity, cloud and dashboards. Tell us your requirements and we will architect a solution for your environment.
Is this case study a real deployed system?+
Yes — every case study on this site describes a production system we designed and shipped. The problem, architecture, features and metrics are from the actual deployment.
Related Engineering Guides
Deep technical write-ups from the team behind this system.
More Projects
LoRa Asset Tracking System — Indoor & Outdoor Equipment Monitoring
LoRaWAN Livestock Tracking System — Cow Monitoring with GPS & Health Sensors
LoRa Fish Tracking System — Aquaculture Monitoring in Open Water
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.