vibe coding

in an effort to work on shipping rather than learning (and hopefully learning in the process), im going to use AI tools only to build a personal finance application. it will have a front end and backend and hit all of my use cases. im going to prototype and have a working front end using vercel then switch over to an AI IDE to finish up work on the backend.

okay lets go.

first im going to refine a prompt using chatgpt, here’s what i said:

Im going to use the V0 tool to design a front end for my personal finance application. the tool can only work on front end code in react and using next framework. it should use dummy data that gets passed through fake server side code. here’s how it should work: 

  • the application should have a dashboard for metrics on spend, categories, etc. the crucial thing to view on the dashboard page is to be able to see net worth

  • Another important feature is to have credit cards, debit cards, checking accounts, and personal loans (car loans, affirm, etc). There should also be loan outs

  • For the credit cards, you should have details that are relevant to the card so the name, the balance, the credit limit, the available credit, and the next due date for the card

  • For loans, you should have APR and payment history 

  • I want to see all my available credit (the sum of all the credit on all my credit cards) 

  • I want to know how much debt im in (this should be in 3 diff categories— from loans (not credit card), from credit cards (only credit cards), and then total debt (the sum of both)

  • Then I want to see my total cash

  • I want to see my net worth (with loans— this will probably be negative for the next year) and excluding loans ( but total liquid - credit card (keep credit cards since I pay that off at the end of every month) 

  • I also have recurring expenses that are listed out

  • I want a page for recurring transactions

  • When you click on each card or account you should be able to see all transactions, transactions should have relevant transaction details like date, amount, cost, card/account charged to, etc. 

  • Some transactions on credit cards should be linked to transactions on checking accounts 

  • This implies that paying off a card is a transaction and transactions can occur on multiple areas

  • Think through all the categories that transactions can have (Groceries, Self Development, Eating/Drinking out, Misc, Housing, Transportation, Utilities, Health, Personal Care, Entertainment, Gifts, clothing, Education, travel, Payment). You can include others or refine this list and consolidate. 

• ⁃ Each account should have their own page or side panel or somethign they can be explored. There should be a quick toggle to add transactions on both the dashboard and on the specific page for each account (credit card, loan, checking, etc)

this was the refinement:

Subject: Personal Finance App Front-End Specification (React/Next.js)

Overview:
I need a front-end design for my personal finance application built using React and Next.js. The application will rely on dummy data served via fake server-side code (using Next.js API routes) to simulate asynchronous API calls. The primary focus is to present a comprehensive financial dashboard along with detailed views for various accounts and transactions.

Requirements & End-Goal Document:

  1. General Architecture & Data Flow:

    • Framework: React with Next.js.
    • Data Handling: Use dummy data passed from fake server-side code (API routes) to simulate backend calls.
    • Routing Structure:
      • Dashboard Page (/): Main landing page with overall financial metrics.
      • Account Detail Pages (/accounts/[id]): Each financial account (credit cards, loans, checking accounts, etc.) gets its own view.
      • Recurring Transactions Page (/recurring): A dedicated page for managing and viewing recurring expenses.

  2. Dashboard Requirements:

    • Metrics Overview:
      • Net Worth: Show both “with loans” and “excluding loans” calculations.
      • Available Credit: Display the total available credit across all credit cards.
      • Debt Breakdown: Display debt in three categories:
        • Loans (non-credit card debt)
        • Credit cards (only credit card debt)
        • Total debt (sum of both)
      • Total Cash: Aggregate balances from checking and other liquid accounts.
    • Quick Actions:
      • Include a toggle or quick-add button for entering new transactions directly from the dashboard.

  3. Account & Transaction Details:

    • Account Types:
      • Credit Cards: Must include details such as name, current balance, credit limit, available credit, and next due date.
      • Loans: Include details such as APR and payment history.
      • Debit/Checking Accounts: Show current balances and recent activity.
      • Loan Outs: Handle similar to loans but represent funds that have been lent out.
    • Transactions:
      • Every account view should list related transactions with details: date, amount, category, description, and the account charged.
      • Support for linked transactions where, for example, a payment made from a checking account to pay off a credit card appears in both accounts.
      • Provide a quick toggle for adding transactions on both the dashboard and on each account’s detailed view.

  4. Recurring Transactions Page:

    • List all recurring expenses (e.g., subscriptions, bills, rent) by category.
    • Provide options to edit, update, or modify recurring expense details (amounts, dates, frequency).

  5. Data Models & Categories:

    • Accounts:
      • Each account object should include an ID, type (e.g., credit-card, debit, checking, loan, loan-out), name, balance, and any additional details relevant to the type (e.g., credit limit, available credit, next due date for credit cards; APR and payment history for loans).
    • Transactions:
      • Each transaction should include an ID, date, amount, category, a list of accounts involved (to support linked transactions), and a description.
    • Categories:
      • Include a consolidated list of transaction categories (e.g., Groceries, Self Development, Eating/Drinking Out, Housing, Transportation, Utilities, Health, Personal Care, Entertainment, Gifts, Clothing, Education, Travel, Payments, Misc). Feel free to refine or consolidate these categories as needed.

  6. UI/UX Considerations:

    • Dashboard as a Cockpit:
      • Use clear panels or cards to display each key metric (net worth, available credit, debt breakdown, total cash).
      • Consider using simple visualizations (charts or graphs) for trends (optional).
    • Navigation:
      • A consistent sidebar or header should allow navigation between Dashboard, Accounts, and Recurring Transactions pages.
      • Account cards or list items on the dashboard should be clickable to open detailed account views (either as a dedicated page or a side panel).
    • Responsiveness:
      • The design should be fully responsive, ensuring usability across desktop and mobile devices.

  7. Additional Considerations:

    • Error Handling & Loading States:
      • Simulate realistic API behavior with error boundaries and loading indicators, even when using dummy data.
    • Component Reusability:
      • Structure the UI into reusable components (e.g., TransactionList, AccountCard, DashboardMetricCard) to maintain consistency.
    • Dummy Data Integration:
      • Ensure that the dummy data accurately reflects the different account types, transactions, and recurring expense scenarios.

End Goal:
Create a modular, clear, and fully interactive personal finance front-end using React and Next.js. The application should enable users to quickly assess their net worth, monitor available credit and debt breakdowns, manage individual financial accounts, and easily enter new transactions—all backed by simulated backend data.

Please use this detailed specification to design the complete front-end, ensuring all features and UI/UX considerations are met.

here is what it looks like off the first rip, this isn’t perfect, far from it

personal finance app

10 - 03/06/2025