GreenThumb

Inspiration

As first-year college students, personal finance already feels intimidating, and most tools built to teach it don't help. Budgeting, credit, investing, saving: all important, all buried under jargon and internet paywalls.

Two things pushed us toward GreenThumb specifically. A tour of Fidelity's campus, where they've built a garden and keep animals on-site, stuck with us. We also kept coming back to the fact that wealth management advisors, the people who could actually close the financial literacy gap, are expensive and out of reach for most people, especially early-career women.

To tackle this challenge, we built GreenThumb: a garden-based financial literacy app where your progress is something you can actually watch grow.

What it does

GreenThumb teaches personal finance through quests, plants, and Sage, an AI chatbot who acts as your garden guide.

With it, you can:

Work through beginner-friendly quests covering budgeting, credit, ETFs, Roth IRAs, debt, and saving
Grow and unlock new plants as you complete quests
Clear weeds, which represents accumulating debt
Earn seeds as in-game currency
Ask Sage direct finance questions
Visit friends' gardens and see how they're doing
Get walked through a first-timer tutorial

The point is to make financial literacy feel less like homework and more like tending something you actually care about. You have to actually learn personal finance concepts for your garden to grow.

How we built it

Frontend: Next.js, React, TypeScript, Tailwind CSS, Framer Motion: a mobile-first experience with real animations, onboarding, and garden interactions.

Backend: Next.js API routes, Prisma, Supabase Postgres: Prisma models users, quests, plants, friendships, weeds, and garden events; Supabase hosts the production database.

AI: Anthropic's Claude API via the Vercel AI SDK powers Sage, who answers personalized finance questions using direct information from Fidelity Learn and other credible sources.

Deployment: Vercel, with automatic redeploys on push.

Challenges we ran into

We wanted the app to be educational without making it feel like you were reading off a textbook. To do this, we implemented more than just multiple choice questions: drag and drops, sliders, and instantly gratifying plants.

It took us some time to figure out the game mechanics and how the learning system actually connects: how plants grow, how quests unlock, how progression feels rewarding without turning into busywork.

On the technical side, deployment gave us some trouble. Environment variables, database migrations, Supabase connection strings, and getting local and production behavior to actually match. Developing Sage was its own challenge: we wanted warmth and personality, while making sure Sage stayed credible and risk-aware, so there wouldn't be any unverified financial advice being handed out.

What we learned

This was our first time taking a product from idea to a fully deployed full-stack app. Along the way we learned how to build with Next.js, React, TypeScript, and Tailwind; deploy on Vercel; wire an AI chatbot into a real user flow; and design game mechanics that map onto genuine educational progress, not just points and badges.

What's next for GreenThumb

Bank-Linked Accounts — Plaid integration so the garden mirrors your real savings and payments. Expanded Financial Features — deeper budgeting tools, savings goals, and portfolio tracking. Push Notifications — reminders for quests, streaks, and financial habits. Native Mobile Experience — a more app-like build beyond the current web version. AI Personalization — a sharper Sage with deeper context and smarter guidance. Community Features — visiting friends' gardens, encouragement, and shared goals.

Our long-term vision is to make financial confidence feel accessible, empowering, and even fun for the next generation of students.