3D Model Intro for DiveFund
Main Menu For

Inspiration

Learning to invest can feel like diving into "unfamiliar water". Many of the tools expect users to have an overall concept of terms like ETFS, expense ratios, and diversification. For beginners without financial education or someone to guide them, it creates a barrier before they start learning. With Technica's "Dare to Dive" theme, we created Divefund, an ocean-themed learning game that makes investing concepts learnable and interactive through exploration. We want users to build up their confidence by experimenting safely, asking questions, and seeing how their choices affect simulated assets.

What it does

Divefund teaches ETF investing through five underwater levels, which introduce one concept at a time.

The Shallows: What is an ETF?
The Reef: Risk and Bonds.
Kelp Forest: Expense ratios and the long-term impact of fees.
Open Ocean: Active vs. Passive investing.
The Trench: Diversification and time horizons

The user picks a sample banking profile, studies its monthly cash flow, and selects a fictional monthly contribution. The user creates his/her own portfolio using the allocation sliders and sees the future projection of their growth with/without charges.

Each level combines a short lesson, hands-on experimentation, and a quiz; XP, badges, and unlockable funds turn the education into a progression-based game.

Our AI Dive Guide, powered by the Gemini API when configured, answers questions using the learner's current level, contribution, and projection results. Plain-language explanations with inline help users learn without needing prior investing knowledge.

No real money moves. Funds are fictional, banking information comes from sandbox or sample data, and projections illustrate assumptions rather than predict market performance.

How we built it

DiveFund was created with Next.js, React, and TypeScript with an ocean-inspired interface design, leveraging Tailwind CSS and reusable UI components. Recharts is used for interactive financial visualizations.

The Capital One Nessie API was incorporated using server-side routes to fetch sandbox customers, accounts, deposits, purchases, and withdrawals. In this application, we grouped all transactions on a monthly basis to showcase how income, expenses, and possible practice contributions are related to one another. We can also simulate an investment transaction to generate a withdrawal event within the Nessie sandbox.

We integrated the Gemini API into our Dive Guide and passed information about the learner’s current game context to provide explanations that would take into account the portfolio being studied. Scripted responses and sample banking data are provided as an alternative when external services are down.

This simulation incorporates allocation-based returns, expenses, monthly compounding, and the comparison of investment outcomes with and without fees. Progress, XP, and badges are stored locally using localStorage.

Challenges we ran into

Simplifying the idea of investing in order to show how it works but at the same time avoiding any hidden compromises was one of the main challenges.

One more difficulty was the way of linking the educational process with banking information. Transaction activities had to be structured and summarized into meaningful monthly reports with proper handling of gaps and failures.

The AI tutor had to have certain limitations. The whole approach was built for educational purposes but not for advising on personal finances. We also introduced fallback answers in case Gemini was not available.

The last difficulty was the balance between the aesthetic side of the application and its usability since it was necessary to build a useful ocean theme.

Accomplishments that we're proud of

We take pride in creating a seamless experience that incorporates the connection between banking context, portfolio experimentation, and financial education.

Rather than just informing users about how fees affect their investment, DiveFund allows them to visualize the impact over time. Rather than presenting all concepts of investing at once, the app gradually introduces new concepts and recognizes achievements in learning.

In addition, we created an experience that anyone can test without having a bank account or any budget for investments. Our inclusivity strategy is seen through clear lessons, glossaries, sample profiles, and an environment for asking beginner questions.

What we learned

We were taught how to integrate APIs into a Next.js app, how to keep our API keys safe on the server, and how to create fallbacks for unstable sources.

The creation of the simulator made us comprehend the relationship between contributions, allocation, compounding, and fees. Moreover, it made us realize the difference between an educational tool and a market prediction tool.

Finally, we were taught that financial education needs not only to provide correct information but also space to experiment and comprehensible feedback.

What's next for DiveFund

We need to continue by improving the ocean experience using depth colors and smooth page transitions using the scroll, while making sure that everything is legible.

This includes: Testing the experience among students and people who are new to investing. Improving keyboard navigation and accessibility, including mobile usability. Developing multilingual content with additional samples of financial situations. Adding scenarios of market downturns and uncertainty margins. Covering budgeting and emergency savings before the discussion on practice contributions. Reviewing AI explanations for accuracy, clarity, and bias. The idea is to get more people to become confident about financial education, one step at a time.