This is a debt payoff calculator built to demonstrate the power of TanStack DB combined with Electric SQL for real-time sync.

It helps users organize their debts, choose a payoff strategy (Avalanche vs. Snowball), and visualize their journey to becoming debt-free.

I recorded a deep dive video explaining how this app works and how TanStack DB integrates with Electric SQL.

https://www.youtube.com/watch?v=ae05QlM50DI

• Framework: TanStack Start
• State/Sync: TanStack DB + Electric SQL
• Database: PostgreSQL (ORM: Prisma)
• Auth: Better Auth
• Styling: Tailwind CSS + shadcn/ui

• Zero Latency: Data is updated locally instantly, providing a snappy user experience while syncing happens in the background.
• Real-time Sync: Multi-device synchronization powered by Electric SQL.
• Payoff Strategies: Compare "Snowball" (lowest balance first) vs. "Avalanche" (highest interest first) methods.
• Visualizations: Interactive charts and schedules to see exactly when each debt will be paid off.

Follow these steps to get the app running locally.

• Node.js & pnpm
• Docker (for the database and Electric sync service)

pnpm install

Create a .env.local file in the root directory and add your Google OAuth credentials (for authentication):

GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

Start PostgreSQL and Electric SQL using Docker Compose:

pnpm dc:up

Apply the Prisma schema to your local PostgreSQL instance:

pnpm db:migrate dev

Start the development server:

pnpm dev

Open http://localhost:3000 in your browser.

1. PostgreSQL acts as the source of truth.
2. Electric SQL sits in front of Postgres, providing a sync layer that syncs data to the client.
3. TanStack DB runs in the browser and manages the local database.
4. Server Functions are used to persist changes to the database.

MIT