Hallowallet

Smart, spooky money assistant that makes mastering your finances scary good.

Comment

HalloWallet: The Spooky Money Assistant

Inspiration

Financial anxiety is real. For many, checking their bank account feels like watching a horror movie. That's where the idea for HalloWallet was born. We wanted to take the "scary" out of finance by embracing it literally.

Inspired by the fun of Halloween and the serious need for financial literacy, we set out to build a "Spooky Money Assistant". The goal was simple: create a tool that doesn't just track numbers but actively helps you make better spending decisions, all wrapped in a delightful, engaging interface that makes you want to check your budget.

What I Learned

Building HalloWallet was a journey into the heart of modern web development and financial logic.

  • Next.js App Router: I mastered the latest Next.js 14 features, using server components for performance and client components for interactivity.
  • Complex State Management: Tracking income, savings goals, and real-time expenses required a robust state architecture to ensure the "Advisor" always had the latest data.
  • Algorithm Design: I learned how to translate financial advice into code. The "AI Advisor" isn't just a black box; it's a carefully tuned engine that weighs your disposable income against your long-term goals.

How I Built It

The project is built on a modern, type-safe stack designed for speed and reliability.

Tech Stack

  • Framework: Next.js 14 (React)
  • Styling: Tailwind CSS with a custom "spooky" dark mode palette (Slate-950, Orange-500, Purple-600).
  • Database: Prisma with a local JSON/SQLite setup for the hackathon (easily scalable to Postgres).
  • Validation: Zod for ensuring data integrity.

The "Smart Advisor" Engine

The core of the project is the Smart Purchase Advisor. Instead of just saying "Yes" or "No", it calculates a Financial Health Score ($S$) for every potential purchase.

The logic considers your Disposable Income ($I_d$), Savings Goal ($G_s$), and the Item Price ($P$).

$$ I_d = I_{total} - G_s - E_{fixed} $$

When you ask "Can I afford this?", the engine runs a simulation:

$$ B_{remaining} = I_d - P $$

If $B_{remaining} < 0$, the engine triggers a "Reconsider" warning and suggests cheaper alternatives. If $B_{remaining} > 0.2 \times I_d$, it gives a "Green Light".

We also implemented a Yearly vs. Monthly analysis mode, allowing users to see if a big purchase fits their annual budget even if it breaks the monthly one.

Challenges Faced

  • The "Advisor" Logic: Balancing strict financial advice with a user-friendly tone was tough. We didn't want to shame users for spending, but we had to be honest about their budget. Tuning the scoring algorithm took several iterations.
  • Real-time Updates: Ensuring that adding a transaction immediately updated the "Savings Progress" bar without a full page reload required careful use of React's useEffect and optimistic UI updates.
  • Theming: Creating a "Halloween" theme that didn't look cheesy was a design challenge. We used subtle gradients (bg-gradient-to-r from-orange-400 via-purple-400) and glassmorphism (bg-slate-900/50) to keep it premium yet playful.

The Future: Everywhere Access

We are just getting started. The web app is the foundation, but financial decisions happen on the go.

Native Mobile App

We are getting ready to build this in a React Native app. By sharing the core logic and hooks from our Next.js project, we will bring HalloWallet to iOS and Android, allowing for push notifications when you're about to overspend.

Home Screen Widget

We plan to keep a Widget on your home screen for easy access. Imagine seeing your "Daily Safe-to-Spend" amount right on your wallpaper-no need to open the app. This constant, passive awareness is the key to changing financial habits forever.

Built With

Share this project:

Updates