Billing and invoices app
An internal tool for invoices, statuses and payment tracking.
Dev-storyChallenge
Small finance workflows become unclear when invoices, statuses and reminders live separately.
What we did
We built an invoicing module with structured records, statuses and local-first reliability.
Result
The billing flow is more visible and the team finds needed information faster.
Dev-story article
Billing and invoices app: how the project was built
Small finance workflows become unclear when invoices, reminders and payment status live in different places. This internal billing app gives those records a focused working surface.
Sections
06
Modules
04
Stack
Vue 3 + Convex
Why the project exists
Small finance workflows become unclear when invoices, statuses and reminders live separately.
Small finance workflows become unclear when invoices, reminders and payment status live in different places. This internal billing app gives those records a focused working surface.
What was built
We built an invoicing module with structured records, statuses and local-first reliability.
The project creates an invoicing module with structured invoice records, payment tracking, statuses, reminders and local-first behavior for routine finance work.
Main modules and user path
Invoice records hold client details, line items, totals, due dates and references, so finance information is stored as queryable data rather than scattered documents.
Payment status workflows separate draft, sent, overdue, partially paid and paid states, making the current state visible from list and detail views.
Reminder and follow-up views help the team see which invoices need attention without manually checking every record.
Local-first behavior keeps common billing tasks usable when the working environment is not perfectly connected, then syncs records back into the shared data layer.
Architecture and technology decisions
Technical foundation: Vue 3, Convex, Local-first. This matters not as a logo list, but as the set of choices that keeps data, state, user actions and future maintenance manageable.
Vue and Convex shape the main app, with local-first patterns used where finance work benefits from dependable access. Invoice structure stays separate from payment status so reporting and reminders can build on clean records.
How it works in a real scenario
In real use, “Billing and invoices app” works as a clear sequence: it starts from the original problem, then the user takes the primary action, follows a clear data path and reaches the result. The experience stays logical instead of being a random set of screens.
The practical value shows where manual work used to be needed: part of the process is automated, responsibilities are clearly separated, and each module does one understandable job. That is what keeps the solution easy to maintain and extend.
Result and lessons
The billing flow is more visible and the team finds needed information faster.
Billing becomes easier to inspect and maintain. The team can find invoice state, payment history and next actions from one internal tool.
Related articles
Read next
Related project stories
These projects share nearby technical or product decisions, so they show how the same principle behaves in another context.
Dev-storyWebEdge CMS and public content API
Content management that feeds websites and lets the team publish without developer intervention.
WebEdge project
AI agent control plane
AI agent control plane
An internal workspace for agent jobs, instructions and run status.
WebEdge project
Calendar booking platform
Calendar booking platform
Time booking, team schedules and notifications in one interface.
Have a similar idea?
Discuss your project