Insurance Platform
An enterprise insurance platform built with React and TypeScript: validation-heavy forms, multi-step quote and claim journeys, and an architecture designed to absorb regulatory change without rewrites.
Project Overview
An enterprise insurance platform supporting quote generation, policy management, and claim workflows. The product surface is dominated by long, conditional forms where every field has rules, every step depends on the previous answer, and every change has compliance implications.
Pixel&Code contributed to the frontend architecture and delivery: a schema-driven form layer, predictable state across multi-step journeys, and a testing approach that gives the business confidence in regulated workflows.
Business Challenge
Insurance workflows resist easy abstraction. Form fields appear and disappear based on prior answers. Validation rules differ by jurisdiction. Internal product teams need to ship changes frequently — and each change has to be auditable.
A hand-rolled form for each product made the codebase brittle. New regulations or product variations triggered cross-cutting changes, and the test surface grew faster than the team could keep up with.
Solution Delivered
Forms are defined as data: a typed schema describes fields, conditional visibility, validation, and dependencies. A small rendering layer turns the schema into UI, and a separate validation layer turns it into rules. Business teams can add or change fields by editing schema, with engineers reviewing for correctness.
Multi-step journeys are coordinated by a state machine that captures the legal flow explicitly — what's allowed, what's blocked, where the user can resume. Tests target the state machine and the schema layer directly, so a change to one form doesn't require re-testing the whole app.
Key Features
Schema-Driven Forms
Typed schemas describe fields, conditional visibility, and validation — UI is a thin render layer.
State-Machine Journeys
Quote, policy, and claim flows modeled explicitly so transitions are auditable and resumable.
Jurisdictional Validation
Validation rules vary by region without forking the codebase — rules live next to the schema.
Resilient Persistence
Long forms auto-save and resume, with conflict detection between devices and tabs.
Accessibility
Forms meet WCAG requirements out of the box — focus management, error association, and keyboard support are part of the rendering layer.
Targeted Testing
State-machine and schema-level tests cover behavior; UI snapshots cover regressions where they matter.
Technology Stack
Frontend
- React
- TypeScript (strict)
- React Hook Form
- XState
Validation
- Zod / Yup
- Schema-driven rules
- Server-side mirror
Testing
- Vitest / Jest
- Testing Library
- Playwright
Tooling
- ESLint + Prettier
- CI/CD pipelines
- Type checks in CI
Results
Faster regulatory turn-around
Schema changes ship without cross-cutting refactors.
Auditable flows
State machines make every transition explicit and testable.
Less form code
Form surface shrank as duplicated logic moved into the schema layer.
Predictable accessibility
WCAG behavior is baked into the renderer, not bolted on per form.
Lessons Learned
- If your business logic is "this field appears when that one is X," your code shouldn't be written one form at a time. Schemas pay off the second time you copy a conditional.
- State machines turn implicit business rules into explicit, testable transitions. They also make resumable journeys a side-effect, not a feature.
- Validation must be mirrored on the server. Client-only validation is a security and integrity problem in regulated domains.
- Accessibility belongs in the rendering layer. If every form team has to remember to do it, some won't.
Related Services
Building or scaling an insurance platform?
We help teams design frontends that hold up against conditional forms, regulatory change, and rigorous audit trails.
info@pixelandcode.ae