MicroSaver

Inspiration

As college students that struggle a lot with budgeting and looking forwards into the future, especially extremely further down in the future, like 40 years, budgeting often felt like a huge hassle. However, what we have learned as well is that doing things a little bit at a time often adds up to great results, like daily studying, or, in this case, taking a few extra dollars every day in order to allocate them elsewhere. The loss of those few extra dollars are often not felt in the moment, but they are instead used to build up security for the future, and instead noticed years later, when there is a larger payout for waiting.

What it does

The App.tsx file implements MicroSaver, a fully interactive fintech simulation and spare-change wealth accumulation engine (inspired by Nessie-style banking APIs). It models automated micro-investing, card transaction round-ups, and multi-bucket financial goal planning.
1. Visual & Immersive UI FoundationShaderBackground: Renders an interactive, animated HTML5 canvas background featuring floating particles, dynamic mouse-tracking gradient lighting, and smooth sinusoidal wave grids using requestAnimationFrame.
TopConfetti: Triggers a celebratory particle canvas overlay whenever a user successfully completes or hits 100% of a savings goal target.
2. Primary Account & Demo Modes Checking Account Balance: Tracks a real-time available checking balance ($3,842.50 default). Every simulated purchase deducts both the item cost and the calculated spare-change sweep.
Ledger Modes: Demo Presets: Loads pre-populated transactions (Blue Bottle Coffee, Uber Ride, Whole Foods, etc.) with pre-configured balances.
Start From Scratch: Clears existing data, resets balances to a custom user-defined starting amount, and zeros out all savings vaults so users can test custom scenarios.
3. Category Sweep Strategy Rules Users can customize how spare change is calculated for different spending categories (e.g., Dining & Coffee, Groceries, Shopping, Entertainment):
Round-Up Modes: Calculates change based on the nearest dollar rule ($1.00, $2.00, $5.00) or multi-dollar multipliers (2x, 3x).
Percentage Sweep Modes: Sweeps a custom percentage of the transaction amount (e.g., 5% or 10%) up to a strict user-defined maximum dollar cap per transaction.
4. Transactions & Sweeps Ledger Dual Sub-Views: Toggle between a Transactions ledger (showing spending amounts and individual sweep deductions) and a Sweeps ledger (tracking accumulated spare change).
Filtering & Sorting: Filter items by category or sort them by newest, highest/lowest amount, or category name alphabetically.
Reversal System: Deleting any transaction from the ledger automatically triggers a refund to the checking account and proportionally reverses the savings transfers across all destination vaults.
5. Goals & Master Allocation Engine The application splits 100% of all saved spare change across three primary pillars using a master distribution ratio: Master Ratio Sliders: Dynamically adjusts the percentage split between Goal Targets, Emergency Funds, and Future Savings (enforcing a strict 100% total sum limit).

• Section 1: Goal Targets (Max 5 Goals): Allows users to create custom savings goals (e.g., Japan Vacation, MacBook). Incoming swept funds are divided equally among active goals. When a target is 100% reached, excess overflow funds automatically reroute to the Emergency Vault.
  
• Section 2: Emergency Funds Vault: A liquid safety net that can surpass its target limit and absorb overflow funds from completed goals.
  
• Section 3: Future Savings Allocation: Automatically distributes long-term funds across sub-buckets like Roth IRA, 401(k) Plan, and General Savings, with dynamically rebalancing percentage inputs.
  6. Transaction Simulation Engine Card Simulator Modal: Lets users input custom merchant names, categories, and purchase amounts.
  Insufficient Funds Validation: Validates that the primary checking account has enough funds to cover both the purchase and the spare-change sweep; otherwise, it throws a descriptive error banner.
  

How we built it

We utilized Google Gemini and OpenAI's ChatGPT in order to help us generate the code and UI, adjusting things and requirements in order to ensure that the app contained all the information and features that we desired. We did this by confirming a structures and attainable goal at the start of the project and keeping that as the guidance point for where we were taking this project. This allowed us to update our project via new prompts and ideas and easily compare where we were to where we wanted the project to go, adjusting accordingly until we reached our goal. Starting with generating the functionality of the code itself and completing that process and then moving on to UI and practicality design ended up being quite the success.

Challenges we ran into

Throughout the course of the app, the AI chat bots would often "run out of steam", and then we would have to pivot between chatbots in order to fully develop the app to have all the features we wanted. Additionally, this was the first time either of us have vibe coded, and figuring out how to properly create code and UI that worked utilizing AI was a steep learning code for the both of us. However, we quickly learned how and created the app.

Accomplishments that we're proud of

For the both of us, this is the first time either of us have utilized AI in assisting with a majority of the code and UI, and it was difficult to figure out how to properly prompt it to get exactly what you wanted instead of something similar, but not quite proper. Additionally, it proved that we were capable of working under a severe time crunch and together as a team to solve a problem that we both had. Neither of us have used GitHub either, and while we aren't confident on how it works, we both now know enough to have put our code into the GitHub Repository.

What we learned

Throughout the course of the project, we learned how to properly prompt AI to generate code and UI, as well as how to use GitHub.

What's next for MicroSaver

Ideally, this would connect to a real credit card, and the app would develop into more suggestions on how to assist with budgeting, given both user input in the app and data that it collects from the purchases, creating a more individualized budget that works for the lives of multiple people, without them having to manually put in purchases (though obviously some features would change, like adding in categories after the items are put in). It would also then account for the individual's lifestyle and predict when the user may face financial hardships or strife, and adjust percentages for each budget regarding that. Depending on the utility (and the use of an AI assistant and what they are coded to prioritize), the user may no longer be able to adjust the budgeting percentages, but instead have those percentages adjust (not directly chosen) to the users preferences.

Built With

• ai
• api
• javascript
• nessie