GoalVision

See your financial future, today: Visualize goals, gamify savings, and conquer debt with GoalVision

Comment

Inspiration

Financial tracking often feels like a chore—cold spreadsheets, boring line graphs, and overwhelming numbers. We were inspired to turn the psychological burden of saving into a visual, rewarding journey. We wanted to create an app where users don't just "see" their numbers, but watch their dreams grow—literally—through plants that thrive or jars that fill as they get closer to their goals.

What it does

GoalVision is a full-stack financial companion that combines:

  • Gamified Goal Tracking: Choose between "Jar" or "Plant" visualizations. As you save, liquid rises or seeds sprout into trees.
  • Smart Debt Payoff: A calculator that compares the Snowball and Avalanche methods, showing exactly how much interest you'll save: $$Interest_{saved} = \sum (Owed \times Rate \times Time_{reduced})$$
  • Investment Portfolio: Track stocks and crypto in real-time with integrations like Alpha Vantage and CoinGecko.
  • Milestone Celebrations: Automatic detection of 25%, 50%, 75%, and 100% progress with immersive confetti animations.
  • Visual Dashboard: A glassmorphic interface with staggered entrance animations that makes opening your finance app a premium experience.

How I built it

  • Frontend: Built with Flutter, leveraging flutter_animate for staggered entrance transitions and CustomPainter for the liquid wave and plant growth animations.
  • Backend: Powered by Serverpod, a high-performance Dart-based backend. This allowed for seamless shared models between the client and server.
  • Database: PostgreSQL handled our persistent storage and complex migrations.
  • APIs: Integrated Alpha Vantage for stock market data, CoinGecko for cryptocurrency prices, and ExchangeRate-API for real-time currency conversion.
  • Architecture: Followed a clean, modular architecture with clear separation between data models, API endpoints, and UI components.

Challenges I ran into

  • Serverpod 3.x Migration: Navigating the latest Serverpod configuration requirements, specifically the new environment-scoped passwords.yaml structure.
  • Animation Orchestration: Synchronizing CustomPainter wave logic with Riverpod state updates to ensure smooth visual feedback during quick transactions.
  • Mathematical Precision: Implementing the debt payoff strategies required careful calculation of interest accrual across varying payment schedules to ensure accuracy in projected payoff dates.

Accomplishments that I'm proud of

  • Premium UI: Achieving a "first-prize" aesthetic with glassmorphism, gradients, and custom micro-animations that feel professional and alive.
  • Full-Stack Synergy: Building a completely type-safe bridge between Flutter and the server using Serverpod's client generation.
  • The "Jar" Visualization: Developing a custom wave physics animation that feels organic and satisfying as it fills.

What I learned

This project was a deep dive into the power of the Dart ecosystem for full-stack development. I learned how to effectively manage real-time API rate limits, how to leverage Flutter's animation engine for psychological rewards (gamification), and the importance of robust database migration strategies in a rapid development cycle.

What's next for GoalVision

  • AI Financial Coach: Integrating Gemini 1.5 Pro to provide personalized savings tips and "Self-Healing" budget advice.
  • Bank Integration: Connecting to the Plaid API for automatic transaction syncing.
  • Social Savings: Adding "Goal Teams" where families or friends can save for shared objectives (like a group vacation).

Built With

Share this project:

Updates