Build an Expense Tracker with AI: A Complete Vibe Coding Project

Why an Expense Tracker Is the Perfect First Project

Every "learn to code" course starts with a to-do app. That's fine for understanding the basics, but a to-do app doesn't teach you anything useful about building real software. An expense tracker does.

Here's what you'll actually learn by building this:

• Database CRUD — Create, Read, Update, Delete. Every app you'll ever build does these four things. An expense tracker makes them concrete: add an expense, list expenses, edit a mistake, delete a duplicate.
• Aggregation queries — "Show me total spending by category this month." That's a real SQL aggregation query, and it's the foundation of dashboards, reports, and analytics in any app.
• Data visualization — Turning raw numbers into charts that actually mean something. Pie charts for category breakdowns, bar charts for monthly trends. This is the skill that makes dashboards look professional.
• Data export — Generating a CSV file from database records. Sounds simple, but it touches file generation, data formatting, and browser downloads — patterns you'll reuse constantly.

And here's the practical reason: you'll actually use this app. A to-do app gets deleted. An expense tracker you built yourself — with exactly the categories and views you care about — that becomes part of your daily life. There's no better motivation to maintain and improve a project than actually depending on it.

The Prompt That Builds Your Expense Tracker

This is the prompt that kicks everything off. One prompt, and AI generates a complete working application. Copy it exactly:

That's it. Paste this into Claude, Cursor, or whatever AI coding tool you're using. In about 30 seconds, you'll get a complete project with every feature listed above.

But — and this is important — don't just accept the output blindly. Let's walk through what AI generates, what each piece does, and where things typically go wrong.

What AI Generated — And What Each Piece Does

After that prompt, AI creates roughly 8-12 files. Here's what you'll see and why each piece matters:

The Database Schema

-- Supabase SQL Editor: run this to create your table
CREATE TABLE expenses (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  amount NUMERIC(10,2) NOT NULL,
  category TEXT NOT NULL,
  description TEXT,
  expense_date DATE NOT NULL DEFAULT CURRENT_DATE,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Index for fast monthly queries
CREATE INDEX idx_expenses_date ON expenses(expense_date);

What this does: Creates a single table in your Supabase database to store every expense. Each expense gets a unique ID (UUID), an amount stored to two decimal places, a category, an optional description, and a date. The index at the bottom makes monthly queries fast — without it, the database would scan every row to find expenses in a given month.

If you've never run SQL before: go to your Supabase dashboard, click "SQL Editor" in the sidebar, paste this in, and hit "Run." That's it. Your database is ready. For more on how database changes work, see what database migrations are.

The Supabase Client

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseKey)

What this does: Connects your app to your Supabase database. The URL and key come from your Supabase project settings (Settings → API). The NEXT_PUBLIC_ prefix means these values are available in the browser — that's fine for the anonymous key (it's meant to be public), but never put your service role key here.

The Expense Form Component

AI generates a form component that handles adding new expenses. The key parts:

// The insert operation — this is CRUD's "Create"
const { error } = await supabase
  .from('expenses')
  .insert({
    amount: parseFloat(amount),
    category,
    description,
    expense_date: date
  });

What this does: Takes the form values and inserts a new row into your expenses table. supabase.from('expenses').insert() is the Supabase way of saying INSERT INTO expenses VALUES (...). This is the "C" in CRUD — Create.

The Expense List

// Fetching expenses for a specific month — this is CRUD's "Read"
const { data, error } = await supabase
  .from('expenses')
  .select('*')
  .gte('expense_date', startOfMonth)
  .lte('expense_date', endOfMonth)
  .order('expense_date', { ascending: false });

What this does: Fetches all expenses between the first and last day of the selected month, newest first. .gte() means "greater than or equal to" and .lte() means "less than or equal to" — together they create a date range filter. This is the "R" in CRUD — Read.

The Monthly Summary (Aggregation)

This is where it gets interesting. AI generates code that calculates summary stats from your expense data:

// Calculate monthly totals — aggregation in action
const totalSpent = expenses.reduce((sum, exp) => sum + exp.amount, 0);
const avgDaily = totalSpent / daysInMonth;
const byCategory = expenses.reduce((acc, exp) => {
  acc[exp.category] = (acc[exp.category] || 0) + exp.amount;
  return acc;
}, {} as Record<string, number>);
const topCategory = Object.entries(byCategory)
  .sort(([,a], [,b]) => b - a)[0]?.[0] || 'None';

What this does: Takes your raw list of expenses and calculates four useful numbers: total spending, daily average, spending by category, and which category you spent the most in. The .reduce() function is JavaScript's way of aggregating a list into a single value — AI uses it constantly, and understanding this one pattern unlocks dashboards, reports, and analytics in any app you build.

The Charts

// Pie chart for category breakdown
<PieChart>
  <Pie data={categoryData} dataKey="value" nameKey="name">
    {categoryData.map((entry, index) => (
      <Cell key={index} fill={COLORS[index % COLORS.length]} />
    ))}
  </Pie>
  <Tooltip formatter={(value) => `$${value.toFixed(2)}`} />
  <Legend />
</PieChart>

What this does: Takes your spending-by-category data and turns it into a visual pie chart. Recharts handles all the SVG rendering — you just pass it data in the right shape. categoryData is an array like [{ name: "Food", value: 342.50 }, { name: "Transport", value: 128.00 }]. The Tooltip shows dollar amounts when you hover. The Legend shows which color is which category.

The CSV Export

// Generate and download CSV
function exportToCSV(expenses: Expense[]) {
  const headers = ['Date', 'Category', 'Amount', 'Description'];
  const rows = expenses.map(exp => [
    exp.expense_date,
    exp.category,
    exp.amount.toFixed(2),
    exp.description || ''
  ]);

  const csv = [headers, ...rows]
    .map(row => row.map(cell =>
      `"${String(cell).replace(/"/g, '""')}"`
    ).join(','))
    .join('\n');

  const blob = new Blob([csv], { type: 'text/csv' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `expenses-${selectedMonth}.csv`;
  a.click();
}

What this does: Takes your expense data, formats it as comma-separated values with proper quoting (handles descriptions that contain commas), creates a downloadable file in the browser, and triggers a download. No server needed — this all happens client-side. The .replace(/"/g, '""') part escapes double quotes inside cell values, which is how CSV handles special characters.

The Concepts You Just Learned

Without even trying, you've now worked with five fundamental building blocks of software development. Let's name them so you recognize them in every future project:

Concept	What It Is	Where You Used It
CRUD Operations	Create, Read, Update, Delete — the four database operations	Adding, listing, editing, deleting expenses
Data Aggregation	Combining many records into summary statistics	Monthly totals, category breakdowns, daily averages
Data Visualization	Turning numbers into charts humans can read	Pie chart (categories), bar chart (daily spending)
Client-Side Export	Generating files in the browser without a server	CSV download button
Date Range Filtering	Querying data within a time window	Month picker filtering expenses by date

These aren't expense-tracker-specific skills. Every dashboard, every analytics page, every reporting feature in every SaaS app uses exactly these patterns. When you move on to building a full SaaS app, you'll recognize all of them.

What AI Gets Wrong About Expense Trackers

AI will generate a working expense tracker on the first try about 80% of the time. Here's where the other 20% goes sideways — and how to spot it before it bites you:

How to Debug When Things Break

Your expense tracker will break. Every project does. Here's how to figure out what went wrong without panicking:

Expenses Not Saving

1. Check the browser console (right-click → Inspect → Console tab). Look for red error messages.
2. Check Supabase. Go to your Supabase dashboard → Table Editor → expenses. Is the table there? Are rows appearing?
3. Check your environment variables. The most common cause of "nothing works" is a missing or wrong .env.local file. You need NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.
4. Copy the exact error message and paste it back to your AI tool: "I'm getting this error when I try to add an expense: [error]. Here's my code. What's wrong?"

Charts Not Rendering

1. Check if Recharts is installed. Run npm list recharts in your terminal. If it's not listed, run npm install recharts.
2. Check the data shape. Console.log the data you're passing to the chart. Recharts expects [{ name: "Food", value: 150 }] — if your data looks different, the chart won't render.
3. Check for the empty data bug mentioned above. Add a guard: don't render the chart component if there's no data.

Monthly Totals Look Wrong

1. Check the floating point issue. Are your numbers showing too many decimal places? That's the NUMERIC vs FLOAT issue.
2. Check the date range filter. Console.log your startOfMonth and endOfMonth values. Are they correct? Is the timezone offset causing off-by-one-day errors?
3. Check Supabase directly. Run this query in the SQL Editor: SELECT SUM(amount) FROM expenses WHERE expense_date BETWEEN '2026-03-01' AND '2026-03-31'; If the database total matches your app, the query is fine — the bug is in your display code.

Stretch Goals: Make It Yours

Got the basic tracker working? Here's how to level it up. Each of these is a single prompt away:

🔐 Add Authentication

Turn your personal tracker into a multi-user app. Prompt: "Add Supabase Auth with email/password login. Add a user_id column to the expenses table. Add RLS policies so users can only CRUD their own expenses. Create login and signup pages."

🏷️ Custom Categories

Let users create their own categories instead of using the preset list. Prompt: "Add a categories table (id, name, color, user_id) and let users manage their own categories. Replace the hardcoded dropdown with categories from the database. Include a color picker for chart colors."

📊 Year-Over-Year Comparison

Show spending trends across months. Prompt: "Add a line chart showing total monthly spending for the past 12 months. Include a comparison overlay showing the same month last year if data exists."

🔄 Recurring Expenses

Rent, subscriptions, utilities — things that repeat every month. Prompt: "Add a recurring expenses feature. Users can mark an expense as recurring (monthly, weekly, or yearly). Automatically create new expense entries on the recurrence date. Show recurring vs one-time expenses in the summary."

📱 Progressive Web App (PWA)

Make it installable on your phone. Prompt: "Convert this Next.js app into a PWA with a service worker, manifest.json, and offline support. It should be installable on iOS and Android home screens."

🤖 AI-Powered Categorization

Type "Starbucks $5.50" and let AI figure out it's Food. Prompt: "Add an AI categorization feature. When the user types a description, use the OpenAI API to suggest a category automatically. Show the suggestion as a pre-selected dropdown value that the user can override."

Each stretch goal teaches you a new skill. Authentication teaches you user management. Custom categories teach you relational data (two tables linked together). The PWA goal teaches you deployment for mobile. Pick whatever sounds most useful to you and prompt for it.

Frequently Asked Questions