Cubiq

Scan → Edit → Solve

Getting Started · Features · Tech Stack · Contributing

---

✨ Features

• Real-time camera scanning — HSV-based color detection with median-of-channels sampling
• Auto-capture — Face locks in after 3 stable consecutive frames
• Interactive 3D cube — CSS 3D-transformed, drag-to-rotate, click-to-edit
• Manual color editing — Tap stickers, rotate faces, or rescan individual sides
• Server-side solving — Kociemba two-phase algorithm via cubejs
• Step-by-step guide — Navigate moves with descriptions and a progress bar
• Fully responsive — Works on mobile, tablet, and desktop

---

🛠 Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router, Turbopack)
Language	TypeScript 5
UI	React 19, CSS 3D transforms
Styling	Tailwind CSS 4
Solver	cubejs (Kociemba two-phase)
Fonts	Space Grotesk, IBM Plex Mono

---

🚀 Getting Started

# Clone
git clone https://github.com/your-username/cubiq.git
cd cubiq

# Install & run
pnpm install
pnpm dev

Open http://localhost:3000 — for best results, use a mobile device with a rear camera.

---

📜 Scripts

Command	Description
pnpm dev	Start dev server (Turbopack)
pnpm build	Production build
pnpm start	Serve production build
pnpm lint	Run ESLint

---

🤝 Contributing

1. Fork the repo
2. Create a feature branch (git checkout -b feature/awesome-thing)
3. Commit & push
4. Open a Pull Request

---