PREDICTIVE GAME - QuanTheo Arena

A real-time cryptocurrency price visualizer built with TanStack Start and deployed on Netlify. Watch a visual bull vs. bear fight that reacts to live market movements — when the price goes up, the Bull attacks; when it drops, the Bear strikes.

MMA theme example.

MUAY THAI theme example.

ICE AGE theme example.

IOG theme example.

Features

• Live Price Feed — Connects to the Binance WebSocket API for real-time tick-by-tick price data.
• Visual Fight — 6 unique cartoon illustrations (Bull attacks, bear attacks) cycle automatically on every price change.
• Top 10 Cryptocurrencies — Dropdown and leaderboard ranked by market cap, powered by CoinGecko.
• 24h Stats — Price change percentage and market cap for each coin QuanTheo Arena.

Developer & Designer Tasks

GitHub Tasks for Developers

1. Crypto Wallet Integration Implement wallet connection support directly on QuanTheo Arena so users can connect and interact with crypto wallets for betting. Required Features. Connect wallet button. Support for: MetaMask. Coinbase Wallet. Binance Wallet. WalletConnect-compatible wallets. Detect connected wallet address. Display wallet balance. Connect betting amounts directly from the wallet. Approve transactions securely. Handle transaction confirmations and errors. Mobile-friendly wallet connection support. Optional Advanced Features. Multi-chain support. Deposit/withdraw system. On-chain betting history. Smart contract integration. Token rewards and NFT achievements.

---

GitHub Tasks for Designers.

New Visual Theme for BetFight. Create a strong fight-arena visual identity mixing: MMA or other combat sports. Bulls vs. Bears market action. High-energy gaming visuals.

REQUIRED ARTWORK. Fighter & Match Visuals. Head-to-head fighter images before fights VS screens. Arena backgrounds. Betting Interface Visuals. Idle Price Images. Create at least: 5 idle price images.

Bulls vs. Bears Action Images. Create action scenes for: Bull punches. Bull kicks. Bear punches. Bear kicks. KO Images for Bull and Bear.

CREATE:

PNGs (1 zip with at least 14 png) 1448x1086 px

BULL MOVES:

bull-move-green-left-uppercut-red-face.png

bull-move-green-right-punch1-red-face.png

bull-move-green-right-punch2-red-face.png

bull-move-green-right-punch3-red-face.png

bull-move-green-left-punch1-red-face.png

BEAR MOVES:

bear-move-red-left-punch1-green-face.png

bear-move-red-left-punch2-green-face.png

bear-move-red-right-punch-green-face.png

bear-move-red-right-punch2-green-face.png

bear-move-red-right-uppercut-green-

face.png

IDLE PRICE ANIMATIONS:

idle-price-1.png

idle-price-2.png

idle-price-3.png

idle-price-4.png

Total unique files: 14

The goal is to build a visually unique crypto-fighting prediction experience around QuanTheo Arena.

Tech Stack

Layer	Technology
Framework	TanStack Start
Frontend	React 19, TanStack Router v1
Build	Vite 7
Styling	Tailwind CSS 4
Language	TypeScript 5.7 (strict)
Deployment	Netlify
Live Prices	Binance WebSocket (wss://stream.binance.com)
Market Data	CoinGecko REST API (via server-side proxy)

Running Locally

npm install
npm run dev

The development server starts at http://localhost:3000.