Web apps · React
Invoice tracker
Track invoices from draft to paid, with totals, overdue alerts and a status board.
What you get
A small-business invoice tracker: add, edit and delete invoices, filter by status, switch between a table and a board, and see outstanding and paid totals. Data is saved in the browser; the fields and sample data live in src/app.ts.
Files
Exactly what is copied into a new project: 12 files, nothing generated.
Explorer 12
import type { AppSpec } from "./types"; /** Everything this app shows. Edit freely. */export const app: AppSpec = { "brand": "Tally", "icon": "book", "storageKey": "tally-invoices-v1", "entity": { "singular": "Invoice", "plural": "Invoices" }, "title": "Invoices", "subtitle": "Everything you have billed this quarter", "currency": "$", "titleKey": "client", "statusKey": "status", "tones": { "Draft": "neutral", "Sent": "accent", "Paid": "good", "Overdue": "bad" }, "views": [ "table", "board" ], "fields": [ { "key": "client", "label": "Client", "type": "text", "required": true }, { "key": "number", "label": "Invoice #", "type": "text" }, { "key": "amount", "label": "Amount", "type": "money", "required": true }, { "key": "due", "label": "Due date", "type": "date" }, { "key": "status", "label": "Status", "type": "select", "options": [ "Draft", "Sent", "Paid", "Overdue" ] }, { "key": "notes", "label": "Notes", "type": "longtext", "hideInTable": true } ], "summary": [ { "label": "Invoices", "kind": "count" }, { "label": "Outstanding", "kind": "sum", "field": "amount", "status": "Sent" }, { "label": "Overdue", "kind": "sum", "field": "amount", "status": "Overdue" }, { "label": "Paid", "kind": "sum", "field": "amount", "status": "Paid" } ], "seed": [ { "client": "Fernhill Studio", "number": "INV-1042", "amount": 2400, "due": "2026-11-04", "status": "Sent", "notes": "Brand refresh, phase 2" }, { "client": "Oakridge Dental", "number": "INV-1041", "amount": 860, "due": "2026-10-20", "status": "Overdue", "notes": "" }, { "client": "Marlow & Co.", "number": "INV-1040", "amount": 5150, "due": "2026-10-15", "status": "Paid", "notes": "Website build" }, { "client": "Juniper Yoga", "number": "INV-1039", "amount": 420, "due": "2026-11-12", "status": "Draft", "notes": "" }, { "client": "Cask Brewing", "number": "INV-1038", "amount": 1780, "due": "2026-10-01", "status": "Paid", "notes": "Label design" } ]};Remix
Remix this template
Describe what to change and the agent starts from Invoice tracker's files. The box is already started for you: finish “Start from Invoice tracker and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates
React starter
A clean React + TypeScript + Tailwind single-page app. The default target for AI generation.
Sales leads CRM
A lean CRM for a small sales team: leads, deal values, next follow-ups and a pipeline board.
Wedding guest list
Keep the guest list, RSVPs, meal choices and table plan for the big day in one place.
Build on Invoice tracker
Create a free account, start from this template, and ask the AI agent to turn it into your app.