# How to Build Budgeting tool with V0

- Tool: v0
- Difficulty: Intermediate
- Compatibility: V0 Premium or higher
- Last updated: April 2026

## TL;DR

Build an envelope budgeting tool with V0 using Next.js, Supabase, and Recharts. You'll get income allocation into spending categories, per-transaction tracking, real-time envelope balances with visual Progress bars, and CSV bank statement import — all in about 1-2 hours without local setup.

## Before you start

- A V0 account (Premium plan recommended for multi-feature builds)
- A Supabase project (free tier works — connect via V0's Connect panel)
- A bank statement in CSV format for testing the import feature (optional)

## Step-by-step guide

### 1. Set up the database schema with budget and envelope tables

Create a new V0 project, connect Supabase via the Connect panel, and create the budgets, envelopes, and transactions tables. Add a database trigger that recalculates the spent amount on each envelope whenever transactions change.

```
// Paste this prompt into V0's AI chat:
// Build an envelope budgeting tool with Supabase. Create these tables:
// 1. budgets: id (uuid PK), user_id (uuid FK to auth.users), name (text), month (date), total_income (numeric), created_at (timestamptz)
// 2. envelopes: id (uuid PK), budget_id (uuid FK), category (text), allocated (numeric), spent (numeric default 0), color (text)
// 3. transactions: id (uuid PK), envelope_id (uuid FK), user_id (uuid FK), amount (numeric), description (text), date (date), type (text CHECK in 'expense','income','transfer'), created_at (timestamptz)
// Add a database trigger: on transactions INSERT/UPDATE/DELETE, recalculate envelopes.spent as SUM of related expense transactions.
// Add RLS so each user sees only their own budgets, envelopes, and transactions.
```

> Pro tip: Use Design Mode (Option+D) to visually adjust envelope Card colors, Progress bar styling, and the dashboard grid layout for free — iterate on the visual design without spending credits.

**Expected result:** Supabase is connected with all tables created, the trigger auto-recalculates envelope spent amounts, and RLS policies are in place.

### 2. Build the monthly budget overview with envelope Cards

Create the main budget page that shows all envelopes for the current month as color-coded Cards with Progress bars. Each Card displays the category name, allocated amount, spent amount, remaining amount, and a visual progress indicator.

```
// Paste this prompt into V0's AI chat:
// Build a budget overview page at app/budget/page.tsx (Server Component).
// Requirements:
// - Fetch the current month's budget and envelopes from Supabase
// - Display summary Cards at the top: Total Income, Total Allocated, Total Spent, Remaining
// - Show each envelope as a Card with:
//   - Category name and color indicator dot
//   - Progress bar (shadcn/ui Progress) showing spent/allocated ratio
//   - Text showing "$X of $Y spent" and remaining amount
//   - Progress color changes: green (<70%), yellow (70-90%), red (>90%)
// - Add a "New Envelope" Button that opens a Dialog for creating an envelope
// - Add a PieChart (Recharts) showing spending distribution across envelopes
// - Month selector at the top to switch between months
// - If no budget exists for the current month, show a "Create Budget" CTA
```

**Expected result:** The budget page shows envelope Cards with color-coded Progress bars, summary statistics, and a PieChart for spending distribution.

### 3. Create the transaction management system

Build the transaction entry form and history view. Users can add expenses, income, or transfers with category assignment. The database trigger automatically updates the envelope's spent amount.

```
'use server'

import { createClient } from '@supabase/supabase-js'
import { revalidatePath } from 'next/cache'

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
)

export async function addTransaction(
  userId: string,
  envelopeId: string,
  amount: number,
  description: string,
  date: string,
  type: 'expense' | 'income' | 'transfer'
) {
  const { error } = await supabase.from('transactions').insert({
    envelope_id: envelopeId,
    user_id: userId,
    amount,
    description,
    date,
    type,
  })

  if (error) throw new Error(error.message)
  revalidatePath('/budget')
}

export async function deleteTransaction(transactionId: string) {
  const { error } = await supabase
    .from('transactions')
    .delete()
    .eq('id', transactionId)

  if (error) throw new Error(error.message)
  revalidatePath('/budget')
}

export async function rolloverBudget(userId: string, currentBudgetId: string) {
  const { data: currentEnvelopes } = await supabase
    .from('envelopes')
    .select('category, allocated, color')
    .eq('budget_id', currentBudgetId)

  const nextMonth = new Date()
  nextMonth.setMonth(nextMonth.getMonth() + 1)
  nextMonth.setDate(1)

  const { data: newBudget } = await supabase.from('budgets').insert({
    user_id: userId,
    name: nextMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }),
    month: nextMonth.toISOString().split('T')[0],
    total_income: 0,
  }).select().single()

  if (newBudget && currentEnvelopes) {
    await supabase.from('envelopes').insert(
      currentEnvelopes.map((e) => ({
        budget_id: newBudget.id,
        category: e.category,
        allocated: e.allocated,
        color: e.color,
      }))
    )
  }

  revalidatePath('/budget')
}
```

**Expected result:** Users can add and delete transactions. The database trigger recalculates envelope spent amounts automatically. Month rollover clones envelope allocations.

### 4. Build the transaction history page with filters

Create a detailed transaction view with filtering by date range, envelope category, and transaction type. Include a sortable Table and the ability to export filtered results.

```
// Paste this prompt into V0's AI chat:
// Build a transactions page at app/transactions/page.tsx.
// Requirements:
// - Table of all transactions with columns: Date, Description, Category (from envelope), Amount, Type Badge
// - Date range filter using two DatePicker components (from and to)
// - Select filter for envelope/category
// - Select filter for type (expense, income, transfer)
// - Sortable columns (click header to sort by date, amount)
// - Amount shows negative for expenses (red) and positive for income (green)
// - "Add Transaction" Button opens a Dialog with:
//   - Select for envelope (fetches from current month's envelopes)
//   - Input for amount with currency formatting
//   - Input for description
//   - DatePicker for date
//   - RadioGroup for type (expense, income, transfer)
// - Use Server Components for initial data fetch with client-side filter state
```

**Expected result:** The transactions page shows a filterable, sortable table of all transactions with a form dialog for adding new entries.

### 5. Add CSV bank statement import

Create an API route that accepts CSV file uploads, parses them with papaparse, and imports transactions with basic category matching based on description keywords.

```
import { NextRequest, NextResponse } from 'next/server'
import { createClient } from '@supabase/supabase-js'
import Papa from 'papaparse'

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
)

export async function POST(req: NextRequest) {
  const formData = await req.formData()
  const file = formData.get('file') as File
  const userId = formData.get('user_id') as string
  const budgetId = formData.get('budget_id') as string

  const text = await file.text()
  const { data: rows } = Papa.parse(text, { header: true, skipEmptyLines: true })

  const { data: envelopes } = await supabase
    .from('envelopes')
    .select('id, category')
    .eq('budget_id', budgetId)

  const transactions = (rows as Record<string, string>[]).map((row) => {
    const amount = Math.abs(parseFloat(row.Amount || row.amount || '0'))
    const description = row.Description || row.description || ''
    const date = row.Date || row.date || new Date().toISOString().split('T')[0]
    const type = parseFloat(row.Amount || '0') < 0 ? 'expense' : 'income'

    const matchedEnvelope = envelopes?.find((e) =>
      description.toLowerCase().includes(e.category.toLowerCase())
    )

    return {
      envelope_id: matchedEnvelope?.id || envelopes?.[0]?.id,
      user_id: userId,
      amount,
      description,
      date,
      type,
    }
  }).filter((t) => t.envelope_id && t.amount > 0)

  const { error } = await supabase.from('transactions').insert(transactions)
  if (error) return NextResponse.json({ error: error.message }, { status: 500 })

  return NextResponse.json({ imported: transactions.length })
}
```

**Expected result:** Uploading a CSV file parses the transactions, matches them to envelopes by description keywords, and bulk-inserts them into Supabase.

## Complete code example

File: `app/actions/budget.ts`

```typescript
'use server'

import { createClient } from '@supabase/supabase-js'
import { revalidatePath } from 'next/cache'

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
)

export async function addTransaction(
  userId: string,
  envelopeId: string,
  amount: number,
  description: string,
  date: string,
  type: 'expense' | 'income' | 'transfer'
) {
  const { error } = await supabase.from('transactions').insert({
    envelope_id: envelopeId,
    user_id: userId,
    amount,
    description,
    date,
    type,
  })
  if (error) throw new Error(error.message)
  revalidatePath('/budget')
}

export async function updateEnvelopeAllocation(
  envelopeId: string,
  allocated: number
) {
  const { error } = await supabase
    .from('envelopes')
    .update({ allocated })
    .eq('id', envelopeId)
  if (error) throw new Error(error.message)
  revalidatePath('/budget')
}

export async function rolloverBudget(
  userId: string,
  currentBudgetId: string
) {
  const { data: envelopes } = await supabase
    .from('envelopes')
    .select('category, allocated, color')
    .eq('budget_id', currentBudgetId)

  const nextMonth = new Date()
  nextMonth.setMonth(nextMonth.getMonth() + 1)
  nextMonth.setDate(1)

  const { data: budget } = await supabase
    .from('budgets')
    .insert({
      user_id: userId,
      name: nextMonth.toLocaleDateString('en-US', {
        month: 'long',
        year: 'numeric',
      }),
      month: nextMonth.toISOString().split('T')[0],
      total_income: 0,
    })
    .select()
    .single()

  if (budget && envelopes) {
    await supabase.from('envelopes').insert(
      envelopes.map((e) => ({
        budget_id: budget.id,
        category: e.category,
        allocated: e.allocated,
        color: e.color,
      }))
    )
  }
  revalidatePath('/budget')
}
```

## Common mistakes

- **Calculating envelope balances in JavaScript instead of the database** — Client-side or server-side balance calculations can get out of sync if transactions are added from multiple devices or the calculation logic has bugs. Fix: Use a Supabase database trigger that recalculates envelopes.spent as the SUM of related expense transactions on every INSERT, UPDATE, and DELETE. The database is always the single source of truth.
- **Not handling month boundaries in date queries** — Filtering transactions by month using string comparison (e.g., LIKE '2026-04%') fails for edge cases around midnight UTC and timezone boundaries. Fix: Use proper date range queries: gte('date', firstDayOfMonth) and lte('date', lastDayOfMonth) with correctly calculated boundary dates.
- **Allowing negative envelope balances without warning** — The whole point of envelope budgeting is to prevent overspending. If users can overspend without any visual feedback, the budgeting method fails. Fix: Change the Progress bar color to red when spent exceeds allocated. Show a warning Badge on overdrawn envelopes and optionally block new transactions to that envelope.

## Best practices

- Use database triggers to recalculate envelope spent amounts — the database is always the single source of truth
- Use Server Components for the budget overview page to keep Supabase queries server-side and improve performance
- Use Design Mode (Option+D) to visually adjust envelope Card colors, Progress bar styling, and chart themes without spending credits
- Color-code Progress bars based on spending ratio: green (<70%), yellow (70-90%), red (>90%) for instant visual feedback
- Use RLS policies so each user can only see and modify their own budgets, envelopes, and transactions
- Store all monetary values as numeric type in Supabase (not float) to avoid floating-point precision errors
- Use revalidatePath('/budget') in every Server Action that modifies data to keep the dashboard current
- Implement the month rollover as a Server Action rather than a cron job so users control when the new month starts

## Frequently asked questions

### What is envelope budgeting and how does this app implement it?

Envelope budgeting divides your income into categories (envelopes) with set spending limits. This app creates digital envelopes in Supabase, tracks every transaction against its envelope, and shows visual Progress bars so you can see at a glance how much is left in each category.

### How does the automatic balance recalculation work?

A Supabase database trigger fires on every transaction INSERT, UPDATE, or DELETE. It recalculates the envelope's spent column as the SUM of all related expense transactions. This happens at the database level, so balances are always accurate regardless of how transactions are created.

### What V0 plan do I need for a budgeting tool?

V0 Premium is recommended because the budgeting tool requires multiple pages (overview, transactions, import), charts, and Server Actions. The free plan's credits may not cover the full build.

### Can I import transactions from my bank?

Yes. The CSV import feature accepts standard bank statement exports. It parses the file with papaparse and attempts to match transactions to envelopes based on description keywords. You can manually reassign categories after import.

### How do I deploy the budgeting tool?

Click Share then Publish to Production in V0 for instant Vercel deployment. All data is stored in Supabase with RLS policies ensuring each user only sees their own budget data.

### Can RapidDev help build a custom budgeting or finance tool?

Yes. RapidDev has built 600+ apps including complex financial tools with bank integrations, automated categorization, and custom reporting. Book a free consultation to discuss your budgeting tool requirements.

---

Source: https://www.rapidevelopers.com/how-to-build-v0/budgeting-tool
© RapidDev — https://www.rapidevelopers.com/how-to-build-v0/budgeting-tool