Personal Finance Management Web Application
Velvet is a local-first personal finance app. All records live in the browser's IndexedDB — there is no backend. Card-payment SMS messages are captured on iOS, pushed to a Google Sheet, and imported into the app on demand.
-
📊 Dashboard
- Income/expense overview with period comparison
- Spending limit against total budget
- Profit/loss chart and recent transaction list
- Regular-payment timeline (currently fed by static sample data)
- On-device AI budget insights (Chrome built-in
LanguageModel)
-
📝 Transactions
- Date-grouped list with expandable rows
- Search, category filter and date range
- Bulk selection, edit and delete
- Detail modal per transaction
-
🔄 Google Sheets Sync
- OAuth connection and spreadsheet selection
- Imports unprocessed rows into IndexedDB, then marks them processed in the sheet
- Pending-count banner with reconnect handling
- iOS Shortcut + Apps Script setup guide built into the app
- Dashboard page
- Transactions page (list, search, filter, bulk actions)
- Settings page (Google Sheets connection, sync, iOS Shortcut guide)
- IndexedDB persistence layer
- AI budget insights
- Budget page — components are scaffolded but no route is wired yet
- AI insights for spending (budget side only for now)
- Savings goals and streak
- Account/card management
- Excel export
- Bookmarks
| Area | Choice |
|---|---|
| Framework | React 18, TypeScript 5.9, Vite 6 |
| Routing | react-router-dom 7 |
| Server state | @tanstack/react-query 5 |
| Persistence | IndexedDB via idb (velvet-db) |
| Forms / validation | react-hook-form + zod |
| Charts | Recharts, D3 |
| Styling | Tailwind CSS 3.4 |
| Overlays | overlay-kit, framer-motion |
| Lint / format | oxlint, Prettier |
git clone https://github.com/jihunhong/velvet.git
cd velvet
npm installGoogle Sheets sync needs an OAuth client ID. Create a .env in the project root:
VITE_GOOGLE_CLIENT_ID=<your-google-oauth-client-id>The rest of the app works without it — only the Settings sync section is affected.
npm run dev| Command | Description |
|---|---|
npm run dev |
Start the Vite dev server on port 5173 |
npm run build |
Type-check (tsc -b) and build for production |
npm run lint |
Run oxlint |
npm run lint:fix |
Run oxlint with --fix |
npm run preview |
Preview the production build |
npm run screenshot |
Seed sample data and capture a dashboard screenshot into docs/assets |
- Development Period: 2024.03.31 ~
- Developer: @jihunhong
Built with ❤️ by @jihunhong