Kirk Bentley

Dots & Boxes

What It Is

A 3D implementation of the classic Dots & Boxes game, built with React, Next.js, and React Three Fiber as an experiment in AI-assisted development.

This project was my first real experiment using an AI agent as the primary implementation partner on a Three.js-style project — a space where I was deliberately not an expert.

Why It Matters

This project explored how AI can act as a primary implementation partner in an unfamiliar technical domain, while still producing a coherent, usable result.

My Role

Director and integrator: defined the rules and constraints, guided the AI, reviewed and refined generated code, and owned the final architecture and outcomes.

Impact

Delivered a fully playable 3D game with deterministic logic, clear interaction, and a clean state model — while significantly accelerating learning through AI collaboration.

What It Shows

Practical AI collaboration. Strong judgment over authorship. The ability to direct, evaluate, and ship systems in unfamiliar technical territory.

The Context

The goal wasn’t to master Three.js from scratch.

It was to understand:

How effectively AI could operate in an unfamiliar technical domain
What kind of direction, constraints, and feedback produce usable results
Where human judgment is still essential

The project was scoped small on purpose so the focus stayed on process, not polish.

The Problem

3D interaction stacks introduce complexity quickly.

Scene graph mental models
Interaction and hit-testing
State synchronisation between logic and visuals
Debugging across abstraction layers

Hand-coding everything would be slow.
Blindly trusting AI would be dangerous.

The challenge was to collaborate — not delegate.

Play It

How It Was Built

A modern React stack, paired with declarative 3D rendering.

Next.js (App Router)
TypeScript for safety and clarity
React Three Fiber as the Three.js abstraction
Drei for common helpers
Zustand for game state
Tailwind CSS for UI

Working With AI

The AI was used to:

Generate initial component structures
Explore Three.js patterns and APIs
Handle repetitive or verbose setup code
Suggest interaction handling approaches

My responsibility was to:

Evaluate correctness and performance
Resolve edge cases the AI missed
Keep logic deterministic and readable
Prevent architectural drift

AI sped things up.
Judgment kept it solid.

The Outcome

The result is a fully playable 3D game.

Interactive 3D board
Turn-based two-player logic
Box completion and scoring
Responsive layout across devices

It’s stable, understandable, and easy to extend — which mattered more than visual spectacle.

What Made It Good

Honest use of AI as a primary builder
Clear human ownership of structure and decisions
Tight scope with real technical complexity
Fast learning without false confidence

The win wasn’t writing Three.js code.
The win was learning how to direct AI effectively in a complex system.

This project demonstrates:

Real-world AI collaboration, not theory
Comfort learning in unfamiliar domains
Strong editorial and architectural judgment
Ability to ship usable systems with modern tools

It shows how I work now — not how I worked five years ago.

Get good by knowing when to build — and when to direct.

Destroyer

Figma Files