Overview
Chart Climber turns market charts into a bike game. Pick a stock or cryptocurrency and a time range, and its real price history becomes the track: every rally is a hill to climb and every crash is a descent. Collect coins, manage fuel, land flips, and set a high score.
Features
- Eight assets across US stocks, Indian stocks, and cryptocurrency.
- Four time ranges, from one month to five years.
- Physics-based riding with collisions, flips, and stunt scoring.
- Coins and fuel to keep each run strategic.
- Global leaderboards and saved personal bests.
- Keyboard and touch controls, with light and dark themes.
How it works
- Price history is fetched from CoinGecko or Twelve Data, with caching and bundled historical data as a fallback.
- Percentage price changes are converted into terrain slopes, so every asset rides consistently whatever its price level.
- Matter.js simulates the bike, and Canvas draws each frame with requestAnimationFrame and a tracking camera.
- Scores are saved to a PostgreSQL leaderboard through Next.js API routes.
Tech stack
- Framework: Next.js, React, TypeScript
- Game engine: Matter.js physics, HTML Canvas
- State: Zustand, localStorage for personal bests
- Data: Neon serverless PostgreSQL, CoinGecko and Twelve Data APIs
Engineering highlights
Fair terrain for every asset. Building slopes from relative movement rather than absolute price means a $10 stock and a $60,000 coin produce comparable rides.
Always playable. Cached responses and bundled historical data keep the game running even when a market API fails.
Clean separation. Physics, rendering, state, and persistence are independent layers, which keeps the game loop fast and the code easy to extend.