How to vibe codePocketSmith

Prerequisites

• Node.jsfree

  Required runtime for building and running the Next.js full-stack application.

• GitHubfree

  Code repository hosting and deployment integration.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding the full-stack database schema, ledger math engine, and calendar UI.

• Cursor

  Ideal for fine-tuning complex React calendar components and charting dashboards with inline visual feedback.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with Tailwind CSS, configure Turso SQLite via Drizzle ORM, and set up better-auth for secure single-user local access.

   Scramble up a new Next.js project with TypeScript, Tailwind CSS, and Drizzle ORM configured for Turso SQLite. Create database schemas for users, accounts (with currency fields), categories, transactions (amount stored as integer cents using Decimal.js logic), and recurring budget scenarios (frequency: daily, weekly, monthly, yearly, start_date, end_date). Implement better-auth for secure local authentication with email/password and session handling. Ensure all monetary values use integer arithmetic or strict decimal handling to prevent rounding errors. Write automated migration scripts and verify the schema builds cleanly without errors.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Transaction Management & CSV Importer

   Build a flexible CSV import pipeline that maps columns from major bank exports (CSV/OFX) into the transaction ledger, with category assignment and search.

   Build a robust CSV transaction import feature in Next.js. Create a multi-step UI wizard where users upload a bank CSV export, map columns (date, description, amount, account), preview parsed rows, and bulk-insert them into the database. Implement server-side duplicate detection based on date, amount, and description hash. Build a transaction list view with multi-column filtering, search, category assignment, and inline editing. Use Server Actions for all database mutations and validate payloads with Zod.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Temporal Cash Flow Forecasting Engine

   Develop the core financial projection algorithm that simulates daily account balances years into the future based on recurring rules and current balances.

   Implement the core cash-flow forecasting engine. Create a backend calculation service that takes an account's current balance, historical transactions, and active recurring budget events (paychecks, rent, subscriptions) to project daily balances over a user-defined horizon (up to 30 years). Handle recurrence rules (daily, weekly, monthly, custom intervals) efficiently using date-fns. Optimize the calculation loop to execute in-memory or via SQL recursive CTEs so projections for 10 years of daily points render in under 500ms. Expose an API endpoint returning daily projected balance arrays for charting.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Interactive Budget Calendar UI

   Build an interactive calendar view displaying scheduled bills, income events, and daily projected closing balances.

   Build an interactive budget calendar view in React using Tailwind CSS and FullCalendar or a custom grid. The calendar must display historical transactions on past days and projected recurring income/expenses on future days, showing the running daily bank balance at the bottom of each calendar cell. Allow users to click any day to inspect cash flow details, add ad-hoc budget adjustments, or toggle what-if scenarios on and off to see their impact on future balances.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Multi-Currency & Exchange Rate Handling

   Add support for multi-currency accounts with automated daily exchange rate fetching and net worth aggregation.

   Extend the account and transaction models to support multi-currency assets and liabilities. Integrate a free daily exchange rate API (or fallback mock rates) via a scheduled server action to update currency conversion rates. Build a Net Worth dashboard widget that aggregates balances across different foreign currency accounts into a single base currency using latest historical exchange rates. Ensure all multi-currency rollups calculate accurately and display clear conversion indicators in the UI.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Custom Dashboards & Reporting

   Assemble customizable reporting dashboards with income/expense breakdowns, net worth charts, and cash flow statements.

   Build a flexible dashboard and reporting module. Create responsive charts using Recharts for Income vs Expense statements, Net Worth trajectory over time, and Cash Flow monthly summaries. Allow users to create custom dashboard widgets grouping specific accounts and budget categories together. Add polish with loading skeletons, error boundaries, and dark mode support across all views.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for PocketSmith