🔷 BudgetBuddy – Personal Finance Management App

BudgetBuddy is a modern, Progressive Web Application (PWA) designed to help users track expenses, manage budgets, and develop smarter financial habits. It addresses the common problem of unstructured spending by providing a centralized platform for monitoring income, expenses, and savings in real time, enhanced with intelligent AI insights.

🚀 Key Features

Comprehensive Dashboard & Analytics: Track income and expenses with real-time visual charts (Chart.js).
Borrow & Lend Tracker: Easily manage and monitor money you owe or are owed by others.
Intelligent AI Assistant: Get instant, personalized financial advice powered by the Groq API.
Progressive Web App (PWA): Installable on mobile and desktop with robust offline support and caching.
Interactive Onboarding: A responsive, guided spotlight tour for new users to quickly learn the platform.
Secure Authentication: Complete user management (login, signup, password recovery) powered by Supabase Auth.
Clean & Responsive UI: A mobile-first design built with Tailwind CSS for seamless cross-device usability.

🛠️ Tech Stack

Frontend: React 19, Vite, Tailwind CSS, Chart.js
Backend & Database: Supabase (PostgreSQL, Authentication)
AI Integration: Groq SDK (LLM-powered assistant)
Deployment: Vercel (PWA enabled)

💡 My Contribution

Architected and developed the full application interface and backend integration.
Designed a modern, responsive, mobile-first UI using Tailwind CSS.
Implemented robust PWA features, ensuring seamless offline functionality and performance.
Integrated the Groq SDK to build a context-aware AI financial assistant.
Engineered a custom, interactive spotlight onboarding tour to improve user retention.

⚡ Challenges & Solutions

Offline Reliability: Ensuring the PWA loaded smoothly without a network connection. Solution: Configured robust service worker caching strategies using Vite PWA, resolving infinite loading states and dynamic import errors.
Responsive Onboarding: Creating an interactive tour that didn't break layout on mobile devices. Solution: Built a custom spotlight overlay with dynamic viewport measurements to handle asynchronous component rendering and ensure perfect alignment across all screen sizes.
AI Context Integration: Providing the AI assistant with relevant, real-time financial data without compromising performance. Solution: Developed a system to securely inject the user's current transaction history and budget context directly into the AI system prompt.

📈 Impact

BudgetBuddy simplifies personal finance management by offering users an intuitive, app-like experience. The integration of offline capabilities and an AI assistant provides unmatched convenience, empowering users to make informed financial decisions anywhere, anytime.

🔮 Future Improvements

Bank API integration for automatic transaction syncing (e.g., Plaid).
Advanced receipt scanning using OCR.
Multi-currency support and collaborative budgeting for households.

🌐 Live Demo

https://budgetbuddy-sable.vercel.app/