Billing and invoices app

A local-first Vue 3 invoicing and Lithuanian-accounting app, with an optional webedge-db sync mode.

Vue 3webedge-dbLocal-first

Dev-story

Challenge

A small invoicing tool shouldn't require a backend, accounts or secrets just to draft and preview an invoice.

What we did

A Vue 3 app that runs browser-only by default — clients, products, seller settings and invoices live in `localStorage` — with an optional webedge-db mode that adds auth and sync when you need more than one device.

Result

You can open it and invoice immediately with no setup, and switch on the webedge-db backend later without changing how the app is used.

Dev-story article

Billing and invoices app: how the project was built

Most invoicing tools force you to sign up before you can see a single screen. This one flips that: it opens as a browser-only app with no secrets and no backend, storing invoices, clients, products and seller settings in localStorage under the key 'bills'. The tension was keeping that zero-friction demo path fully intact while bolting on a real authenticated, multi-user sync mode over a reactive backend, without the two modes leaking into each other.

Sections

Modules

Stack

Vue 3 + webedge-db

Why the project exists

A small invoicing tool shouldn't require a backend, accounts or secrets just to draft and preview an invoice.

What was built

A Vue 3 invoicing and Lithuanian-accounting app with a fully Lithuanian-localized UI and invoice domain models built for LT bookkeeping. It runs in two distinct modes from one codebase: a browser-only demo backed by localStorage, and a configured mode where sign-in, per-user data scoping and sync run against our self-hosted reactive backend on our own infrastructure.

Main modules and user path

M01

Two runtime modes from a single build: a browser-only demo that needs no env vars or secrets, and a configured sync mode gated behind authentication

M02

A localStorage data layer keyed on 'bills' that persists invoices, clients, products and seller settings across refreshes with no server round-trip

M03

Lithuanian-accounting invoice domain models plus a fully LT-localized interface, PDF preview, catalogs and reports

M04

Email-and-password sign-in with mandatory email verification, OTP delivered through the WebEdge mailer, and optional Google OAuth left as env-flag toggles

M05

Per-user scoping enforced in the reactive backend so invoices, catalogs, settings and reports are bound to the signed-in user — and a hard rule that configured mode never silently falls back to localStorage on an auth or runtime error

Architecture and technology decisions

Built with Vue 3, webedge-db, Local-first.

Vue 3 with Vite on the frontend, a self-hosted reactive backend on our own infrastructure (backend and site on separate ports) with Better Auth for sessions and OTP mail, deployed to Cloudflare Pages with the browser-only demo achievable by dropping the backend env values.

Result and lessons

You can open it and invoice immediately with no setup, and switch on the webedge-db backend later without changing how the app is used.

The same codebase serves a no-signup demo you can try in seconds and a real per-user accounting app, with the two modes cleanly separated and no silent degradation between them.