A Next.js 15 / React 19 mini‑game that pits players against each other in lightning‑fast dice duels. Roll smart, roll quickly, and climb the 🏆 leaderboard.
Try it now → fast‑battle.vercel.app
| Layer | Library | Why |
|---|---|---|
| Framework | Next.js 15 (App Router) | SSR, file‑system routing, fast refresh |
| UI Core | React 19 + React‑Bootstrap 2 | Declarative components, Bootstrap 5.3 styling |
| 3D Dice | @react-three/fiber, @react-three/drei, three.js | WebGL renderer for animated dice rolls |
| Typing | TypeScript 5 | End‑to‑end type safety |
| Quality | ESLint 9, Commitizen/commitlint, Jest 29 | Linting, conventional commits, unit tests |
# install dependencies
pnpm i # or npm i / yarn
# run dev server
pnpm dev # -> http://localhost:3000The main entry point is app/page.tsx; edits trigger instant refresh.
| Command | Purpose |
|---|---|
pnpm dev |
Run in development mode |
pnpm build / start |
Production build & server |
pnpm lint |
ESLint report |
pnpm test |
Jest unit tests (jsdom) |
pnpm commit |
Conventional‑commit wizard |
| Priority | Task |
|---|---|
| ♻️ Refactor | • Extract client components (Rules, PlayerCard, GameHistory, etc.) into their own files.• Move repeated dice‑update logic into utility helpers to remove “smelly handler” duplication. |
| 🛠️ Experimental Multiplayer | Finalise support for 3 + players (dynamic player creation, adaptive layout, turn rotation). |
| 📈 Performance | • Memoise heavy React‑Three scenes. • Consider react-window/framer-motion for list & animation perf.• Enable Next.js image and font optimisation. |
| ✅ Testing & Coverage | • Add unit tests for utility pure functions. • Integrate ts‑jest coverage threshold (≥ 90 %). • Add React Testing Library tests for components & interactions. |
| 🎨 UI/UX | • Replace placeholder dice with high‑poly models. • Add dark‑mode toggle. • Mobile‑first tweaks. |
| 🔌 CI/CD | GitHub Actions: lint + test on PR, deploy preview to Vercel. |
Feel free to open an issue or PR if you’d like to tackle any item!
app/
├─ components/
│ ├─ molecules/Rules.tsx
│ ├─ organisms/DicesScene.tsx
│ └─ …
├─ page.tsx ← main game logic (to be split)
config/
├─ constants.ts
types/
└─ index.ts
utilities/
└─ diceHelpers.ts
public/
└─ favicon.svg