FinAI

Track, plan, invest—your all‑in‑one AI budget buddy.

Comment

🧭 Inspiration

Personal finance and healthy living often feel like they exist in separate universes — spreadsheets on one side, and diet trackers on the other.
We wanted to connect them into one intelligent, compassionate assistant that helps families budget smarter, plan healthier groceries, and make informed investment choices.

Our goal?
To transform everyday spending into progress toward both wellness and wealth, powered by AI that actually cares — with crystal-clear insights and a friendly, human UI.

💼 What It Does

FinAI unifies money management and mindful living in one sleek dashboard:

  • Unified Dashboard: Tracks income, expenses, savings, alerts, and AI-powered insights.
  • Healthy Product Launches: Discover new products with smart filters, wishlists, and Supabase-backed actions.
  • AI Grocery Planner: Generate meal plans, maintain carts, and link directly to recipe-based budgets.
  • Gamification: Earn badges, streaks, and leaderboard ranks for smart spending habits.
  • Family Collaboration: Chat, share goals, and coordinate budgets in real time.
  • AI Assistant (Gemini 2.5): Provides contextual tips for budgeting, investment, and grocery decisions — with text, image, and video support.
  • Reports Module: Visual insights on spending trends, savings trajectories, and investment progress.

🏗️ How We Built It

  • Frontend:
    Built with React + Vite + TypeScript, generated via Google AI Studio for rapid prototyping.
    Styled with Tailwind CSS and a shared design system (tailwind.config.js, src/index.css).

  • Backend:
    Integrated with Cursor AI for fast service iteration and logic refinement (services/ directory).

  • Database & Auth:
    Supabase powers authentication, file storage, and SQL migrations (lib/supabase.ts, supabase_*.sql).

  • AI Models:
    Gemini 2.5 handles contextual chatbot interactions, text/image/video suggestions (services/geminiService.ts).

  • Visualization:
    Recharts used for income–expense comparisons, insights, and progress tracking.

  • Structure:
    Modular app architecture with components for dashboard, expenses, family, gamification, healthy-products, planner, and reports.

🚧 Challenges We Ran Into

  • JSX runtime and parser issues during fast-paced component edits — fixed by simplifying component hierarchies.
  • Subtle chart UX polish: adjusting hover states and bar sizes to improve readability.
  • Supabase RLS (Row-Level Security) conflicts during multi-user family collaboration.
  • Keeping the interface clean yet powerful while orchestrating multiple AI modules.
  • Ensuring AI suggestions stay personalized, relevant, and non-intrusive.

🏆 Accomplishments That We're Proud Of

  • Designed a clean, interactive income vs expense chart with instant insights.
  • Built a standalone Healthy Product Launches section with dynamic filters and wishlist storage.
  • Crafted family collaboration and gamification systems that make money management fun.
  • Delivered a cohesive design system that’s accessible, friendly, and consistent.
  • Integrated Supabase + Gemini 2.5 seamlessly into a smooth AI experience.

📚 What We Learned

  • AI-assisted development can speed up builds but still needs human finesse for UX and logic.
  • Compact, actionable insights beat long-winded advice every time.
  • Supabase is an excellent choice for fast authentication and database setup.
  • Recharts is flexible but demands custom CSS tweaks for a polished look.
  • Prompt engineering defines the reliability and clarity of AI responses in finance.

🚀 What’s Next for FinAI

  • Predictive analytics: Month-end forecasts and anomaly detection for smarter planning.
  • Personalized investment guidance: Tailored to risk profiles and long-term goals.
  • Enhanced healthy shopping intelligence: Seasonal picks, price alerts, and sustainability scoring.
  • Mobile-first optimization and PWA support for offline use.
  • Multi-user role-based budgeting for families and small communities.
  • Richer visual reports: Category breakdowns, savings trajectories, and spending heatmaps.

🧮 A Bit of Math

Savings Rate Formula:

$$ SR = \frac{\text{Income} - \text{Expenses}}{\text{Income}} $$

Monthly SIP Suggestion:

$$ SIP \approx 0.2 \times \text{RemainingBalance} $$

🧩 Example: Supabase Auth (TypeScript)

// components/auth/SignIn.tsx (excerpt)
import { supabase } from '../../lib/supabase';

async function signIn(email: string, password: string) {
  const { data, error } = await supabase.auth.signInWithPassword({ email, password });
  if (error) throw error;
  return data;
}

Built With

  • ai
  • ai-studio
  • aistudio
  • cursor
Share this project:

Updates