How to vibe codeMonarch

Prerequisites

• Node.jsfree

  Runtime environment for the Next.js full-stack web application framework.

• GitHubfree

  Version control and integration repository for deployment pipelines.

• 

  Plaid Developer Accountfree tier available

  Provides sandbox and production bank connection API credentials for financial data sync.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding database schemas, API routes, and complex dashboard UI components.

• Cursor

  AI code editor for iterative frontend tweaking, managing CSS charts, and refining layout responsiveness.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js 16 project with Tailwind CSS, configure better-auth with a local SQLite/Postgres adapter, and set up relational database models in Neon for users, accounts, transactions, categories, and budgets.

   Scaffold a new Next.js project using App Router and TypeScript. Install Tailwind CSS and configure better-auth for secure user authentication with email/password and session management. Connect the project to Neon Postgres using Drizzle ORM. Define the relational database schema with tables for users, bank_accounts (id, user_id, name, type, balance), categories (id, user_id, name, group_name), transactions (id, user_id, account_id, category_id, amount, date, merchant_name, is_reviewed, notes), and budgets (id, user_id, category_id, target_amount, month). Ensure foreign key constraints and proper indexing on user_id and date fields.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Dashboard Layout and Financial Widgets

   Build a customizable financial dashboard UI featuring drag-and-drop or modular widget grids, net worth summary cards, and responsive cash flow charts using Recharts.

   Build a responsive dashboard page in Next.js App Router with a sidebar navigation and modular widget grid layout. Create React components using Recharts to visualize net worth over time, monthly cash flow, and spending breakdown by category group. Implement server actions to fetch aggregated asset and liability totals from the database and calculate current net worth dynamically. Ensure the UI matches a clean, modern fintech aesthetic with clear typography and dark/light mode support.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Transaction Feed, Search, and Manual Review

   Develop the unified transaction list with advanced filtering, search, inline category editing, and the 'Needs Review' flag workflow popularized by Monarch.

   Build a comprehensive transactions page featuring a searchable, filterable data table of all user transactions across accounts. Add server actions to update transaction categories, toggle the 'is_reviewed' status flag, and add custom notes. Implement a batch selection toolbar to mark multiple transactions as reviewed or assign categories simultaneously. Include pagination and debounce search inputs for merchant names and descriptions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Bank Aggregation via Plaid Link

   Integrate the Plaid API to handle Link token creation, public token exchanges, account syncing, and webhook processing for transaction ingestion.

   Integrate the Plaid Node.js SDK into the backend API routes. Create an endpoint to generate a Plaid Link token and a callback endpoint to exchange public tokens for access tokens, saving institution details and account metadata to the database. Implement a sync service endpoint that calls Plaid's /transactions/sync API to fetch new and modified transactions, mapping raw merchant data to user accounts. Handle errors gracefully for invalid item login states and expired credentials.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AI Transaction Classification Engine

   Implement an automated categorization engine using OpenAI API and Vercel AI SDK to clean raw bank data and assign smart category predictions.

   Implement an AI transaction classification service using the Vercel AI SDK and OpenAI API. When new transactions are imported from Plaid or CSV, pass raw merchant strings and amounts to a structured JSON prompt that predicts the correct user category ID and cleans the merchant display name. Build a background batch processing routine or server action to run categorization on unassigned transactions automatically.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Flexible Budgeting and Multi-Party Collaboration

   Construct the budgeting module supporting category and flexible budgeting styles, along with household member sharing permissions.

   Build a budgeting view supporting category-based limits and flexible monthly targets. Allow users to set monthly spending caps per category and track progress with visual progress bars and rollover balances. Additionally, implement a household collaboration feature allowing users to invite a partner via email, granting shared access to view and edit accounts, transactions, and budgets under a unified household identifier.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Monarch