TradeStreet

Inspiration

We were inspired to build TradeStreet after wanting to create an interactive, educational platform that combines real-time data visualization, AI-generated content, and financial market simulation. The idea was to create a synthetic stock market where users could learn about trading in a risk-free environment, with AI-generated news events that dynamically affect stock prices - similar to how real markets react to breaking news. We wanted to demonstrate how AI-generated news can influence financial markets in real-time, making abstract concepts more tangible and engaging.

What it does

TradeStreet is a fully functional, real-time synthetic stock market simulation. Users can:

Browse AI-Generated Companies: View a list of synthetic companies with realistic profiles across different sectors (Technology, Healthcare, Finance, Energy, Consumer Goods)
Trade Stocks: Buy and sell shares with virtual cash ($100,000 starting balance), tracking positions and calculating real-time profit & loss
Watch Live Charts: View candlestick charts that update in real-time as prices change, with historical data showing price movements over time
Monitor Market News: See AI-generated news events appear every 30 seconds, with sentiment scores that dynamically affect stock prices. Positive news creates green candlesticks (price goes up), negative news creates red candlesticks (price goes down)
Track Portfolio: Monitor cash balance, positions, total portfolio value, and P&L calculations in real-time

The platform runs entirely in the browser with prices updating every 4 seconds, creating an engaging and realistic trading experience.

How we built it

We built TradeStreet using React 18 with TypeScript and Vite for fast development. Here's our architecture:

Market Engine: Built a custom React hook (useMarket) that manages the entire market state using useState and useEffect. Price updates run on a 4-second interval, calculating new prices based on volatility, sentiment from recent news, and random drift using a mathematical model.
AI News Generator: Integrated Claude API to generate realistic financial news events. We structured prompts to return JSON with sentiment (-1 to +1) and magnitude (0 to 1) values. News affects stock prices for 2 minutes after publication, creating visible price movements in the charts. We also implemented fallback news generation that works without the API.
Candlestick Charts: Implemented financial candlestick visualization using lightweight-charts library. We converted individual price points into OHLC (Open, High, Low, Close) candles by grouping consecutive prices, ensuring proper wicks (high/low) extend beyond the body (open/close) for authentic candlestick appearance.
Trading System: Built a portfolio management system with buy/sell functionality using LocalStorage for persistence. The system tracks positions, average prices, and calculates real-time P&L.
UI/UX: Used Tailwind CSS to create a dark, terminal-inspired interface. We organized the layout into three columns: stock list, chart/trading panel, and portfolio/news feed.

Challenges we ran into

Candlestick Rendering: Initially, the charts were showing as blocks instead of proper candlesticks. This required understanding how lightweight-charts handles time scales, bar spacing, and ensuring OHLC values properly represent wicks extending beyond candle bodies. We solved this by implementing proportional wick sizing relative to candle body size.
News Feed Flickering: The news section was flickering constantly because useEffect was re-running on every state update. We solved this by using refs to track initialization state and optimizing dependency arrays to prevent unnecessary re-renders, plus memoizing the sorted news list.
Chart Updates: Ensuring candlesticks shift smoothly left as new data arrives (instead of jumping between views) required carefully managing when to call fitContent() versus scrollToRealTime(), and preserving existing candles while only updating the newest one to prevent historical candles from changing.
Color Stability: Preventing historical candlesticks from changing colors on each update required implementing a system to preserve existing candle data and only update the most recent candle as it forms. This involved tracking existing candles and filtering new ones properly.
Performance: Managing multiple timers (price updates every 4 seconds, news every 30 seconds) and state updates without causing performance issues required careful cleanup, memoization strategies, and using refs to prevent unnecessary effect re-runs.

Accomplishments that we're proud of

Beautiful Candlestick Charts: We successfully implemented authentic-looking candlestick charts with proper wicks, colors, and spacing. The charts smoothly shift left as new candles appear, creating a professional financial charting experience.
Seamless AI Integration: We integrated Claude API to generate realistic, impactful financial news that actually affects stock prices in real-time. The news feed updates smoothly without flickering, and users can see the immediate impact of news on prices.
Real-Time Performance: The entire market runs smoothly in real-time with multiple timers and state updates, without performance issues or flickering. We achieved smooth price updates and chart animations.
Polished UI: Created a cohesive, terminal-inspired dark theme interface that's both functional and visually appealing. The layout is intuitive and responsive.
Robust Error Handling: Implemented fallback mechanisms for both company generation and news generation, ensuring the app continues working even if AI APIs are unavailable.

What we learned

Financial Charting: We learned how to implement candlestick charts using lightweight-charts, understanding OHLC (Open, High, Low, Close) data structures and how to convert time-series price data into proper candlestick patterns with visible wicks.
React Performance Optimization: Managing state updates in real-time applications without causing flickering or performance issues required careful use of React hooks, refs, and memoization techniques. We learned to optimize re-renders by using useMemo, proper dependency arrays, and refs to track initialization state.
AI Integration: Integrating Claude API to generate realistic financial news with sentiment analysis showed us how to structure prompts for consistent JSON output and handle API failures gracefully with fallback mechanisms.
Real-Time State Management: Coordinating multiple timers (price updates every 4 seconds, news every 30 seconds) while maintaining consistent state taught us about proper cleanup, avoiding race conditions, and preventing unnecessary effect re-runs.
Data Visualization: We learned about financial charting libraries, time scales, and how to properly format data for candlestick visualization. Understanding the difference between simple line charts and OHLC candlestick data was crucial.

What's next for TradeStreet

We have several exciting features planned for future development:

Additional Chart Types: Adding support for different chart types (line, bar, area) that users can toggle between
Technical Indicators: Implementing popular technical indicators like moving averages, RSI, MACD, and Bollinger Bands to help users analyze trends
More News Variety: Expanding the news generation to include more varied event types and longer-form news articles with more detail
Multi-User Trading: Adding the ability to compete with other traders in real-time, with leaderboards and rankings
Historical Data: Allowing users to replay past market sessions and see how news events affected prices over time
Advanced Trading Features: Adding limit orders, stop-loss orders, and other advanced trading features to make it more realistic
Mobile Responsiveness: Optimizing the interface for mobile devices so users can trade on the go
Analytics Dashboard: Adding detailed analytics about trading performance, win rates, and portfolio analysis