How to vibe codeSplitwise

Prerequisites

• Node.jsfree

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

• GitHubfree

  Code repository hosting and seamless deployment integration with Cloudflare.

• Cloudflare$0-5/mo

  Hosting platform for edge deployment and serverless database storage.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding full-stack CRUD schemas and complex algorithms.

• Cursor

  AI code editor ideal for refining UI components, forms, and split configuration tables.

Build guide

1. 01Scaffold Project and Database Schema

   Initialize a Next.js TypeScript project configured for Cloudflare D1 with better-auth integration and relational tables for users, groups, group_members, expenses, split_shares, and settlements.

   Create a new Next.js 16 project with Tailwind CSS and TypeScript configured to deploy on Cloudflare Workers using OpenNext. Set up better-auth with email/password authentication. Create a SQLite migration script using Cloudflare D1 containing tables: users (id, name, email, password_hash), groups (id, name, created_at), group_members (group_id, user_id), expenses (id, group_id, description, amount, currency, payer_id, created_at), split_shares (id, expense_id, user_id, owed_amount), and settlements (id, payer_id, payee_id, amount, currency, created_at). Ensure all foreign key constraints and indexes are correctly defined for fast balance lookups.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Implement Core Expense CRUD and Split Configurations

   Build the expense creation form supporting equal splits, percentage splits, exact amounts, and itemized calculations.

   Build a responsive expense creation modal in Next.js using Tailwind CSS. The form must allow entering a description, total amount, currency, selecting a group or friend, choosing who paid, and configuring split methods: 'equal' (divide equally among selected members), 'exact' (assign specific dollar amounts per person, validating sum equals total), and 'percentage' (assign percentages summing to 100). Implement Server Actions to handle expense creation, storing header records in 'expenses' and individual rows in 'split_shares' using database transactions to ensure atomicity.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Build Debt Simplification Graph Engine

   Implement the core debt simplification algorithm that computes minimized directed transactions among group members.

   Implement a TypeScript utility function for debt simplification within a group. The function must query all expenses and settlements for a given group, calculate net balances for every user (total paid minus total owed), separate users into creditors (positive net balance) and debtors (negative net balance), and compute an optimal minimized set of directed payment transactions to settle all debts. Handle floating-point rounding precision carefully using integer cents representation. Display the simplified settlement plan in a dedicated 'Simplify Debts' tab on the group page.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Develop Dashboard, Balances, and Friend Views

   Create the main dashboard displaying total balances, individual friend ledgers, and group summaries.

   Build the main dashboard view in Next.js. It should feature a sidebar for groups and friends, a central activity feed showing recent expenses and settlements, and a summary header displaying total user balance ('you are owed X' / 'you owe Y'). Implement dedicated detail pages for individual friends and groups that list mutual expense history and running balances. Include a 'Settle Up' button that opens a settlement recording modal to log cash or external payments between two users.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Add Receipt Scanning OCR with AI

   Integrate an AI-powered vision endpoint to parse receipt images and extract itemized split items.

   Implement an OCR receipt scanning feature using the OpenAI API and Vercel AI SDK. Add a file upload component to the expense form where users can upload a receipt image or PDF. Create a server action that sends the image to the vision model with a structured prompt requesting item names, prices, and taxes in JSON format. Automatically populate the expense description and exact split line items on the frontend from the parsed JSON response, allowing users to review and adjust before saving.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Splitwise