Loam

Business management PWA for Kwila Development. Built with Vue 3 and SQLite WASM, Loam runs entirely in-browser — no server, no accounts, no data leaving your device.

Currently implements monthly budget tracking as its first feature module.

Architecture

┌─────────────────────────────────────┐
│           Vue 3 Frontend            │
│  (Components, Composables, Router)  │
└─────────────────┬───────────────────┘
                  │
                  ▼
┌─────────────────────────────────────┐
│         sql.js (SQLite WASM)       │
│         In-browser database         │
└─────────────────┬───────────────────┘
                  │
                  ▼
┌─────────────────────────────────────┐
│           IndexedDB                 │
│      (Persistent storage)           │
└─────────────────────────────────────┘

All data lives in the browser. The app loads SQLite compiled to WebAssembly, executes queries locally, and persists the database file to IndexedDB.

Chromium-only — Loam targets Chrome and Edge. Other browsers are not supported.

Features

• Full offline support — all data stored locally via sql.js + IndexedDB; works without network after install
• Monthly budget tracking — category-based expense and income management with per-month budgets
• Income tracking — record income with vendor, date, and notes
• Settings panel — JSON export/import, database reset, storage usage info
• Privacy filter — instantly mask all monetary values with a single toggle (Ctrl+Shift+P)

Tech Stack

Layer	Technology
Framework	Vue 3 (Composition API, <script setup>, plain JS)
Build	Vite
Styling	Plain CSS with design tokens (CSS custom properties)
Database	sql.js (SQLite → WASM) with IndexedDB persistence
PWA	vite-plugin-pwa (service worker + manifest)
Testing	Playwright (E2E)
Task runner	just

No TypeScript. No CSS preprocessors. Mobile-first. Chromium-only.

Getting Started

Prerequisites

• Node.js 22+
• just command runner — installation guide

Setup

# Install dependencies
just deps

# Start the dev server
just dev

# Production build
just build

# Run E2E tests
just test

# Lint source files
just lint

# Format code
just format

PWA Installation

Loam is a Progressive Web App. To install it:

1. Open the app in Chrome or Edge
2. Click the install icon in the address bar (or go to ⋮ → Install Loam)
3. The app launches in its own window with full offline support

All data is stored locally in your browser. Clearing browser data will erase it — use Settings → Export to back up.

Data Layer

src/db.js manages the full database lifecycle:

• sql.js loads SQLite compiled to WASM, executing SQL entirely in-browser
• IndexedDB persistence — the database file is saved to IndexedDB after every write
• Schema migrations — versioned migrations run automatically on startup
• Operation queue — serializes writes to prevent concurrent modification
• Corruption detection — integrity checks with recovery path
• Export/import — full database dump to JSON and restore

Design Tokens

All visual constants live as CSS custom properties on :root in App.vue:

• Typography — font families, size scale, line heights, weights
• Color — semantic palette (primary, success, warning, danger, neutrals)
• Spacing — consistent spacing scale
• Shadows — elevation levels

Components consume tokens exclusively — no hard-coded colors or sizes.

Data Model

Three tables:

Table	Purpose
category	Budget categories with display name and sort order
monthly_budget	Per-category budget amount for a given month
transaction	Individual expense or income entry linked to a category and month

All data is local. Nothing leaves the browser.