How to vibe codeExpensify

Prerequisites

• Node.jsFree

  Required runtime for Next.js web application scaffolding.

• GitHubFree

  Source control and deployment pipeline storage.

• Anthropic API KeyPay-as-you-go

  Provides vision capabilities for parsing uploaded receipt images.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding agent for executing complex backend logic and UI scaffolding.

• Cursor

  Ideal AI-native editor for iterative frontend UI adjustments and reviewing diffs.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with Tailwind CSS, configure better-auth, and set up Turso SQLite tables for users, expenses, categories, and expense reports.

   Create a new Next.js 16 project using TypeScript, App Router, and Tailwind CSS. Initialize better-auth with email/password authentication linked to a Turso SQLite database via Drizzle ORM. Create the database schema for users, expenses (id, user_id, amount, currency, merchant, date, category, receipt_url, status), and expense_reports (id, user_id, title, status, total_amount). Ensure strict TypeScript types and provide an initial migration script.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Receipt Upload & Object Storage

   Implement drag-and-drop receipt image uploading and file storage integration using Cloudflare R2 via S3-compatible APIs.

   Build a receipt upload component using Tailwind CSS and shadcn/ui components. Implement a Next.js server action that generates a presigned upload URL for Cloudflare R2 storage, securely accepts PNG and JPEG receipt images up to 10MB, saves the resulting public URL to the state, and creates an initial pending expense record in the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03AI SmartScan Extraction Pipeline

   Integrate Anthropic API vision models to parse uploaded receipt images and automatically extract merchant name, date, total amount, and suggested categories.

   Write a server-side extraction utility using the Anthropic API and Claude Sonnet vision. When a receipt image URL is provided, send the image to the model with a structured JSON schema prompt to extract the merchant name, transaction date, total numerical amount, currency code, and category classification. Automatically populate the expense form fields with the extracted metadata and handle parsing failure edge cases gracefully.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Expense Management Dashboard & Reports

   Build a responsive dashboard displaying unsubmitted expenses, grouped by category and date, with workflows to bundle items into formal expense reports.

   Build a comprehensive dashboard view in Next.js using a responsive table and card layout to display expenses. Implement multi-select filtering by category and date range, an inline editing modal for expense attributes, and a workflow action to bundle selected pending expenses into a new 'Expense Report' object with a calculated aggregate total.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Policy Checking & Audit AI Assistant

   Add a rule engine and conversational AI panel to flag policy violations, duplicate receipt submissions, and spending outliers.

   Implement a policy-check utility that evaluates submitted expense reports against configurable limits (e.g., maximum meal spend of $75, duplicate detection by matching exact amount, date, and merchant). Create a sidebar chat component powered by an LLM agent that allows users to ask questions about their monthly spend totals and view highlighted compliance warnings.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Export & Accounting Formatting

   Implement report export functionality formatting expense line items into standard CSV and QuickBooks-compatible schema templates.

   Build an export feature that formats approved expense reports into downloadable CSV files matching standard QuickBooks Desktop and Xero import requirements. Ensure proper handling of date formats, tax codes, and account string mappings, and include a preview table before file generation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Expensify