Case study

TRC-LU ICT Inventory

ReactCloudflareNeonPostgreSQLInventory

Overview

Responsive ICT asset and preventive-maintenance system for TRC-LU. Tracks hardware, assignments, condition, divisions, sections, and June/December PMS with dashboard analytics and Excel workflows.

Problem

Managing ICT equipment requires more than a list of devices. Each asset needs a unique tag, assignment, location, condition, technical specifications, accessories, and a preventive-maintenance record. Without one structured system, inventory searches, status reporting, and June/December PMS planning become difficult to keep consistent.

Approach

Built an admin-only React application around the actual ICT workflow: register and update assets, organize them by division and section, track active, defective, and under-repair states, and maintain a paired PMS schedule. Search, cascading filters, sortable columns, paginated results, Excel import/export, dashboard charts, and responsive detail drawers keep dense operational data usable on desktop and mobile.

Architecture

A React 19 SPA uses React Router for authenticated sections and TanStack Query for cached server state, mutations, and invalidation. A single Cloudflare Pages Function routes authentication, dashboard, asset, PMS, section, division, and lookup requests. Neon PostgreSQL stores users, organizational lookups, assets, and one PMS schedule per ICT tag with foreign keys and supporting indexes. JOSE signs JWTs, bcryptjs verifies passwords, and parameterized SQL handles persistence.

Challenges

The interface had to make wide inventory and maintenance tables usable on small screens without hiding important fields. Asset and PMS records also need to remain synchronized while enforcing unique ICT tags and one schedule per asset. Large lists required debounced filters, allow-listed sorting, server pagination, indexed queries, and batched dashboard aggregation. Excel imports add another validation layer for column aliases, duplicate tags, and division/section matching.

Results

A deployed inventory workspace with a searchable and sortable asset registry, June/December PMS tracking, status and distribution dashboards, Excel import/export, organization-list management, skeleton and error states, and responsive desktop/mobile navigation. It replaces disconnected inventory tasks with one authenticated workflow backed by relational data.

Technology

React 19Vite 8React Router 7TanStack Query 5Cloudflare Pages FunctionsNeon PostgreSQLChart.jsSheetJSJOSEbcryptjs
Private repo
Email copied