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