A full-stack educational platform where you learn to code by playing a 2D RPG. Write real code to move your hero, pass challenges, earn coins, and compete on a global leaderboard.
| Layer | Tech |
|---|---|
| Frontend | React 19 + TypeScript + Vite |
| Game Engine | Phaser 3 |
| Code Editor | Monaco Editor (VS Code engine) |
| JS Sandbox | Web Workers (5s auto-kill) |
| Python Sandbox | Pyodide (WebAssembly) |
| Backend | Node.js + Express + TypeScript |
| Database | PostgreSQL (ACID economy, JSONB loadouts) |
| Cache / Leaderboard | Redis Sorted Sets (O(log N) rankings) |
| Auth | JWT + bcrypt |
cd server
docker compose up -dcd server
npm install
npm run devcd client
npm install
npm run devOpen http://localhost:5173 in your browser.
- Register your hero and enter the RPG world
- Navigate with WASD / Arrow keys
- Walk into glowing checkpoints → Monaco IDE opens
- Write code (JavaScript or Python) and submit
- Pass the quiz (70% threshold) → coins awarded
- Buy skins in The Bazaar with your earned coins
- Compete on the real-time Redis-powered leaderboard
playzle/
├── client/ # Vite + React + TypeScript frontend
│ └── src/
│ ├── game/ # Phaser 3 scenes & EventBridge
│ ├── components/ # MonacoIDE, Quiz, Shop, Leaderboard
│ ├── pages/ # Route pages
│ ├── store/ # Zustand global state
│ └── workers/ # JS execution sandbox (Web Worker)
└── server/ # Node.js + Express backend
├── src/
│ ├── routes/ # auth, economy, leaderboard, challenge
│ ├── db/ # PostgreSQL pool
│ └── redis/ # Redis client
└── migrations/ # SQL schema (auto-applied via Docker)
- Server-side validation: All code submissions are re-executed on the server using Node.js
vmmodule - Idempotent purchases: UUID idempotency keys prevent double-charging
- ACID transactions: Coin deductions use PostgreSQL transactions with
FOR UPDATErow locking - Sandbox isolation: JS runs in Web Workers (main thread never blocked), Python via Pyodide WASM