development
KEDCO DataNest
Energy accounting and Role-Based Access Control system for KEDCO — handling infrastructure registration, user provisioning, and granular permission management across the distribution network.
Role
Full-Stack Dev
Year
2024
Category
development
Tech Stack
The Problem
DataNest started as a request for a better way to manage forms. KEDCO had dozens of data entry workflows — meter reading submissions, fault reports, billing reconciliations, infrastructure updates — each handled through a combination of spreadsheets and email threads. Staff in different districts were submitting data in different formats, making it nearly impossible to aggregate or audit reliably. The brief was to consolidate all of this into a single platform.
The Execution
I built DataNest as a PWA using React, TypeScript, and TanStack Query, with Workbox handling the service worker layer for offline caching and background sync. When a field engineer submits a form on a poor connection, the submission is queued locally and synced automatically when connectivity is restored. Management dashboards are powered by Socket.io for live updates — when a new submission comes in, the relevant counters and charts update in real time without polling. ApexCharts renders the data visualization layer, and React Hook Form with Zod handles form validation with proper TypeScript type inference throughout. Zustand manages UI state like filters, sidebar state, and active form drafts.
PWA with Offline Submission Queue
Built with Workbox, DataNest works as an installed progressive web app. Form submissions made offline are cached via background sync and automatically uploaded when the connection is restored — no data is ever lost.
Real-Time Management Dashboard
Socket.io pushes submission events to open management sessions as they happen. Approval queues, completion rates, and outstanding form counts update live without requiring a page refresh.
Type-Safe Form Engine
Every form is defined with Zod schemas that drive both runtime validation and TypeScript types. React Hook Form integrates with these schemas so validation errors are caught before a submission reaches the server.
XLSX Export
Any filtered dataset in the management view can be exported to Excel using the xlsx library. Engineers export raw submission data for offline analysis; managers export summary reports for stakeholder reporting.
Impact
Technical Notes
The offline sync architecture was the most technically involved part of the project. Workbox's BackgroundSync plugin queues failed fetch requests in IndexedDB and replays them when the browser regains connectivity. The challenge was making the UI reflect this queue state accurately — if you submit a form offline, the submission should appear as 'Pending Sync' rather than either confirmed or failed. I built a thin Zustand slice that mirrors the BackgroundSync queue state, updated via a custom service worker message channel. This gave the UI the ability to show accurate submission status without polling the server.