Caudal

Caudal is an installable, offline-first personal finance PWA that brings expenses, income, and subscriptions into one clear, calm view of your finances.

Go to website

Project Overview

Caudal is a personal finance manager built as an installable, offline-first PWA. It brings expenses, income, and subscriptions into a single, calm view of your finances, with a responsive design that adapts from mobile bottom-nav layouts to a full desktop sidebar/dashboard experience.

All data lives on the user's device by default (IndexedDB via Dexie), so the app works fully offline with no account or server required to get started — with an optional Supabase-backed sync layer for multi-device use.

Key Features

  • Monthly Overview: Balance, income, expenses, savings rate, and upcoming payments at a glance
  • Expenses & Income: Category breakdowns with quick entry via a floating action button
  • Subscriptions: Monthly/annual cost tracking with upcoming payments in the next 30 days
  • Reports: Monthly and annual views with savings evolution and category charts
  • Privacy Mode: One tap to mask all amounts on screen
  • Installable & Offline-First: Full PWA with service worker, manifest, and offline support
  • Responsive by Design: Dedicated mobile layout (bottom nav + FAB) and desktop layout (sidebar + multi-column dashboard) sharing the same data model

Architecture Overview

  • Frontend: React 18 + TypeScript (Vite) + TailwindCSS
  • Local Persistence: Dexie (IndexedDB) with dexie-react-hooks for reactive queries
  • Sync & Auth: Supabase, with Google Identity Services for client-side login
  • PWA Layer: vite-plugin-pwa (Workbox) for manifest, service worker, and installability
  • Landing Page: A separate, minimal Vite + React + TypeScript site with self-hosted fonts and a subsetted Material Symbols icon set for fast, GDPR-clean loading

What I Built

  • End-to-End Product: Designed and built the app from data model to UI, covering both the PWA and its landing page
  • Offline-First Data Layer: Local-first persistence with Dexie/IndexedDB and an optional Supabase sync layer for cross-device use
  • Responsive Dual Layout: A single codebase powering distinct, purpose-built mobile and desktop experiences via a media-query hook
  • Reporting & Charts: Monthly and annual reports with savings evolution and category breakdowns
  • Privacy-Conscious UX: A one-tap privacy mode that masks all financial amounts
  • Lightweight Marketing Site: A fast, self-hosted-fonts landing page optimized for load speed and SEO

Key Technologies Used

  • React
  • TypeScript
  • Vite
  • TailwindCSS
  • Dexie (IndexedDB)
  • Supabase
  • Google Identity Services
  • Workbox / vite-plugin-pwa

Current Status

Caudal is live and actively evolving, with ongoing work on reporting, recurring income/expenses, and sync reliability across devices.