I built a time & money tracker that stores everything in your browser

#webdev #privacy #vue #opensource

Every time tracker I tried wanted me to create an account, store my data on their servers, and pay a monthly subscription for basic features.

I just wanted to log my hours and see where my money goes. Privately. Without another SaaS login.

So I built DayTrak — a time and money tracker that runs entirely in your browser. No accounts, no cloud, no subscriptions. Your data never leaves your device.

What it does

DayTrak combines time tracking and personal finance in one workspace:

Time Tracking

Track hours across multiple projects with a built-in timer
Set monthly goals and see pacing indicators (ahead/behind schedule)
Hourly, monthly salary, or hybrid compensation models

Income & Expenses

Recurring and one-time income/expenses with categories
Spending trends, category breakdowns, daily averages
Paid invoices automatically flow into income

Invoicing

Create invoices from tracked hours
Select which entries to include
Track status: Draft → Sent → Paid

Financial Dashboard

Income vs Expenses bar chart (6-month sliding window)
Net balance and savings at a glance
Expense category donut chart

Pivot Table

4 data modes: Time Tracking, Income, Expenses, and All (combined)
Month scope (daily columns) or Year scope (monthly columns)
Context-aware Month/Year toggle

Why local-first?

This is the part that developers usually ask about, so let me explain the architecture.

DayTrak uses Evolu — a local-first framework that runs SQLite directly in the browser via WebAssembly. Your data lives in IndexedDB, queries run locally, and everything works offline.

How it works

Browser
  └── Evolu
       ├── SQLite (via WASM) → stores all data in IndexedDB
       ├── Kysely query builder → type-safe queries
       └── CRDTs → conflict-free sync between devices

There's no server. No database to manage. No API to build. The entire backend is the browser itself.

Why this matters

Privacy by architecture — I can't see your data even if I wanted to. There's no server to hack, no database to leak. Your financial data stays on your device.
Works offline — Open the app on a plane, in a basement, wherever. No internet needed after the first load. It's a PWA — install it and it works like a native app.
Zero infrastructure cost — I serve static files from a CDN. That's it. No servers to maintain, no database backups to manage, no scaling to worry about. This means I can offer it for free forever.
Instant performance — Queries run against a local SQLite database, not over a network. Everything is fast because there's no round-trip to a server.

Multi-device sync (optional)

Evolu includes end-to-end encrypted sync via CRDTs. You get a 24-word recovery phrase — enter it on another device and your data syncs automatically. The relay server only sees encrypted blobs. It can't read your data.

The trade-off

Local-first means if you clear your browser data without a backup, it's gone. That's the honest trade-off. DayTrak mitigates this with:

JSON backup & restore (export everything with one click)
Recovery phrase for multi-device sync
PWA installation (more persistent than a regular tab)

Tech stack

Layer	Technology
Framework	Vue 3 (Composition API)
Language	TypeScript
Build	Vite
Styling	Tailwind CSS v4
Database	Evolu (SQLite + CRDTs)
i18n	vue-i18n (English + Slovak)
Icons	lucide-vue-next
PWA	vite-plugin-pwa

The entire app is about 450KB gzipped. No heavy dependencies, no bloat.

What I learned building it

1. Local-first simplifies everything

No auth system, no API endpoints, no database migrations, no server monitoring. I just write Vue components that read/write to a local database. The development experience is remarkably simple.

2. CRDTs are magic (and sometimes confusing)

Evolu handles conflict resolution automatically. If you edit the same record on two devices, CRDTs merge the changes without conflicts. But "soft deletes" (marking records as deleted rather than removing them) took some getting used to.

3. Financial data needs careful handling

All monetary values are stored as cents (integer strings) to avoid floating-point issues. Dates use local timezone (not UTC) because 00:30 in your timezone is still "today," not "yesterday." These small details matter a lot for a finance app.

4. The pivot table was the hardest feature

Supporting 4 data modes (time tracking, income, expenses, combined) with 2 time scopes (month/year), sticky columns, and responsive scrolling — all in one component — was by far the most complex feature. The component is about 1,300 lines of Vue.

What's next

I'm launching DayTrak with all features free. I want real feedback before deciding on pricing.

Some things I'm considering:

Auto-backup to cloud folders (Google Drive, Dropbox, iCloud via File System Access API)
AI-powered insights (bring your own API key — data stays private)
Bank integration for automatic expense import
Monthly/yearly financial reports