Dariten

A polished, demo-only personal finance web app in the spirit of a simplified Quicken: accounts, a transaction register, categories, a dashboard, and a monthly budget vs actual view. The in-app product name is Quicken Demo.

This is not production software. There is no login and no remote database. Each browser keeps its own copy of the sample household in IndexedDB. Do not enter real bank credentials or real personal transactions.

Live URL: https://dariten.vercel.app

What is in the demo

• Dashboard — net worth, this month’s income and spending, savings rate, account balances, a spending snapshot, recent activity
• Accounts — checking, savings, credit card, and cash; create/edit; live balances
• Transactions — list, filters (account, category, date range), add/edit/delete, CSV export
• Categories — seeded chart of accounts plus basic management
• Budgets — monthly budget vs actual by expense category

Out of scope: bank sync, investments, multi-user auth, native mobile apps, a shared server-side household.

Where the data lives

The ledger is stored in the browser with Dexie (IndexedDB), database name dariten. Object stores mirror the old account, category, transaction, and budget models. Amounts are integer cents.

• The first visit in a browser writes the sample household when the store is empty (about 4 accounts, 17 categories, 59 transactions, and September 2026 budgets).
• Later edits stay in that browser and survive reloads. Another visitor, another browser, or a private window gets its own copy.
• Reset sample data in the green banner replaces this browser’s ledger with the original sample. It does not affect anyone else.
• You can also delete the dariten database under DevTools → Application → IndexedDB. The next load seeds it again.

The seed records live in lib/seed-data.ts (ported from the old Prisma seed). Pages read a client snapshot and write through lib/db.ts. The happy path does not call a server database.

Stack

Piece	Choice
App	Next.js 16 App Router, React 19, TypeScript
UI	Tailwind CSS 4
Data	IndexedDB via Dexie 4, seeded per browser
Tests	Vitest + Testing Library (finance helpers, seed views, IndexedDB mutations)
Deploy	Vercel (no database env vars)
CI	GitHub Actions (lint → typecheck → unit tests → mabl on production / PR preview)

Environment variables

None are required to run or deploy the demo. Copy .env.example to .env only if you want the optional Mabl identifiers locally.

Variable	Required	Purpose
MABL_API_KEY	CI only	Mabl CI/CD Integration API key — store as a GitHub Actions secret, never commit it
VERCEL_AUTOMATION_BYPASS_SECRET	CI only	Vercel Protection Bypass for Automation — store as a GitHub Actions secret; must match the value in the Vercel project
MABL_WORKSPACE_ID	Optional	Defaults in CI to the Dario Kondratiuk workspace (see below)
MABL_APPLICATION_ID	Optional	Defaults in CI to the Dariten mabl application
MABL_ENVIRONMENT_ID	Optional	Defaults in CI to the Vercel mabl environment

MABL_API_KEY and VERCEL_AUTOMATION_BYPASS_SECRET are secrets. The three Mabl IDs are public identifiers and are hardcoded as workflow defaults.

DATABASE_URL is no longer read. Remove it from the Vercel project (Production, Preview, and Development) when you next tidy env vars. The old Neon project can be paused or deleted; this app will not connect to it.

Local setup

You need Node.js 22+. Postgres, Docker, and Neon are not used.

git clone https://github.com/kblok/dariten.git
cd dariten
npm install
npm run dev

Open http://localhost:3000. The dashboard heading appears without a remote database. The sample household loads from IndexedDB on first visit.

Scripts

Script	What it does
npm run dev	Next.js dev server
npm run build	Production build (no database step)
npm start	Serve the production build
npm run lint	ESLint
npm run typecheck	tsc --noEmit
npm test	Vitest once (used by CI)
npm run test:watch	Vitest watch mode

Vercel

1. Sign in at https://vercel.com and import kblok/dariten if it is not already connected.
2. Framework preset should be Next.js. Build command is npm run build. No output directory override.
3. Do not set DATABASE_URL. The site renders without Neon.
4. Production is https://dariten.vercel.app.

Vercel rebuilds on every push to the connected Git branch. Preview deployments are the same app; each reviewer’s browser still has its own ledger. next build does not open IndexedDB and does not need any database URL at build or runtime.

If this project still has a Neon DATABASE_URL from the previous Postgres demo, delete that variable in the Vercel dashboard so a future build does not look like it depends on it. Nothing in the app reads it.

Tests

npm test

Coverage is unit / component level: money math, filters, validators, CSV export, seed views, IndexedDB create/reset, and the demo banner. There is no Playwright suite in this repo. Cloud browser coverage is intended to come from mabl after MABL_API_KEY is set.

GitHub Actions

.github/workflows/ci.yml on push to main and on pull requests:

1. npm ci
2. npm run lint
3. npm run typecheck
4. npm test

After those tests, mabl jobs start on the matching event (same Dariten application + Vercel environment IDs):

GitHub event	Job	URL
Push to main	Mabl production	https://dariten.vercel.app
Pull request	Mabl preview	That PR’s Vercel Preview URL (app-url override)

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗