Inspiration
Our inspiration for Nook came from seeing how intimidating financial systems can be for people who are just starting to navigate them. Two of our team members are technology majors with a double major in Financial Economics, while three are involved with the Volunteer Income Tax Assistance (VITA) program at UMBC. Through VITA, our members help people file their tax returns, claim the money they are entitled to, and navigate financial processes that can often feel confusing and overwhelming. These experiences showed us how important accessible financial education can be, especially for people who have not had many opportunities to learn about money.
We wanted to bring that same sense of guidance to investing, particularly for high school and college students who may be interested in building wealth but do not know where to begin. Our project initially started under the name Investment Lens, but as we developed our ideas and visual identity, we reimagined the experience as Nook: a welcoming, interactive space where beginners can explore investing without feeling intimidated. Our tagline, “There's more to money than meets the owl,” reflects our belief that financial literacy goes beyond numbers and terminology. It is about understanding the bigger picture and feeling confident enough to ask questions.
What it does
Nook is an interactive financial education platform designed to make investing more approachable for beginners, especially high school and college students. It helps users explore investment concepts, understand unfamiliar financial terminology, and practice making investment decisions in a hands-on environment. Rather than telling users what to buy, Nook focuses on helping them understand what they are looking at and why it matters. The platform includes an interactive stock-market game where users practice buying and selling stocks, learn how their decisions affect their results, and explore ways to improve their performance without risking real money. With multiple difficulty levels, users can gradually challenge themselves as they become more comfortable with investing. Nook also includes a Gemini-powered AI chatbot at the bottom of the screen, where users can ask questions about stocks, investing, and financial literacy and receive explanations in accessible language. Our goal is to make learning about money feel less like navigating a complicated system and more like exploring something new in a welcoming space.
How we built it
We built Nook using HTML, CSS, JavaScript, and React for the frontend, Supabase for authentication and database functionality, and the Google Gemini API for our AI-powered chatbot. We used VS Code as our development environment and Microsoft Live Share to collaborate on the same codebase in real time. For the visual design, we combined our own ideas with AI-assisted brainstorming using Claude to explore different layouts, color palettes, typography, and user interface concepts. Our process began with identifying a problem, researching our intended audience, and planning how we could make investing easier to understand. We then developed our branding, moving from our original Investment Lens concept to the final Nook identity and its owl-inspired tagline. From there, we designed and built the interface, implemented interactive features, integrated our APIs and backend tools, and continuously tested and debugged the application. We paid particular attention to how the visual design, accessibility, and interactions could influence the user experience, including an interactive light-to-dark mode toggle that helps make the site feel engaging and personal.
Challenges we ran into
One of our biggest challenges was turning our ideas into a cohesive, functioning product within the limited time of a hackathon. We wanted Nook to feel polished, welcoming, and interactive, and achieving that took considerably more iteration than we initially expected. Small styling inconsistencies, unexpected behavior, and issues connecting different components required repeated debugging and testing. Integrating the Gemini API, setting up Supabase authentication, and working toward saving user information and game progress also introduced technical challenges that pushed us beyond what we initially knew. Collaboration was another learning curve. Everyone brought different ideas and preferences, especially when it came to UI design and the overall direction of the project. We had to learn how to communicate our ideas, listen to one another, compromise, and build on each other's suggestions instead of treating different opinions as obstacles. We also wanted the hardest difficulty of our game to use live stock-market data through an API, allowing users to practice with current market prices. We were not able to fully implement this feature within the hackathon timeframe, but it remains one of our main goals for future development.
Accomplishments that we're proud of
We are especially proud of Nook's user interface and overall user experience. We invested a significant amount of time refining the design, experimenting with colors and layouts, and debugging visual issues until the website felt more cohesive. We are proud of the interactive light-to-dark mode toggle, the approachable branding, and the way the different elements of the site come together to make financial education feel less intimidating. We are also proud that we brought together an AI assistant and a hands-on stock-market game in one educational experience. The game allows users to experiment with buying and selling decisions and learn from their results without putting their own money at risk. Most importantly, we are proud that we took an idea inspired by real experiences helping people navigate complicated financial systems and turned it into a working project with a clear purpose: helping beginners build confidence before making financial decisions of their own.
What we learned
This project taught us how much work goes into building a complete product, from identifying a problem and researching potential solutions to designing a brand, building an interface, integrating functionality, and debugging the result. We gained experience with HTML, CSS, JavaScript, React, API integration, Supabase authentication, and data storage. We also learned how to use AI tools as part of our development and design process while still bringing our own ideas and judgment to the final product.
For all of us, collaborating through Microsoft Live Share in VS Code was a new experience. We learned how to work on a shared codebase in real time, coordinate changes, and solve problems together. We also became more aware of how interface design can affect accessibility, usability, and user preferences. Beyond the technical skills, we learned how to navigate different opinions, compromise on design decisions, and build on one another's strengths. The experience reminded us that creating a good product is not just about writing code; it is about communication, creativity, patience, and teamwork. Even through long debugging sessions and challenging decisions, we learned how to have fun while working toward a shared goal.
What's next for Nook
Our next step is to make Nook more realistic, personalized, and accessible. We want to integrate live stock-market data into the hardest game difficulty so users can practice with current market prices and experience more realistic market conditions. We also hope to expand the platform's investment explanations, improve the AI assistant, and strengthen the ability to save user progress and game results so learners can track their development over time. Long term, we envision Nook as an educational layer that could integrate directly into banks, brokerages, and student finance platforms. Imagine exploring an investment in your bank app and seeing a “Learn it with Nook” option that explains a fund's holdings, fees, risks, and diversification in plain language. After learning, users could return to their original investing platform better informed and more confident about their next steps. We want Nook to help bridge the gap between financial curiosity and financial confidence, because there's more to money than meets the owl.
Built With
- css
- geminiapi
- html
- javascript
- react
- supabase
- vercel
- vite
Log in or sign up for Devpost to join the conversation.