Retro Vault

Meet RetroVault: Your all-in-one financial command center. We bring all your accounts together securely and use AI to power smarter budgeting and savings through a nostalgic Windows 98-style dashboard

Comment

Inspiration

We started with ideas like building a universal banking system that could connect services such as Zelle and PayPal. However, after realizing how complex and security-sensitive that would be, we shifted our focus to something more personal and practical. As college students, one of our biggest challenges has been budgeting and tracking our own finances, so we decided to design a solution that makes financial management engaging, intelligent, and fun.

What it does

RetroVault Overview

RetroVault is a retro-styled financial web app that securely stores users' income and expenses in a database linked to their Google login. It features a nostalgic Windows-98-inspired interface with CRT effects, translucent windows, and vintage sound effects that create an immersive, playful experience.

Innovative Core Features

Financial Time Machine

  • Projects future balances using compounding and inflation-adjusted models.
  • Runs Monte Carlo simulations for risk and uncertainty analysis.
  • Uses large language models (LLMs) to generate motivational, human-like forecasts and milestone predictions.

AI Insights

  • Analyzes transactions and savings patterns to uncover trends in spending and income.
  • Provides precise, actionable recommendations such as where to reduce expenses or how to save more.
  • Includes fallback logic that ensures functionality even when AI services are unavailable.

Story Mode

  • Transforms real financial data into short, RPG-style narratives.
  • Weaves transaction history and AI insights into a personalized "financial adventure."

LLM Financial Assistant (Eliza)

  • A built-in AI assistant that answers financial questions in real time.
  • Combines stored user data with generative AI for context-aware responses.

Retro-Styled UI

  • Uses 98.css and custom CSS to replicate authentic Windows-98 aesthetics.
  • Includes CRT/scanline effects, translucent windows, and wallpaper support.

Financial Dashboard

  • Built with Recharts for interactive charts and data visualization.
  • Displays projections, balances, and insights in a single dashboard.

Real Data Integration (Nessie)

  • Connects with Capital One's Nessie API to fetch live accounts and transactions.
  • Includes tools for syncing real data into Firebase Firestore.

Firebase & Firestore

  • Handles secure authentication and cloud data storage.
  • Uses both client and admin SDKs for safe syncing across local and serverless environments.

TTS Playback & Sound Effects

  • ElevenLabs TTS converts AI text into realistic retro-style speech.
  • soundPlayer.js manages all sound effects, handles browser autoplay restrictions, and queues playback safely.

Accessibility & UX

  • Labeled buttons and keyboard shortcuts for easier navigation.
  • Responsive retro design that adapts to mobile devices.
  • Progressive enhancement ensures smooth fallback when APIs are unavailable.

How we built it

Tech Stack

  • Frontend: React (v18), Vite, TailwindCSS, 98.css
  • Charts: Recharts
  • State Management: Zustand
  • Backend Dev Server: Node.js with Express for local API and sync operations
  • Database: Firebase Firestore
  • Authentication: Firebase Auth (Google Sign-In)
  • AI & TTS: OpenRouter with Google Gemini model selection, ElevenLabs for voice output
  • External API: Capital One Nessie (optional real transaction syncing)
  • Audio: Browser Audio API with custom autoplay unlocking logic

We used JavaScript to display financial data dynamically and integrated generative AI to deliver personalized insights and advice tailored to each user's financial profile.

Challenges we ran into

We had plenty of ideas but very little time to bring everything to life. Building advanced features like AI integration and real-time syncing within such a short window was a major challenge.

A significant difficulty was creating a robust data pipeline for our AI models. We couldn't simply feed the entire database into an LLM, so we designed context-aware helper functions that selectively provided the most relevant information to generate valuable insights. Crafting and testing this pipeline took the longest time.

We also spent a lot of effort structuring our database for scalability. We began with mock data via direct API calls, then evolved to a hybrid approach combining mock data with user inputs. This allowed users to fully control their data after the initial fetch while maintaining smooth, scalable performance.

Accomplishments that we're proud of

We're proud of what we accomplished in such a short time. RetroVault successfully integrates real data, AI insights, and nostalgic aesthetics into a cohesive experience. We also achieved a seamless Google login system, real-time data syncing, and a fully functional AI assistant, all while maintaining a consistent retro theme.

What we learned

We learned to build user-friendly interfaces that balance design with functionality. We also gained experience with APIs such as Firebase, OpenRouter, and Nessie while efficiently managing data pipelines for AI models.

What's next for RetroVault

Next, we plan to expand RetroVault with more advanced budgeting tools, multi-bank integration, and secure encryption for financial data. We also aim to collaborate with financial institutions to make RetroVault's AI budgeting and projection features available to real users at scale.

Built With

Share this project:

Updates