Trader Tots

Learn feature, it describes term commonly used with stocks.
The chatbot, it will answer any questions regarding stocks and help kids through their journey of investing.
Sign up/login page
Stocks
Accounts page, it shows account growth and compound interest calculator to help with future inversting decision.
News update.
Profile Performance graph and account balance.
Leaderboard.
Slide to present 1
Slide to present 2
Slide to present 3
Slide to present 4

Inspiration

We realized that most stock simulators are built for high schoolers and undergraduates, leaving younger children behind. We created Trader Tots to bridge that gap by replacing intimidating jargon with a simplified, visual approach to financial literacy.

What it does

Trader Tots is a simplified financial ecosystem designed to make the stock market feel like a game rather than a chore. Here is how it works:

Kid-Friendly Market: We curated a selection of recognizable, "child-friendly" stock options, omitting confusing technical details to focus on the core concepts of ownership and growth.

Quick-Learn Feature: We created a simple tool that provides short definitions of common financial terms to help kids learn the lingo as they go.

AI Sidekick: A built-in chatbot acts as a personal financial tutor, explaining market trends and answering questions in simple, easy-to-understand language.

Visual Interest Lab: An interactive accounts page where kids can view interest calculations. By adjusting sliders, they can see real-time visual predictions of how their money grows over time.

The Leaderboard: To keep users engaged, we implemented a global ranking system. Kids can compete with friends to see who can grow their portfolio the most, turning financial literacy into a fun, social challenge.

Market News Feed: To help kids understand why stocks move, we built a market news section to help users connect world events with price changes.

How we built it

We built a full-stack application by bridging modern web frameworks with real-time financial data:

Design & Prototyping: We began by mapping out the user journey in Figma, focusing on a clean, vibrant UI that feels accessible to children.

Frontend: The interface was developed using React with Vite for a lightning-fast development experience and a responsive, snappy user interface.

Backend & Database: We used Node.js to run our server and MongoDB for a flexible, scalable database to store user portfolios and leaderboard rankings.

Real-Time Data: To keep the simulation grounded in reality, we used Python and the yfinance library to fetch and process live stock market updates.

AI Integration: Our chatbot was powered by OpenRouter (integrated into our Vite environment), allowing us to provide instant, kid-friendly explanations for complex financial terms.

Challenges we ran into

The Database Learning Curve: Since we were unfamiliar with MongoDB, we initially struggled with the logic of adding and retrieving data. This led to several "head-scratching" moments where the leaderboard wouldn't update or the user’s balance would reset to its starting value after every trade.

Syncing the Stack: We faced a major hurdle in getting our Python scripts (for yfinance) to talk to our Node server and React frontend. Managing real-time data flow across different languages and environments in a limited timeframe was much harder than we anticipated.

The "Port" Puzzle: Running multiple services—our server, the data script, and the Vite frontend—on different ports created a logistical mess of environment variables and connection errors that we had to troubleshoot on the fly.

Accomplishments that we're proud of

Full-Stack Orchestration: We are incredibly proud of successfully building a multi-language, full-stack app. Getting Node, Python, and React to work in harmony was a major win for the team.

Mastering New Tech: Despite being new to MongoDB, we successfully implemented a persistent database that saves user balances, and powers a live leaderboard.

Live Market Integration: We successfully integrated real-time stock updates using yfinance, giving kids a realistic (but safe) experience of how the actual market moves.

The AI Sidekick: We successfully deployed a chatbot via OpenRouter that translates complex finance into "kid-speak" instantly.

What we learned

Starting from Scratch: We were new to almost every technology and concept in our stack. We learned how to implement a React frontend, a Node server, and a Python data script as separate, communicating services in just one weekend.

Database Fundamentals: We moved from being unfamiliar with databases to successfully managing user data and session persistence with MongoDB.

Financial Translation: We learned how to translate complex concepts like compound interest and real-time stock movements into a simplified, visual UI.

What's next for Trader Tots

RRSP & Savings Modules: We want to introduce long-term savings concepts, like RRSPs, to show kids the power of tax-free growth and saving for the future.

The "Needs vs. Wants" Budgeter: A simple tool to help kids practice balancing their virtual allowance between daily spending and long-term investing.

Parental/Classroom Integration: A way for parents to link real-world chores/activities to virtual rewards, turning household/in-class tasks into investment capital.

Gamification: Adding a virtual game within the app for users to purchase items with their virtual currency, allowing for customization.