How to vibe codeEveryDollar

Prerequisites

• Node.jsfree

  Runtime environment for running the full-stack Next.js application.

• GitHubfree

  Version control and deployment pipeline connection.

AI coding tools

• Claude Code

  Terminal-based AI coding agent ideal for scaffolding full-stack CRUD apps and managing multi-file state logic.

• 

  Cursor

  AI-native code editor for fine-tuning UI components, form inputs, and budgeting tables.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure better-auth, and set up the SQLite database schema via Turso with tables for budgets, category groups, categories, and transactions.

   Create a new Next.js project configured with TypeScript and Tailwind CSS. Set up a SQLite database schema using Drizzle ORM or Prisma for a personal budgeting application. Include tables for 'budgets' (id, user_id, month, year), 'category_groups' (id, budget_id, name, type: 'income'|'expense'), 'categories' (id, group_id, name, budgeted_amount), and 'transactions' (id, category_id, amount, date, payee, notes). Ensure foreign key constraints and indexes are correctly defined.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Single-User Setup

   Implement better-auth for secure email/password access so your personal financial data remains private.

   Integrate better-auth into the Next.js application to handle user authentication with email and password. Create a secure login screen and protect all budget routes so only the authenticated owner can view or modify financial data.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Zero-Based Budget Dashboard UI

   Build the main budgeting interface featuring income rows, expense category groups, and real-time calculations for 'Planned', 'Spent', and 'Remaining' amounts.

   Build a responsive zero-based budget dashboard in React/Next.js. The view should display income sources at the top, followed by collapsible category groups (e.g., Giving, Savings, Housing, Food). For each category, show columns for 'Planned' amount and 'Spent' amount, calculating the remaining balance dynamically. Include a top summary banner showing Total Income minus Total Planned Expenses, aiming for a net zero balance.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Transaction Management & Expense Logging

   Implement forms and modal workflows to add, edit, and assign transactions to specific budget categories, updating spent balances instantly.

   Create a transaction management component and API endpoints allowing manual entry of expenses and income. Users should be able to specify amount, date, payee, and assign the transaction to a specific budget category. When a transaction is added, automatically update the corresponding category's 'spent' total and re-render the budget table state.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Debt Snowball Calculator Module

   Add a dedicated tab for tracking debts using the Ramsey debt snowball method (listing debts smallest to largest balance).

   Build a debt snowball calculator page. Allow users to input multiple debts (name, balance, minimum payment, interest rate). Sort the list automatically from smallest balance to largest balance to follow the Ramsey debt snowball method. Include an interactive payoff progress tracker that shows estimated debt-free dates when extra monthly payments are applied.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Monthly Rollover & Polish

   Add month-navigation headers to switch between budgeting months and polish the UI with clean typography and dark mode support.

   Implement a month-navigation header (Previous Month / Current Month / Next Month) that filters budget categories and transactions by the selected month and year. Add a button to copy budget categories from the previous month into a new month. Polish the UI with clean Tailwind utility styling, clean card layouts, and proper number formatting for currency.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for EveryDollar