Inspiration (The "Why"):

In today's world of taps and swipes, we've lost the psychological "pain" of spending physical cash—a natural brake on overspending. Existing budget apps are often reactive, data-heavy chores. Ouch! was inspired by the need for a behavioral change tool, not just another spreadsheet. The goal was to create a proactive companion that uses conversational AI to make you conscious of your financial decisions in the moment. The name itself, "Ouch!", is the core of the experience—it’s that little pang of awareness you should feel with every transaction.

What it does:

Ouch! is a finance app centered around a conversational AI that helps you manage your money with mindful intention.

  • 🎙️ Talk to Your Money: The core feature. Tap the mic and tell Ouch! about your spending (e.g., "I just spent $30 on Starbucks"). The AI, powered by Whisper and ElevenLabs, not only logs the transaction but replies with a short, witty, and sometimes sarcastic response to make you think twice.
  • 💰 Allocate and Visualize: Instead of just tracking, you proactively allocate your income. A visual, purple progress bar for each budget category shows how much you've spent, "eating away" at your allocation with each transaction.
  • 🎯 Set & Crush Goals: Easily create savings goals, like a "Vacation Fund," and contribute to them. The app provides a clear view of your progress, and you can add or remove funds with a simple interface.
  • ⚙️ Full CRUD Control: Ouch! gives you complete control. You can create, read, update, and delete budgets, goals, and individual transactions through an intuitive and clean UI.
  • 🗓️ Pay Period-Based Budgeting: The app is built around the reality of pay periods. You can set your income for each bi-weekly period, and any unspent budget automatically carries over, giving you a realistic view of your "Cash Available."

How we built it:

This entire application was developed within Bolt, showcasing the power of conversational, AI-driven development to build a sophisticated product.

  • Core Platform: Bolt
  • Voice AI (Voice AI Challenge):
    • Speech-to-Text: OpenAI Whisper for highly accurate transcription of user spending.
    • Text-to-Speech: ElevenLabs to give Ouch! its signature natural, conversational, and witty voice.
  • Backend & Database (Startup Challenge): All data, including budgets, goals, and transactions, is persisted using localStorage for a snappy client-side experience, with a data structure ready to be migrated to a scalable backend like Supabase.
  • Frontend & UI: Built with React, TypeScript, and styled with TailwindCSS to achieve the sleek, dark, and mobile-first design.

Challenges I ran into:

The development journey was highly iterative, focused on refining the user experience based on direct feedback:

  1. UI/UX Overhaul: The project initially had a bright, "Lemonade-inspired" theme, but was completely redesigned to the current sleek, dark, and minimalist aesthetic to better fit the app's focused nature.
  2. State Management & Performance: An early version suffered from a constant, annoying "flickering" due to an improper state update loop. This was refactored to ensure smooth, targeted re-renders only when data changes.
  3. Responsive Design: Initial layouts had elements "cut off" on mobile screens. A significant effort was made to create a truly responsive design, introducing a hamburger menu for mobile and a clean sidebar for desktop.
  4. Connecting the AI to the Data: A key challenge was making the AI "smart." Initially, voice commands didn't update the data. This was fixed to ensure that when the AI processes a transaction, it automatically updates the correct budget category and all associated values in real-time.

What's next for Ouch!:

Ouch! is built with a scalable future in mind. The next steps would be:

  • Full Supabase Integration: Migrating from localStorage to a full-fledged Supabase backend to support user accounts and data sync.
  • Plaid Integration: Allowing users to securely connect their bank accounts for automatic transaction importing.
  • AI-Driven Insights: Expanding the AI to provide proactive advice, trend analysis, and personalized goal coaching, turning Ouch! into a true financial wellness coach.

Built With

  • elevenlabs
  • tailwindcss
  • vite
  • whisper
Share this project:

Updates