Skip to content
All projects

IoT data application · In-house project

Control Panels for Connected Devices

Multi-brand, multilingual, role-based web control panels where customers monitor and manage their own field devices from a single screen: live status, alarms and consumption data.

My role
End-to-end development · front end, back end, API and database
Status
In production · no screenshots, for client confidentiality

What need did it start from?

Getting to the maintenance, fault and consumption data of devices in the field often meant a site visit. The goal was to make that information available from a single screen and shorten response times. The same panel had to serve end users with little technical background as well as managers and service teams.

My approach

I first built the whole system myself, end to end from interface to database; later I moved the panel onto another back end, and today I work with both. During the move I explored first and built second: I studied the API through real responses and documented every endpoint. Risky steps such as write operations were verified first with a read-only test account and then released in a controlled way. I split the work into phases and triaged critical issues ahead of each release.

The solution

Users see the live status of their own devices, review alarm and fault history and follow consumption in charts; with the right permissions they can change device settings. Alarms and events trigger instant notifications, and reports can be exported as PDF. A single codebase serves several brands: colours, logos and copy change per brand while the business logic lives in one place. The interface is multilingual, and view and action permissions are scoped per user and per device. I set up self-hosted error monitoring and wrote versioned user guides generated automatically from the screen flows.

Where it stands

The panels are in production. For client confidentiality, no screenshots, brand or client names are shared.

Technologies

Application

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • shadcn/ui
  • ApexCharts
  • next-intl
  • Zod
  • Firebase Cloud Messaging
  • jsPDF

Quality and release

  • Vitest
  • ESLint
  • Sentry SDK + self-hosted GlitchTip
  • Node.js self-hosted deployment