• Frontend: React 18 + TypeScript, Canvas-based grid renderer, Tailwind CSS, react-cropper
• Backend: Node.js + Express + TypeScript
• Database: Node.js built-in SQLite (node:sqlite)
• Image processing: Sharp

docker compose up --build

• Frontend: http://localhost:5173
• Backend: http://localhost:3001

Both services support hot reload — edit files locally and changes reflect immediately.

npm install && npm run dev

Or separately:

cd server && npm run dev    # Backend on :3001
cd client && npm run dev    # Frontend on :5173 (proxies API to :3001)

npm run build               # Build client
npm start                   # Serves everything from :3001

• 158x158 interactive grid with smooth Canvas-based pan/zoom (mouse + touch)
• Purchase flow: click cell -> choose 1x1 ($1) or 5x5 ($25) -> enter username/email -> upload & crop image -> mock payment -> pending moderation
• Admin panel (/admin routes, default password: admin) - approve/reject pending purchases
• Leaderboard - ranked by total pixels owned
• Pixel detail popup - click any purchased block to see full image, owner, and timestamp (UTC+4)
• Legal modals - About, Privacy Policy, Terms of Service
• Reservation system with 15-min TTL and automatic cleanup
• Conflict detection - 409 if pixels already taken
• Mock payment with optional failure simulation (fail: true in payment confirm)