Under NDA — building inspection reports
Several web apps for composing engineering inspection reports on buildings. Vue 2 → Vue 3 migration, form builder, roles and permissions, theming, performance.
Context
The company builds web apps for managing building inspection reports. Starting point: several Vue 2 apps, accumulated tech debt, and a heavy UI that confused users — mistakes were common and the interface took real effort to navigate.
Solution
Migrated three apps from Vue 2 + Vuex to Vue 3 + Pinia, upgrading the UI kit from PrimeVue 2 to PrimeVue 3. One app remains on Vue 2 — maintaining both in parallel.
Built a form builder: a component that lets you assemble arbitrary forms from ready-made blocks on the page. Each block owns its field type — deeply decomposed, extends without touching the core. Form state lives in Pinia: every section is its own store, lazy-mounted on demand.
Implemented a roles and permissions system. Regional feature sets for different cities and regions are controlled via config, no code duplication.
Autosave, undo, incremental validation and report serialization into a custom backend format. Abort controllers on requests — stale calls are cancelled on navigation, no data races. SWR caching on the frontend — repeated requests to the same data never hit the server.
Light and dark theme, design token customization from the UI. Skeleton loaders instead of spinners — page structure stays intact during loads. Large data tables for report content.
Alongside the refactor, redesigned the UI of the migrated apps: simplified flows, removed sources of error.
Outcome
Three apps moved to Vue 3, Pinia and PrimeVue 3 with a visual redesign — cleaner interface, fewer mistakes on input. The form builder eliminated the main source of duplicated logic. SWR caching and abort controllers brought a clear improvement in responsiveness and stability.