Offline Expense Tracker (installable app)
Track spending by category and month, set budgets and export CSV. Installs like an app and works with no internet.
Overview
A private expense tracker that lives on the phone: no server, no sign-up, nothing to pay for hosting. Data is stored in the browser (IndexedDB) and the app installs to the home screen and works offline.
Great first AI build: small, useful every day, and easy to deploy for free.
Before you start: Node.js 20+ and Cursor, Claude Code or Lovable. About 1 hour.
Build it step by step
Sign in to tick steps off-
1
Create the app
In a terminal:
npm create vite@latest expense-tracker -- --template react-ts
cd expense-tracker
npm install
npm install dexie dexie-react-hooksSave AGENTS.md in the project root.
Read AGENTS.md. Add Tailwind CSS to this Vite + React project following the current official Tailwind guide for Vite, and replace the starter page with an empty app shell: header "Expenses", a main area and a bottom nav with Add, History, Budgets.
Done when npm run dev shows the shell with Tailwind styles.
Uses AGENTS.md
-
2
Add the database
All data lives in IndexedDB through Dexie. Amounts are integers (paise/cents) to avoid rounding errors.
Create src/db.ts exactly as in the attached db.ts. Add helpers in src/money.ts: toMinor("125.50") → 12550 and formatMoney(12550) → "₹125.50" using Intl.NumberFormat with the browser locale (currency INR by default, easy to change in one constant).Done when The app builds and an "ExpenseTracker" database appears in DevTools → Application → IndexedDB.
-
3
Add expenses fast
The add screen must take under 5 seconds: amount, category chips, optional note, date defaulting to today.
Build the Add screen: large amount input (numeric keyboard on phones), category chips (Food, Transport, Bills, Shopping, Health, Other; remember the last used), optional note, date (default today). Save to db.expenses and show a small "Saved" toast. Validate: amount > 0.
Done when You can add an expense on a phone-sized screen in a few taps.
-
4
History by month
A list grouped by month with totals, and edit/delete.
Build History: month picker (default current month), total for the month, totals per category as simple horizontal bars (CSS only, no chart library), and the list of expenses (newest first) with edit and delete (confirm before delete). Use useLiveQuery so the screen updates instantly.
Done when Adding or deleting an expense updates totals immediately.
Uses db.ts
-
5
Monthly budgets
Set a monthly budget per category and see how much is left.
Build Budgets: a monthly amount per category (db.budgets). On History show spent / budget per category with a bar that turns amber at 80% and red over 100%.
Done when Going over a budget shows a red bar.
-
6
Backup: CSV export and import
Data is on the device only, so give people a backup.
Add Settings with: Export CSV (date, amount with 2 decimals, category, note; proper quoting) and Import CSV (validate every row, skip duplicates by date+amount+category+note, show "Imported N, skipped M"). Also a "Delete all data" button with a typed confirmation.
Done when Export, delete all, import: your data comes back.
-
7
Make it installable and offline
Install the plugin: npm install -D vite-plugin-pwa. You need two icons (192×192 and 512×512 PNG) in /public.
Configure vite-plugin-pwa in vite.config.ts: registerType "autoUpdate", a manifest (name "Expense Tracker", short_name "Expenses", display "standalone", theme and background colours, icons pwa-192x192.png and pwa-512x512.png). Show a small "Update available" prompt when a new version is ready. Then explain how to test offline in Chrome DevTools.
Done when After npm run build && npm run preview, the browser offers "Install", and the app opens with the network turned off.
Uses vite-plugin-pwa
-
8
Deploy for free
Any static host works: Netlify, Vercel, Cloudflare Pages or GitHub Pages.
Prepare this app for deployment as a static site: check the production build, add a short README with how to run, build and deploy to Netlify or Vercel, and list what to test on a real phone (install, offline, add, export).
Done when The app is live on a public URL and installs on your phone.
Files and links
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.