Quant Bro

Ever wanted to start investing in crypto but too scared to lose? This game is the perfect tool for you to learn and grow as a crypto investor!

Comment

Inspiration

The inspiration for Quant Bro comes from many sources. Originally I had no intentions of competing in the Solana category as I had no interest in crypto but as I read more of their docs I became well intrigued as it presented itself as an opportunity to teach myself Rust. I'm currently on chapter 5 of the Rust book but it was enough to get me through the Solana documentation. My interest peaked when their documentations also presented the ability to learn about TypeScript. These were both languages I have never built a fleshed out project in so I decided to give it a try. The idea was something I always had in mind, creating a stock trading game simulating real life prices. This gave those without the economic status or age the ability to learn how to invest early on! It's just meant to be a fun way of investing without the risk of losing it all but all the thrill of watching your money grow

What it does

Quant Bro Simulator is a "play-to-trade" game. It has two main parts:

  1. The "Earn" Page: Users start with $0. On the "wallet" page, they can click a "cookie" to earn in-game cash (heavily inspired by Cookie Clicker). They can use this cash to buy upgrades to earn faster.
  2. The "Convert" Loop: The in-game cash (which represents USD) can be "converted" into simulated SOL via the Solana Devnet. This conversion isn't just a simple swap; it's a real transaction. The app fetches the live SOL/USD price from the CoinGecko API, and the user must "spend" that amount of cash to call my on-chain program. The program then validates this and adds 1 SOL to their on-chain "save file."
  3. The "Home" Page: This is the player's main dashboard. It reads their "save file" from the Solana blockchain and shows their in-game SOL balance. It also fetches the live SOL price again to display the user's "Total Cash Value" in real-time.
  4. The "Market" Page: This page fetches and displays the top 10 cryptocurrencies from CoinGecko, sorted by market cap, showing real-time prices and 24-hour changes.

How I built it

This project is built in two main parts: the on-chain backend and the web-based frontend.

1. Backend (On-Chain Program)

  • Framework: Rust with Anchor (Solana's provided framework)
  • Blockchain: Solana (Devnet)
  • Program: The quant_bro_server program is deployed on the Devnet. It has two main functions:
    • initialize_player: This function is called once per user. It creates a new PDA (Program Derived Address) that acts as the user's permanent, on-chain "save file." It initializes their account with a starting balance of 5 simulated SOL.
    • exchange_money: This is the core game loop. When a user has enough "cash" on the frontend, our app calls this function. The function verifies the call and adds 1 SOL to the sol_balance in the user's PlayerData PDA.

2. Frontend (Web App)

  • Framework: React + TypeScript (built with Vite)
  • Routing: react-router-dom is used to create a multi-page app (StartScreen, Home, Wallet, Market) and a persistent sidebar layout.
  • Blockchain Connection: I used @solana/web3.js for core types (like Keypair, Connection) and @coral-xyz/anchor to connect to the deployed Rust program.
  • Live Data: I used axios to make API calls to the CoinGecko API to fetch all live crypto prices.
  • Wallet Management: For this hackathon, I opted for a simple (but insecure) localStorage system.
    • On the StartScreen, the app checks if a key is provided.
    • If the input is empty, a new Keypair is generated, and the private key (as a JSON array) is shown to the user in a modal, who must save it.
    • If a valid key is provided, the app uses it.
    • This key is then saved in localStorage to "auto-login" the user when they return.
  • Deployment: The frontend is deployed live on Vercel and configured with the provided .tech domain. All API keys and RPC URLs are securely managed using Vercel's Environment Variables.

Challenges I ran into

  • Initial Tech Stack: At first I tried to build this as a desktop app in Python with Tkinter. This was a dead end as the libraries available were poorly documented as well as outdated. It was much easier to use a web application as Solana provided a well rounded library for it.
  • The "429" Rate-Limit Wall: My app was constantly failing to initialize players. I discovered the public Solana Devnet RPC is heavily rate-limited. I solved this by creating a free dedicated RPC endpoint on QuickNode (who's API key I accidentally pushed to GitHub).
  • The Faucet is Dry: Even with a good RPC, my requestAirdrop call kept failing. The error message "faucet has run dry" taught me that you cannot rely on airdrops for a live demo. I solved this by manually pre-funding our test wallet via Solana's faucet and commenting out the airdrop code from my app.
  • Library Hell: The documentation for the JavaScript libraries is very version-specific. The provided Solana documentations were helpful but slightly outdated so often times function calls would fail.
  • One Man Army: As a solo, I was forced to between a lot of trade-offs. I will admit that I had to use AI, mainly for the CSS (I don't enjoy designing), in order to finish in time. Due to the limited man-power and time, I was forced to give up on a lot of features . My code itself reflects that it is very sloppy and can generally be more organized. I noticed a lot of repetition but it was faster to copy and paste code than writing a whole new function and cross-state management.

Accomplishments that I'm proud of

  • It Works! I have a 100% working, end-to-end, full-stack application (my very first).
  • I successfully deployed a Rust program to the Blockchain and a React app to the web accessible to anyone.
  • The app uses live, real-time price data from CoinGecko, making the simulation feel real.

What I learned

  1. React State vs. On-Chain State: I learned the price for managing states between the client and the server. I debated whether I should add server-sided validation for state of the player's money as well as their clicking power. I decided not too as this would waste too much resources making calls to the server however the trade-off was poorer security.
  2. Blockchain Technology: This project was a deep dive into the Solana account model and how all it really is, is asymmetric encryption. The keypairs that define a user's identify is a public key representing the address and the private key being the wallet representing a users assets. Signing was a crucial step for validating actions on the Blockchain however, the Anchor framework abstracted a lot of that away as long as I told Anchor the set of guidelines.
  3. Client to Server Communication via RPC: I learned to use a REST API for communication between a centralized web-server via axios. I also learned how to communicate to a network using Remote Procedure Calls (RPC) by connecting to a node, in this case the Rust server.
  4. Deploying to the Internet: One of the most exciting part of this project. I learned how to get a domain name then give it records that allowed anyone on the internet to access my website. It was amazing being able to add hidden environment variables that allowed the program to run without exposing developer secrets.
  5. Rust and Typescript: Two very practical tools that I’ve never gotten practice with. I enjoyed Rust’s safety checks, it was almost never an issue with the server. Although most of my problems came from working with React and Typescript in a more expressive environment for the first time, I enjoyed the state systems as well as the components aspect that allowed for easy organization.

What's next for Quant Bro Simulator

  • Refactor to a "Web3" Wallet: The first priority is to rip out the localStorage key system and replace it with the Solana Wallet Adapter. This makes the app truly secure for all users.
  • Build the "Buy" Function: Implement the "Buy" buttons on the Market page so that players can buy more than one type of crypto, simulating a real market. This will require new server-sided functions to ensure that the user's actions are valid as well as updating the Blockchain with the users actions.
  • Expand the "Save File": The PlayerData PDA needs to be upgraded. I'll likely change sol_balance to be a HashMap that can store all the different tokens the user buys
  • More Mini-Games: The "cookie clicker" is just a prototype. I want to add more "play-to-earn" games on the Wallet page that aren't as easy. Money doesn't just grow on cookies.
  • Transaction Page: Since each action such as buying, transferring, selling, etc, is tracked by the Blockchain and given a signature, I would like to add user activity tracking as its own page. Originally this was one of the intended features but due to time constraints I had to omit it.

Built With

Share this project:

Updates