💡 Inspiration For many people, personal finance is overwhelming. Between tracking daily expenses, managing multiple high-interest loans, and trying to understand investments, the mental load is massive. Most existing tools are either intimidatingly complex spreadsheets or apps that just show you what you’ve already spent without offering a path forward. We wanted to build a tool specifically for those who lack financial literacy—a platform that feels as intuitive and gamified as Robinhood, but acts as a comprehensive, personalized financial advisor to help people escape debt and build wealth.
⚙️ What it does Finmanager is a sleek, web-based personalized financial assistant. It brings all your money into one unified, easy-to-understand dashboard:
Smart Debt Optimization: Users input their loans, and our built-in Avalanche algorithm instantly calculates the fastest, cheapest path to becoming debt-free, visualizing the trajectory with interactive charts.
AI-Powered Financial Planner: By securely analyzing your combined ledger (income, spending, loans, and investments), it uses the Claude API to generate a personalized "Health Score," immediate action items, and a concrete 6-month financial strategy.
Unified Gamified Dashboard: A beautiful, dark-glassmorphism interface that tracks your net worth and Robinhood-style investing portfolio with real-time visual feedback and daily P/L breakdowns.
đź› How we built it We built Finmanager entirely on the frontend to ensure a lightning-fast, highly responsive user experience.
Frontend: React 19 (via Vite) for the core framework, utilizing pure React Hooks for state management without the bloat of external stores.
Styling & Animation: A custom dark glassmorphism design system built with CSS, paired with GSAP for smooth, engaging animations (like slot-machine numbers and hover particles).
Data Visualization: Recharts translates complex financial data into beautiful, easy-to-read stacked area and line charts.
Logic & AI: We wrote a custom client-side JS algorithm to handle the complex debt-payoff math natively in the browser. For the intelligence layer, we integrated Anthropic's Claude API to parse the user's localized JSON data and return structured, conversational financial advice. Data persistence is handled locally via localStorage.
🚧 Challenges we ran into One of our biggest hurdles was bringing complex financial math—specifically multi-loan optimization—entirely into the browser. Initially, we considered using a Python backend with Mixed-Integer Linear Programming, but we wanted a seamless, zero-latency web experience. We had to heavily optimize a custom Avalanche-method algorithm in JavaScript that could instantly crunch the numbers and format the data perfectly for our charting library without freezing the UI. Additionally, prompt engineering the Claude API to ensure it returned strict, structured, and safe financial advice (rather than generic responses) took several iterations.
🏆 Accomplishments that we're proud of We are incredibly proud of the user interface. We successfully took a traditionally boring and stressful topic—debt and budgeting—and wrapped it in a visually stunning, gamified environment. We are also proud of our native debt-optimization engine; seeing the charts instantly redraw the fastest path out of debt as you adjust your monthly budget is incredibly satisfying and mathematically robust.
🧠What we learned Advanced State Management: We learned how to efficiently manage and pass complex, interconnected financial data across a monolithic React component structure without causing performance bottlenecks.
Data Visualization: We leveled up our skills in Recharts, learning how to dynamically stack data and format axes to make complex financial trajectories easy for anyone to understand.
AI Integration: We learned how to effectively utilize LLMs (Claude) not just as chatbots, but as structured data-processing engines that can provide actionable, personalized insights based on a user's specific ledger.
🚀 What's next for Finmanager Our immediate next steps include:
Plaid Integration: Replacing manual entry with live bank and credit card syncing so the ledger updates automatically.
Backend Database: Migrating from localStorage to a secure cloud database (like Supabase or Firebase) so users can access their financial snapshot across multiple devices.
Mobile App Transition: Rebuilding the web shell into a native mobile app using React Native to make on-the-go expense tracking even easier.
Log in or sign up for Devpost to join the conversation.