How to vibe codeAuritrack

Prerequisites

• Node.jsfree

  Required runtime for modern full-stack web development and package management

• GitHubfree

  Source control and deployment pipeline integration

• Anthropic API Keypay-as-you-go (~$5-10/mo)

  Powering the natural language expense parser and bank statement extraction engine

• 

  Telegram Bot Tokenfree

  Creating the custom Telegram bot interface via BotFather

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding the full Next.js application, database schema, and LLM parsing pipelines end-to-end

• Cursor

  Ideal AI-native code editor for refining UI components, dashboards, and debugging frontend state interactions

Build guide

1. 01Scaffold Next.js App & Database Schema

   Initialize the Next.js project with Tailwind CSS and shadcn/ui components, configure better-auth, and set up relational database tables in Neon for users, transactions, categories, and budgets.

   Initialize a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up better-auth for secure email/password authentication connected to a Neon serverless Postgres database. Create a robust database schema using Drizzle ORM or Prisma with tables for `users`, `accounts`, `transactions` (id, user_id, amount, currency, category, date, merchant, notes, source), `budgets` (id, user_id, category_id, monthly_limit), and `telegram_links` (user_id, telegram_chat_id). Ensure all foreign keys have proper indexes and cascade rules.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Build Natural Language Parser & Dashboard UI

   Create the core dashboard UI and implement the Vercel AI SDK pipeline to parse plain English expense statements into structured JSON records.

   Build a responsive finance dashboard in Next.js featuring a summary overview (total spent, budget remaining, category breakdown charts), a manual transaction entry modal, and a prominent natural language input bar ("spent $2,500 on rent"). Implement a backend API route using the Vercel AI SDK and Anthropic Claude model with `generateObject` to parse unstructured text inputs into strict JSON matching the transaction schema (amount, currency, category, merchant, date, split details). Handle error recovery for ambiguous strings and display success feedback instantly in the UI.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Implement Bank Statement File Upload & Extraction

   Build document ingestion supporting PDF, CSV, and Excel file uploads, extracting text and mapping raw rows into clean transactions using LLM batch processing.

   Implement a secure file upload dropzone supporting PDF bank statements, CSV files, and Excel spreadsheets. Use `pdf-parse` and xlsx libraries to extract raw text and tabular rows from uploaded files. Pass the extracted text in chunks to a background server action utilizing Claude API with structured JSON output schema to identify transaction rows, normalize dates, clean up messy merchant descriptions, categorize spending, and filter out duplicates. Display a preview table for user review before bulk-inserting verified transactions into the Neon database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Set Up Telegram Bot Integration

   Deploy a webhook-backed Telegram bot using Telegraf to allow text-based expense logging and balance queries directly inside chat.

   Create a Telegram bot webhook endpoint in Next.js using the Telegraf framework. Implement user account linking where a user connects their Telegram account to their web app profile via a secure auth token command (`/link <token>`). Handle incoming chat messages so that when a user messages the bot naturally (e.g., 'spent 4000 on lunch' or 'how much did I spend on transport this week?'), the bot queries the Neon database using LLM tool calling, logs the transaction or computes the summary, and replies directly in the chat with formatted results.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Add AI Insights, Forecasting & Polish

   Implement conversational AI query tools for financial analysis, budget alerts, and PDF/CSV report exports.

   Add an AI financial advisor chat interface where users can ask complex questions ("Where did most of my money go last month?" or "Show me subscriptions to cut"). Build an endpoint that computes spending aggregates and feeds them into Claude to generate conversational insights and predictive forecasts. Finally, implement a PDF report generator using `jspdf` or React-PDF that exports clean, printable monthly financial summaries and CSV statement downloads. Polish UI states, loading spinners, and error boundaries across all views.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Auritrack