Skip to content
All projects

Internal projects · Insurance

Insurance ERP

Internal life, health, property and platform insurance projects, with permission trees of thousands of entries and scripts of up to 100k characters handled without freezing the browser

Client
Prudential, Berkley, Porto and other players · via i4Pro
Role
Front-end Developer
Technologies
  • Vue.js
  • Vuetify
  • Vuex
  • Vite
  • JavaScript
  • BFF
Confidential projectScreens are under a non-disclosure agreement (NDA). What is described here is what can be shared.LifeHealthPropertyPlatforms

Context

i4Pro's insurance ERP, the foundation for internal projects of major players such as Prudential, Berkley and Porto, across life, health and property insurance lines and platforms. The front-end, in Vue.js with Vuetify and Vuex, follows a BFF (Backend for Frontend) architecture and consumes RESTful .NET (C#) APIs backed by SQL Server stored procedures.

Challenge

Render trees with thousands of permissions per instance in the browser and copy scripts of up to 100,000 characters without freezing the UI, migrate the ERP's front-end applications from Vue 2 to Vue 3 with Vite and co-lead strategic and technology decisions on the products for major players.

Results

better application and integration performance after the migration to Vue 3 with Vite
40–45%
characters: the largest scripts copied without freezing the UI
100k

Key deliverables

  1. 01Led the migration of the ERP's front-end applications from Vue 2 to Vue 3 with Vite, improving application and integration performance by 40–45%.
  2. 02Built Vue.js features with Vuetify and Vuex for internal projects of insurers such as Prudential, Berkley and Porto, in a BFF (Backend for Frontend) architecture consuming RESTful .NET (C#) APIs backed by SQL Server stored procedures.
  3. 03Built a per-instance permission tree fed by the .NET APIs that listed thousands of permissions, validating the instances and rendering it all with virtual scrolling, lazy-loaded nodes and batch processing, without freezing the browser.
  4. 04Implemented clipboard copy of scripts of up to 100,000 characters without freezing the UI.
  5. 05Co-led strategic product and technology decisions for the major insurers served.

Features and the pains they solve

Every feature was born from a real operational problem.

  1. 01

    Per-instance permission tree

    Pain
    The .NET APIs list thousands of permissions per instance; rendering and validating them all on screen is the kind of volume that freezes the browser.
    Solution
    A per-instance permission tree, fed by the .NET APIs, validates the instances and renders thousands of permissions with virtual scrolling, lazy-loaded nodes and batch processing, without freezing the browser.

    Impact: Thousands of permissions per instance, no freezes

  2. 02

    Long-script clipboard

    Pain
    Scripts with tens of thousands of characters must be copied straight from the interface, and a copy that size can freeze the tab.
    Solution
    Clipboard copy of scripts was implemented for texts of up to 100,000 characters without freezing the UI.

    Impact: Up to 100,000 characters per script

  3. 03

    Migration to Vue 3 with Vite

    Pain
    The ERP's Vue 2 front-end applications limited the performance of the applications and integrations used by the insurers.
    Solution
    The ERP's front-end applications were migrated from Vue 2 to Vue 3 with Vite, bringing performance gains to the applications and integrations.

    Impact: +40–45% performance

  4. 04

    BFF architecture and .NET integration

    Pain
    The data on screen comes from .NET (C#) APIs backed by SQL Server stored procedures, and the screen must reflect it faithfully.
    Solution
    The Vue.js features, with Vuetify and Vuex, follow a BFF (Backend for Frontend) architecture and consume the RESTful .NET APIs.

  5. 05

    High-performance native features

    Pain
    Large data volumes must reach the interface without degrading the experience of the people who operate the system every day.
    Solution
    The permission tree and the script clipboard were built as native product features to bring in large data volumes with high performance.

  6. 06

    Strategic product decisions

    Pain
    Each player has its own priorities and requirements across life, health, property and platforms.
    Solution
    Co-led strategic and technology decisions on the products for the players served.