# 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.

- Category: Productivity
- Version: 1.0
- Source: https://wonly.dhfm.in/builder-4392ac/offline-expense-tracker-pwa/

## 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.

## Tech stack

- Dexie.js
- PWA
- React
- Tailwind
- TypeScript
- Vite

## Build steps

### 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-hooks

Save AGENTS.md in the project root.

Prompt:

```text
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.

### 2. Add the database

All data lives in IndexedDB through Dexie. Amounts are integers (paise/cents) to avoid rounding errors.

Prompt:

```text
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.

Prompt:

```text
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.

Prompt:

```text
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.

### 5. Monthly budgets

Set a monthly budget per category and see how much is left.

Prompt:

```text
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.

Prompt:

```text
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.

Prompt:

```text
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.

### 8. Deploy for free

Any static host works: Netlify, Vercel, Cloudflare Pages or GitHub Pages.

Prompt:

```text
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.

## Assets

### AGENTS.md — Project rules. Works with Cursor, Claude Code (rename to CLAUDE.md) and Lovable (paste as knowledge).

```
# AGENTS.md — Offline expense tracker (works for Cursor, Claude Code and Lovable)

## Stack
- Vite + React + TypeScript
- Tailwind CSS
- Dexie.js (IndexedDB) with `dexie-react-hooks` (`useLiveQuery`)
- vite-plugin-pwa for install + offline

## Rules
- No backend and no accounts: all data stays on the device in IndexedDB.
- Store money as integer paise/cents (`amount: 12550` = 125.50). Format only when displaying.
- Dates as `YYYY-MM-DD` strings so they sort and index well.
- Database code only in `src/db.ts`. Components read with `useLiveQuery`.
- Every screen must work offline and on a 360px-wide phone.
- After each step run `npm run build` and fix all errors.
```

### db.ts — The whole database layer. Save as src/db.ts.

```
// src/db.ts
import Dexie, { type EntityTable } from 'dexie';

export interface Expense {
  id: number;
  date: string;      // YYYY-MM-DD
  amount: number;    // integer paise/cents
  category: string;
  note?: string;
}

export interface Budget {
  category: string;  // primary key
  monthly: number;   // integer paise/cents
}

export const db = new Dexie('ExpenseTracker') as Dexie & {
  expenses: EntityTable<Expense, 'id'>;
  budgets: EntityTable<Budget, 'category'>;
};

db.version(1).stores({
  expenses: '++id, date, category',
  budgets: 'category',
});
```

### Dexie.js — IndexedDB wrapper used for storage.

https://github.com/dexie/Dexie.js

### vite-plugin-pwa — Adds install + offline support.

https://github.com/vite-pwa/vite-plugin-pwa


## Build instructions by tool

### Claude Code

Open a terminal in an empty folder, run `claude`, then paste the prompt.

```text
Build the "Offline Expense Tracker (installable app)" app from the OwnlyPlans blueprint at https://wonly.dhfm.in/builder-4392ac/offline-expense-tracker-pwa/.
Stack: Dexie.js, PWA, React, Tailwind, TypeScript, Vite.
Follow the plan's steps in order: Create the app → Add the database → Add expenses fast → History by month → Monthly budgets → Backup: CSV export and import → Make it installable and offline → Deploy for free.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Claude Code.)
```

### Cursor

Open an empty folder in Cursor, start an Agent chat, then paste the prompt.

```text
Build the "Offline Expense Tracker (installable app)" app from the OwnlyPlans blueprint at https://wonly.dhfm.in/builder-4392ac/offline-expense-tracker-pwa/.
Stack: Dexie.js, PWA, React, Tailwind, TypeScript, Vite.
Follow the plan's steps in order: Create the app → Add the database → Add expenses fast → History by month → Monthly budgets → Backup: CSV export and import → Make it installable and offline → Deploy for free.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Cursor.)
```

### Lovable

Start a new Lovable project and paste the prompt as your first message.

```text
Build the "Offline Expense Tracker (installable app)" app from the OwnlyPlans blueprint at https://wonly.dhfm.in/builder-4392ac/offline-expense-tracker-pwa/.
Stack: Dexie.js, PWA, React, Tailwind, TypeScript, Vite.
Follow the plan's steps in order: Create the app → Add the database → Add expenses fast → History by month → Monthly budgets → Backup: CSV export and import → Make it installable and offline → Deploy for free.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Lovable.)
```

## Definition of done

- Every build step is complete and the app runs locally.
- The main user flow works end to end.
- Share your build on OwnlyPlans with a demo link, build time and tool.