Project Overview
What I built
This independently operated support system makes digital construction standards easier to use. As of August 2026, it is in pilot operation for expert feedback while its automated review coverage and distributed resources continue to expand.It connects the standard library, user libraries, user-authored standards, API exploration and execution, software and manual downloads, and support boards in one workflow.On the frontend, I implemented multi-panel editing, hierarchical search and direct navigation, type-aware detail editing, role-based behavior, and external integrations so users can work with dense standards data without losing context.
Technologies
Next.js 14
React 18
TypeScript
Mantine
TanStack Query
Zustand
next-intl
TipTap
Jest
React Testing Library
Docker
Jenkins
USER SUPPORT SYSTEM
Hierarchy exploration and editing-state flow
A portfolio-level view of navigating a facility-to-variable standards hierarchy in multi-panel editors, then consuming it through APIs while keeping server and local editing state apart.Standards hierarchy
Explore a deep facility-to-variable hierarchy in one interface
Object classFacility · object class
Review itemReview item
Review elementReview element
VariableI/O and decision variables
Resizable multi-panel map · keep selection context
Editing and state separation
Split local editing state from server state, then resync after save and validation
standards-mapNext.js · Mantine panels
Editing and state separation
ZustandLocal editing state
TanStack QueryServer state · query keys
Java APIStandards CRUD
Pilot opsDocker · Jenkins
Resync the interface after save, delete, and validation
Use and operations
Connect standard and user libraries plus the API Center to the pilot deployment path
Standard libraryBrowse source standards
User libraryEdit user-defined standards
API CenterRun requests · copy results
Scope
Key Contributions
- 01Implemented a resizable multi-panel standards-map tool connecting object classifications, review items, review elements, and a detail editor.
- 02Connected tree search, selection state, child-node CRUD, direct ID navigation, and spatial information so users retain context in deep hierarchies.
- 03Built type-aware tabs for content, Python rules, input/output variables, and decision variables, including selectable values and parent or management-variable editing.
- 04Separated source and user-defined standards, enabling user codes, edited content, and initial values to be viewed and maintained consistently in embedded experiences.
- 05Enhanced the API Center with category navigation, absolute request URLs, request-body prefilling, file parameters, executable responses, copy actions, and admin-only controls.
- 06Used TanStack Query, feature-scoped query keys, and custom fetch utilities to synchronize Java backend CRUD state after save, delete, and validation operations.
- 07Added Jest and React Testing Library coverage for user-standard mapping, management-variable visibility, permissions, trees, and critical editor regressions.
Constraints & Decisions
Challenges
- 01The interface had to expose a deep facility-to-variable hierarchy without losing the current selection or editing context, requiring careful control of information density and panel sizing.
- 02Qualitative, quantitative, and decision standards expose different tabs and rules, so type changes had to preserve the correct standard code and user input.
- 03Role permissions, cookie-based authentication, embedded WebView and iframe consumers, and Java API contracts had to behave as one predictable interface.
Verified Evidence
Results
01As of August 2026, the live pilot provides standard and user libraries, the API Center, software and manuals, and support boards.
02Separated feature-scoped server state from local editing state and added automated coverage for critical transforms and permissions to manage regressions during iteration.
03Maintained an operational structure compatible with Next.js standalone builds, Docker images, and the Jenkins deployment pipeline.
