Case study

TRC-LU ICT Inventory

ReactCloudflareNeonPostgreSQL

Overview

An asset and preventive-maintenance tracker built for TRC-LU. It keeps tabs on hardware, who has it, its condition, and the June/December maintenance schedule, with dashboards and Excel export.

Problem

Keeping track of ICT equipment is more than a list of devices. Each item needs a tag, an assignee, a location, its condition, its specs, its accessories, and a maintenance record. Without one system, searching the inventory, reporting status, and planning the June and December PMS all get inconsistent.

Approach

I built an admin-only React app around how the ICT work actually flows: register and update assets, group them by division and section, track active, defective, and under-repair states, and keep a paired maintenance schedule. Search, cascading filters, sortable columns, pagination, Excel import/export, dashboard charts, and responsive drawers keep a lot of operational data usable on desktop and phone.

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 readable on a small screen without hiding what matters. Asset and PMS records also need to stay in sync while keeping ICT tags unique and one schedule per asset. Long lists called for debounced filters, allow-listed sorting, server pagination, indexed queries, and batched dashboard aggregation. Excel imports add another validation pass for column aliases, duplicate tags, and division/section matching.

Results

A deployed workspace with a searchable, 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 turns a pile of disconnected inventory tasks into one authenticated workflow backed by relational data.

Technology

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