Trade Lab

Home Tab
Explore Tab
Games Tab
Learn Tab

Inspiration

Investing is intimidating. The jargon is confusing, and the usual way to learn is by making mistakes with real money.

I wanted a place where anyone could practice buying and selling stocks, make mistakes safely, and understand why things happened, not just watch a number go up or down.

What it does

Trade Lab is a practice investing app. You start with $10,000 of pretend money and learn by doing:

Guided tour: a 5-step walkthrough takes you through your first buy and sell.
"What happened?" breakdowns: after every trade, the app explains what you paid, how much cash you have left, and what a 5% move would mean for you. After a sale, it shows your realized gain or loss.
Animated jargon: underlined terms such as market cap, P/E ratio, volatility, dividend, and unrealized gain/loss open a short animation and a plain-English explanation.
Portfolio view: total value, invested vs. cash, holdings with gain/loss, and an allocation donut.
Simulated live prices for 8 sample stocks that move every few seconds.
Badges and a Learn tab that track which terms you've opened and what you've earned.

Two games that teach by playing

The 15-Year Race teaches risk vs. reward. You race a 🐆 (90% stocks) and a 🐢 (40% stocks) over 15 years, deciding each year whether to hold, shift your mix, or add money. A car repair in year 5 tests whether you have savings, and a 25% drop in year 9 tests whether you'll panic-sell. At the end, a dashed line shows what would have happened if you'd never touched your portfolio.

Don't Drop the Coins teaches diversification. You spread 10 coins across four sector baskets, then a storm hits. In round 5 a bonds basket appears, and everything crashes except bonds. At the end, the game compares your result to putting everything in one basket.

Game money is separate, so your portfolio is never affected.

How I built it

Trade Lab is a front-end-only app with no backend, database, or login.

React builds the screens and components, with Vite as the dev server and build tool.
Tailwind CSS handles styling and the design tokens, and HTML5/CSS3 provide the page and color variables.
Framer Motion powers the animations: sheets, term explainers, and the game effects.

Prices and game scenarios are simulated, which keeps the app free to run and works without an internet connection. The app says clearly that prices aren't real.

A few design decisions shaped the build:

Games reward process, not luck. Stars and badges depend on how you handled the sequence (staying invested, diversifying), not just your final profit.
Phone-first layout. The main app is portrait, and the games switch to landscape.
Every outcome gets an explanation. The lesson comes after the result, never before.

Challenges I ran into

Technical

Making prices feel alive without a market API. With no backend or data feed, prices come from a simulator that updates every few seconds. They had to move believably, with trends and noise, while portfolio values, gain/loss, and the allocation donut stayed consistent on every tick.
Choreographing game animations. One year of the Race fires the sky change, rain, a lightning flash, a screen shake, racers moving along their lines, and the leaderboard reshuffling. In Don't Drop the Coins, the storm sweeps across, lightning hits one basket, coins scatter, and the others sparkle. Sequencing all of that so it reads clearly, doesn't fight the timer bar, and doesn't lag on a phone took repeated tuning.
Building charts and teaching animations by hand. I used no chart library, so I handled the scaling, colors, and animation timing of every SVG myself. For example, P/E ratio is shown as a share price against years of profit stacking up until it reaches 30:

$$ \text{P/E} = \frac{\text{share price}}{\text{earnings per share}} = \frac{300}{10} = 30 $$

Designing a game engine that teaches every time. Scenarios are simulated, but every Race needs at least one boom and one crash, the year 5 and year 9 events must land on time, and results need enough variety that players can't memorize them. Auto-play also had to run the same logic as manual play so the two never drifted apart.
State without a database. Everything lives in localStorage. I had to block invalid trades (spending more cash than you have, selling shares you don't own), keep game money fully separate from the real portfolio, and make "Reset demo" wipe everything cleanly.
Landscape games inside a portrait app. The games need width, so switching orientation while keeping the timer bar, buttons, and side panel usable took several layout passes.

Personal

Cutting the scope. My first game designs ran 10 to 15 minutes and ended in a long passive animation. I shortened them to 5 to 7 minutes and gave the player a decision every round, which meant giving up features I liked.
Teaching finance without making it feel like gambling. It would have been easy to add confetti on every win and flashing numbers. I deliberately rewarded good habits, such as holding through a drop and diversifying, over big profits.
Explaining jargon in a few seconds. Terms like P/E ratio are easy to define and hard to make someone feel. Finding one picture and 2 to 3 plain sentences for each term took more rewrites than I expected.
Directing an AI coding agent. Working with Claude Code meant describing exactly what I wanted, checking what it built against how a beginner would actually use it, and catching things that looked right but didn't teach well.

Accomplishments that I'm proud of

A complete learning loop: intro, guided tour, first trade, explanation, badge.
Every jargon term has its own animation.
Two games that each end with a "what if" comparison, which is where the learning really lands.

What I learned

Showing someone the consequence of a choice teaches more than telling them the rule. Building Trade Lab also taught me how much design goes into keeping a finance app calm, clear, and honest instead of exciting. The best moments in the app are the quiet ones, like the "if you'd never touched it" line.

What's next for Trade Lab

More stocks, ETFs, and bonds to practice with
Real market data
More games, such as a "time machine" mode that drops you into the 2008 or 2020 crashes
Classroom mode for teachers, and a progress history for each learner