Finance AI Coach

Inspiration

Our inspiration stemmed from a universal pain point: personal finance is often overwhelming, reactive, and lacks personalized guidance. Traditional budgeting apps provide numbers, but rarely actionable insights or true coaching. We envisioned a world where financial health is proactive, accessible, and even engaging. We wanted to leverage the power of AI to transform complex financial data into simple, actionable steps, making financial freedom a tangible goal for everyone, not just a privileged few. The idea was to create a "smart companion" that truly understands your financial story and guides you towards a brighter future, all while offering a modern, intuitive, and secure user experience.

What it does

Finance AI Coach is a comprehensive, intelligent financial management application designed to empower users to track expenses, manage budgets, set financial goals, and gain AI-powered insights. It features a modern, responsive design with dark mode support and advanced financial analytics.

Key functionalities include:

• Dashboard: Provides a real-time financial overview with interactive charts (Income vs Expenses, Daily Savings Trend), quick action cards, and AI-powered financial insights.
• Transaction Management: Allows for manual transaction entry, smart receipt scanning with client-side OCR (Tesseract.js), AI-powered category prediction, and secure receipt image storage.
• Budget Management: Offers category-based budgeting, real-time tracking, AI budget suggestions, visual progress indicators, and overspending alerts.
• Financial Goals: Enables goal creation and tracking with progress visualization, deadline monitoring, and achievement notifications.
• Analytics & Reports: Provides comprehensive financial analytics with multiple chart types (Bar, Line, Pie, Area), spending pattern analysis, AI-generated insights, and exportable reports (PDF via jsPDF, CSV).
• AI Coach: A conversational AI interface offering personalized financial advice, real-time insights, and suggestions through an interactive chat experience.
• Connected Accounts: Supports bank account integration, credit/debit card management, balance tracking, and transaction synchronization.
• Robust Security: Implements Row Level Security (RLS), encrypted data transmission, OTP-based authentication, and secure file storage.
• Optimized Performance: Features code splitting, image optimization, lazy loading, and optimized database queries for a smooth user experience.

How we built it

We built Finance AI Coach using a cutting-edge, robust, and highly efficient technology stack, strategically leveraging sponsor technologies to maximize our output within the hackathon timeframe.

• Frontend: The application's user interface is built with React 18.3.1, utilizing JavaScript (JSX) and Vite 5.4.2 for a fast build process and development server. Tailwind CSS 3.4.1 provides a utility-first approach for responsive and modern design, complemented by React Router DOM 6.22.0 for client-side routing. We used Lucide React 0.344.0 for icons and Recharts 2.12.0 for all data visualizations.
• Backend & Database: Supabase served as our comprehensive Backend-as-a-Service. We leveraged its PostgreSQL database with Row Level Security (RLS) for robust data protection, real-time subscriptions for live data updates, and Email OTP-based authentication for secure, passwordless login. Supabase Storage was used for receipt image storage, and Edge Functions for serverless operations.
• AI & File Processing: For client-side OCR, we integrated Tesseract.js 5.0.4 for smart receipt scanning and text extraction. jsPDF 2.5.1 was used for generating exportable financial reports. Our custom AI-powered categorization logic handles smart expense categorization, merchant recognition, and amount extraction.
• Development Tools: We maintained code quality with ESLint and used PostCSS & Autoprefixer for CSS processing. The entire codebase is written using JavaScript ES6+ features, primarily in TypeScript (96.3%) for enhanced reliability and maintainability.
• Development Environment (Hackathon Context): While the project uses Vite, the spirit of rapid development fostered by tools like Bolt (as an IDE/scaffolding tool) was crucial. Bolt's philosophy of accelerating initial setup and providing a solid foundation allowed us to focus immediately on implementing complex features and AI integrations, aligning perfectly with our hackathon goals.

Our architecture is modular, with clear separation of concerns in src/ (components, contexts, hooks, pages, utils, lib). The database schema is well-defined, including user_profiles, transactions, goals, budgets, receipts, connected_accounts, notifications, and reports. We prioritized performance with code splitting, image optimization, and efficient data fetching.

Challenges we ran into

Building Finance AI Coach within the hackathon's tight timeframe presented several significant challenges:

• Integrating Diverse Technologies: Combining client-side OCR (Tesseract.js), a robust backend (Supabase), real-time features, and advanced charting (Recharts) required careful orchestration and debugging to ensure seamless data flow and functionality.
• Client-Side OCR Accuracy & Performance: While Tesseract.js is powerful, achieving high accuracy for varied receipt formats and optimizing its performance for a smooth user experience on the client-side was a continuous challenge. We focused on robust error handling and user-friendly feedback.
• Real-time Data Synchronization: Implementing real-time updates for transactions, budgets, and charts using Supabase's subscriptions, while ensuring data consistency and performance, required meticulous state management.
• AI-Powered Categorization Logic: Developing the custom AI logic for smart expense categorization, merchant recognition, and amount extraction, and making it reliable across different transaction types, was complex.
• Comprehensive Security Implementation: Ensuring robust security with RLS, OTP authentication, and secure data transmission for sensitive financial information demanded careful attention to detail and thorough testing.
• Responsive Design Across Breakpoints: Achieving a truly "Apple-level" aesthetic and ensuring optimal responsiveness across mobile, tablet, and desktop breakpoints with Tailwind CSS required continuous refinement.

Accomplishments that we're proud of

We are incredibly proud of several key accomplishments that highlight the innovation and execution of Finance AI Coach:

• Fully Functional AI-Powered Core: We successfully integrated and demonstrated advanced AI functionalities, including client-side OCR for receipt scanning, AI-powered categorization, and a live conversational AI financial coach. This brings a truly intelligent dimension to personal finance.
• Robust Supabase Backend: We built a secure and scalable backend using Supabase, leveraging RLS, OTP authentication, real-time subscriptions, and efficient database schema design to handle sensitive financial data effectively.
• Seamless User Experience & Design: Despite the complexity, we delivered a highly polished, intuitive, and responsive user interface with dark mode support, adhering to "Apple-level aesthetics" and WCAG accessibility standards.
• Comprehensive Feature Set: In a short period, we implemented a wide array of features, from detailed transaction and budget management to financial goals, analytics, and exportable reports.
• Performance Optimization: We achieved significant performance gains through techniques like code splitting, image optimization, and optimized database queries, ensuring a smooth and fast user experience.
• Leveraging Sponsor Technologies: We effectively utilized Supabase as our core backend and database, and embraced the rapid development philosophy exemplified by Bolt, showcasing their power in building a full-stack, AI-driven application quickly and efficiently.

What we learned

This hackathon was an immense learning experience, pushing our boundaries and deepening our understanding of modern web development and AI integration:

• Mastering Client-Side AI: We gained invaluable experience in implementing and optimizing client-side AI solutions like Tesseract.js, understanding their capabilities and limitations in a real-world application context.
• Supabase's Full Potential: We explored and leveraged a broader range of Supabase features, from RLS and real-time subscriptions to its authentication system, solidifying our understanding of its power as a Backend-as-a-Service.
• Importance of Modular Architecture: The benefits of a well-structured, modular architecture (React components, hooks, contexts) became even clearer in managing complexity and enabling parallel development.
• Balancing Innovation with Practicality: We learned to balance ambitious AI features with practical implementation, focusing on delivering functional demonstrations within the hackathon's constraints.
• Performance is Key: Even in a hackathon, the importance of performance optimizations for a smooth user experience was highlighted, especially with data-heavy financial applications.
• Collaborative Efficiency: The value of clear communication, disciplined Git workflows, and effective task delegation was paramount to our success.

What's next for Finance AI Coach

The journey for Finance AI Coach is just beginning! Our future roadmap includes:

• Advanced Bank API Integrations: Implementing secure, real-time connections with major financial institutions (e.g., Plaid, Flinks) for automatic transaction import and comprehensive account management.
• Enhanced AI Capabilities: Developing more sophisticated AI models for predictive analytics, personalized financial planning, anomaly detection, and deeper investment insights.
• Investment Tracking: Expanding the application to include comprehensive investment portfolio tracking, performance analysis, and AI-driven investment advice.
• Multi-currency Support: Adding support for multiple currencies to cater to a global user base.
• Community Features: Exploring features like financial challenges, peer support groups, and collaborative goal setting to foster a supportive community.
• Dedicated Mobile Apps: Developing native iOS and Android applications for an even more seamless and optimized mobile experience.
• Monetization Strategy: Exploring subscription tiers for premium features, advanced AI coaching, and exclusive reports.

We believe Finance AI Coach has the potential to truly empower millions to achieve financial well-being and make smarter money decisions.

Built With

• bolt
• geminiapi
• javascript
• nextjs
• react-rouer-dom
• supabase
• tesseract.js
• vite