The Inspiration

We started with a simple, unsettling observation: our education system prepares us for calculus, but not for credit cards. We're taught how to find the value of x, but not how to value a stock. This isn't just a curriculum gap, it's a generational crisis.

Studies now confirm that Gen Z, the first true digital natives, is facing a greater risk of poverty than any recent generation. We were born into a world that was already online, shaped by constant connectivity and social algorithms. We have the sum of human knowledge in our pockets, yet we graduate with a basic, or often nonexistent, knowledge of personal finance.

We were inspired to build the tool we wished we had. We didn't want another boring textbook or a clunky spreadsheet. We wanted something that felt like the apps we use every day: intuitive, beautiful, and maybe even a little addictive. That's how StackUp was born: out of a necessity to translate the complex world of finance into the digital language our generation understands.

What We Learned

This project was a deep dive into both product design and full-stack development. On the design front, we learned that a "good UI" isn't just about looking nice; it's about creating an intuitive experience. Our initial designs felt generic. We had to scrap them and go back to the drawing board, pulling inspiration from best-in-class apps like Raycast, Notion, and Cursor to build an interface that was not just functional, but genuinely a pleasure to use.

Technically, we learned how to architect a real-world application from the ground up. This meant:

Integrating a real-time data API (Finnhub) and managing its data flow without compromising performance.
Designing and implementing a secure backend with Supabase, which forced us to learn the ins and outs of database schemas and Row Level Security.
Leveraging the power of Framer Motion to create complex, fluid animations that make the application feel alive and responsive.

How We Built It

StackUp is a modern web application built with a focus on performance, aesthetics, and scalability.

Framework: Next.js (React)
Styling: TailwindCSS
Database & Auth: Supabase
Real-Time Market Data: Finnhub.io API
Animations: Framer Motion

Our development process was iterative. We started with high-fidelity designs inspired by modern software, which served as our north star. We then architected the database schema in Supabase, carefully planning out the tables for user profiles, holdings, transactions, and the gamified quest system. With the backend in place, we built out the frontend components in Next.js, connecting them to the live Supabase and Finnhub data streams. Every element, from the glowing progress bars to the live portfolio chart, was crafted to be part of a cohesive and engaging user experience.

Challenges We Faced

Cursor was used for debugging and refactoring We hit our fair share of roadblocks. Our biggest challenge was getting the backend security right. When we first implemented user sign-ups, we were hit with a generic "Database error saving new user." This forced us into a deep dive on Supabase's Row Level Security (RLS) policies. We learned the hard way that a secure database is locked down by default, and we had to write explicit, secure policies for every single table interaction.

We also ran into classic dependency hell with an ERESOLVE conflict in npm, which taught us the importance of careful package management. Finally, making sure the real-time stock data felt snappy and didn't overload the API required us to be strategic about our data-fetching and state management logic. Overcoming these hurdles was frustrating, but it ultimately made the final product more robust and resilient.