How Lovable AI Helped Create the Docentric e-Invoice Validator Frontend

When we built Docentric e-Invoice Validator we wanted a web UI that made using it easy. Even though we're full-stack developers, we used AI to speed up the UI development.

This is why we used Lovable AI.

Lovable is an AI assistant that generates user interfaces from natural language prompts instead of manually building layouts from scratch.

It helped us do three things quickly:

Get a clean, usable UI early.
Iterate on UX details in small steps without slowing down backend work.
Have something "good enough" to be used by developers and testers from day one.

Start with a clear goal

We began by describing what the validator is and what the UI should enable:

Show basic project information.
Expose links to API documentation (Swagger/Redoc).
Provide an interactive way to upload an invoice and test operations.

This gave Lovable enough context to generate an initial page: a project overview with links to docs, and a testing section.

Iterate in small, targeted changes

Once we had a base, we improved the UI in small rounds. Each round focused on one type of change, for example:

Consolidating the UI into a single upload control that supports both PDF and XML.
Adding support for multiple operations (validation, extraction, conversion).
Adjusting labels and button text so they match what the UI actually does.
Improving feedback so users immediately know what happened, not just whether it succeeded.

This approach kept changes predictable and prevented "one big redesign" that breaks everything.

It's worth noting that, as with any AI assistant, Lovable didn't always get things right on the first pass, and we needed to make small iterations for each functionality.

Add a way to test UI flows without the backend

During UI development you often need to verify:

States
Validation errors
Download actions
Edge cases

To make that easy, we added a "simulation mode" option. It lets you test UI behavior without requiring the API to be running, which is useful for quick demos and UI-only iteration.

Polish last: feedback, loading, and clarity

After the core interactions worked, we focused on the final 20% that makes the UI feel solid:

Toast notifications for success, warning, info, and error.
A short loading indicator for system information that is fetched from the server.
Clearer output messages, including meaningful text for "exit code 0" scenarios.
A sample files section that links to a public corpus repository for easy testing.

This is also where we simplified the documentation part of the UI so it doesn't compete with Swagger or Redoc. The UI links to those tools instead of duplicating them.

What we ended up with

Lovable helped us create a UI that supports the way developers and testers actually use the validator:

Upload a PDF or XML
Choose an operation and validate
View results immediately

It's simple, fast to use, and consistent with the REST API capabilities. Most importantly: it's easy to evolve. As the validator adds more formats and operations, the same iteration loop applies.

Try it yourself now! 👉 Check the repo on GitHub, or learn how to run it using Docker (link to Docker article).