The Trader: Virtual Stock Market Simulation

Overview

The Trader is a web-based virtual stock trading simulation game built with Express and MongoDB. Players start with a virtual capital of $10,000 and simulate one year of investing, advancing month by month. Each month, randomized news events (positive or negative) influence the stock prices of 5 fictional companies. Players can buy, sell, or hold regular, leveraged (2×), or short (−1×) positions for each stock.

The goal is simple:

Grow your portfolio to $20,000 (and more!) by the end of the year through strategic investing and risk management.

Data Model

The application will store Users, Stocks, and Events, and track each player's individual simulation of the virtual market.

Each User has:

• basic info (session id, username, cash balance, current month),
• a portfolio of owned stocks (list of objects that contains: stock symbol, stock name, quantity, leverage, purchase price and current price),
• a history of their progress (month, list of applied events, list of potential events for the next month, stock prices, and total portfolio value).

Each Stock has:

• a symbol, name, and basePrice (static starting value).

Each Event has:

• a title and description,
• an array of affected Stocks, each with its symbol and percentage impact on price (One event can affect multiple stocks simultaneously).

Relationships:

• Users reference multiple Stocks (via stockSymbol).
• Users record monthly Event references in their history.
• Events reference affected stocks by symbol (not by ID).

An Example User:

{
  sessionId:"BwsxZhh5bVEOA2HDjkVLONoVoZJTh4f4"
  username: "investor",
  cash: 9800,
  month: 2,
  portfolio: [
    { stockSymbol: "MCHS", stockName: "MacroHard Corp." quantity: 15, leverage: "1x", purchasePrice: 150, currentPrice: 150 },
    { stockSymbol: "MCHS", stockName: "MacroHard Corp." quantity: 0, leverage: "2x", purchasePrice: 75, currentPrice: 0 }
  ],
  history: [
    {
      month: 0,
      events: [],
      candidateEvents: [ObjectId("1"), ObjectId("2"), ObjectId("3")],
      stockPrices: [
        { stockSymbol: "MCHS", price: 150 },
        { stockSymbol: "ELVM", price: 220 },
        { stockSymbol: "KROL", price: 95 },
        { stockSymbol: "BIOX", price: 125 },
        { stockSymbol: "GZEL", price: 60 },
      ],
      portfolioValue: 10000
    },
    {
      month: 1,
      events: [ObjectId("1"), ObjectId("4"), ],
      candidateEvents: [ObjectId("11"), ObjectId("21"), ObjectId("33")],
      stockPrices: [
        { stockSymbol: "MCHS", price: 150 },
        { stockSymbol: "ELVM", price: 240 },
        { stockSymbol: "KROL", price: 95 },
        { stockSymbol: "BIOX", price: 165 },
        { stockSymbol: "GZEL", price: 60 },
      ],
      portfolioValue: 10000
    }
  ]
}

An Example Stock:

{
  symbol: "MCHS",
  name: "MacroHard Corp.",
  basePrice: 150
}

An Example Event:

{
  _id: "671e5c12b8f1f2a9d1a5e9ab",
  title: "Bitcoin Surges to $100K",
  description: "Massive rally in cryptocurrency market boosts miners.",
  month: 2,
  affectedStocks: [
    { stockSymbol: "MCHS", impact: 0.3 },
    { stockSymbol: "GZEL", impact: -0.2 }
  ],
}

Link to Commented Schema

Wireframes

Images used are captured directly from application

/ - Homepage / Start Screen

/market - View Stocks and Monthly News

/trade - Buy / Sell Interface

/portfolio - Performance Dashboard

/end – Game Result / Summary Page

Site map

User Stories or Use Cases

1. As a new player, I can start a new trading simulation with $10,000 in virtual cash so that I can begin investing.
2. As a returning player, I can continue my previous game so that I can track my long-term progress.
3. As a player, I can view the list of available stocks and current prices so that I can decide which company to invest in.
4. As a player, I can read monthly news events so that I can anticipate which stocks might rise or fall.
5. As a player, I can buy and sell stocks (including 2× leveraged or short options) so that I can manage my portfolio strategically.
6. As a player, I can advance the simulation month by month so that I can react to market events over time.
7. As a player, I can see my portfolio’s value visualized in a line chart so that I can track performance and trends.
8. As a player, I can view a summary of my total profit/loss after 12 months so that I can evaluate my trading strategy.
9. As a player, I can restart the game after it ends so that I can try different investment approaches.

Research Topics

• (6 points) React Frontend Framework

  • React is a front-end JavaScript library used for building reusable, component-based user interfaces. It allows developers to efficiently manage dynamic states and render only the parts of the page that change.
  • Using React allows the application to handle complex UI updates smoothly without full page reloads. For instance, showing the balance change after a stock is purchased.
  • I will build the frontend using React, creating separate pages for Home, Market, Trade, Portfolio, and End.
  • React will manage UI state for stock prices, user portfolio, and monthly updates.
  • The app will use components for layout (Navbar, StockTable, TradeForm, ChartPanel).

• (2 points) Tailwind CSS

  • Tailwind CSS is a utility-first CSS framework that provides prebuilt design classes directly in HTML/JSX, making it easy to build responsive layouts.
  • I will use Tailwind CSS to style React components for a clean, modern dashboard layout.
  • Custom theme and responsive utilities will be configured in tailwind.config.js.
  • This will improve layout consistency across all pages.

• (2 points) Chart.js

  • Chart.js is a JavaScript library used to create visual data representations like line charts, bar graphs, and pie charts. It is simple, responsive, and works well with React through wrapper libraries.
  • I will use Chart.js inside React (via react-chartjs-2) to visualize the user’s portfolio performance over time.
  • The chart will dynamically update each month as stock values change.
  • This will be implemented on the /portfolio page.

10 points total out of 10 required points

Link to Initial Main Project File

Annotations / References Used

1. Dotenv Package Documentation
2. React Official Documentation
3. Tailwind CSS Documentation
4. Chart.js Documentation
5. Gemini