Stonkify

Start with $10,000 and trade your way to the top. Stonkify is a real-time stock market simulator with AI coaching, news events, risk analysis, and leaderboards.

Comment

Inspiration

A lot of people don't learn how the stock market works because they're scared of losing real money. I noticed that some people avoid investing completely, while others jump in without understanding the risks and lose money. There are paper trading apps, but most of them feel boring and look like spreadsheets.

I wanted to make something that feels more like a game while still teaching people real investing concepts. My goal was to create a safe place where players can learn, make mistakes, and improve without risking actual money.

What it does

Stonkify is a stock market simulation game where players start with $10,000 and try to grow their portfolio while avoiding bankruptcy.

Features include:

  • Live stock prices that change every game tick
  • More than 10 different stocks in categories like Stable, Growth, Meme, and Event stocks
  • Buy, sell, short sell, leverage, stop-losses, take-profits, and margin calls
  • A custom news system with earnings reports, market crashes, hype events, and other surprises
  • Prediction betting where players can bet on market direction for bigger rewards
  • An AI advisor powered by Gemini 2.5 Flash that gives advice based on the player's portfolio
  • A 3D risk graph that shows portfolio risk in real time
  • Three game modes: Endless, Timed, and Survival
  • 31 achievements, a leaderboard, and automatic saving

The game is designed to teach players how markets work while still being fun to play.

How I built it

Tech Stack

I built Stonkify using:

  • React 18
  • TypeScript
  • Vite
  • Zustand
  • Tailwind CSS
  • Recharts

Market Simulation

The stock prices are generated using a random walk system with extra factors like:

  • Market sentiment
  • Stock momentum
  • News events
  • Sector correlations

This makes the market feel more realistic instead of completely random.

When major events happen, groups of related stocks can move together just like in real markets.

3D Risk Graph

I created a custom 3D visualization using only the HTML5 Canvas API.

Instead of using a 3D library, I built the math myself using:

  • Fibonacci sphere positioning
  • Perspective projection
  • Rotation calculations
  • Depth sorting

Players can rotate the graph with their mouse and see how risky their portfolio is from different angles.

AI Advisor

The AI advisor uses Gemini 2.5 Flash.

Whenever a player asks for advice, the AI receives information about:

  • Current market conditions
  • Portfolio holdings
  • Profit and loss
  • Cash balance
  • Risk levels

Because it gets real game data, it can give advice that is specific to the player's situation.

Saving System

The game automatically saves progress using localStorage.

This includes:

  • Portfolio data
  • Achievements
  • Leaderboards
  • News history
  • Game progress

Everything works completely in the browser with no backend required.

Challenges I ran into

Making the market feel realistic

At first, the stock prices felt too random. It was difficult to balance sentiment, momentum, and volatility so the market behaved in a believable way.

After a lot of testing, I adjusted the values until market trends and crashes felt more natural.

Building a 3D graph without a 3D library

Creating the 3D visualization was one of the hardest parts of the project.

I had to learn and implement:

  • 3D coordinate systems
  • Perspective projection
  • Object rotation
  • Depth sorting

All of this was done using only Canvas and JavaScript.

Getting useful AI responses

The AI originally gave very generic investing advice.

I improved the results by sending detailed information about the player's portfolio and market conditions. This helped the AI give much more useful and relevant suggestions.

Managing fast game updates

The market updates every 200 milliseconds to 2 seconds.

Because so many calculations happen every tick, it was challenging to keep the game state synchronized and avoid bugs caused by stale data.

Accomplishments that I'm proud of

  • Building a fully custom 3D visualization without using any 3D libraries
  • Creating a market simulation that can generate realistic trends, crashes, and hype cycles
  • Making an AI advisor that gives personalized advice instead of generic responses
  • Designing an interactive tutorial that works while the market continues running
  • Building the entire project with no backend so it works offline

What I learned

This project taught me a lot about both programming and finance.

Some of the biggest things I learned were:

  • Building realistic simulations is harder than it looks
  • Small changes in volatility or momentum can completely change market behavior
  • AI responses improve a lot when you provide detailed context
  • Random walk models can create surprisingly realistic stock charts
  • localStorage is powerful enough to save a full game without needing servers

What's next for Stonkify

I have a lot of ideas for future updates:

  • Options trading with calls and puts
  • Candlestick charts and technical indicators like RSI and MACD
  • Online multiplayer leaderboards
  • Replay mode for reviewing past trading sessions
  • A mobile app built with React Native
  • Economic calendar events based on real-world schedules
  • A learning mode with lessons and challenges that teach financial literacy step by step

My long-term goal is to turn Stonkify into a fun game that also helps people learn real investing skills in a safe environment.

Built With

Share this project:

Updates