Case study
T3
A from-scratch neural network that plays Tic-Tac-Toe, with an interface that shows how it reaches each move.
- Go
- Neural Networks
- TypeScript
- React
- Protocol Buffers
- PostgreSQL
- Docker
- Tailwind
Watch it work
A move, made visible.
The frustration
I could call a neural-network library, but that did not mean I understood what happened between an input and a prediction. The math still felt like a black box.
The dig
I used Dive into Deep Learning to learn the math and architecture, then built the pieces myself in Go. Tic-Tac-Toe made the system small enough to inspect end to end: perfect play can generate the training data, a bitboard can represent the game state, and every prediction can be shown back to the player.
The feature
Play against either a classic minimax opponent or the trained network. When the neural net moves, the UI animates its layers and ranks the moves, turning an otherwise invisible inference pass into something you can follow.
How it works
Perfect play in.
Visible prediction out.
- 1
Generate
Random playouts produce a spread of human player board positions; minimax with alpha-beta pruning labels the AI's optimal move for each one.
- 2
Encode
Two 9-bit boards represent X and O positions. Their bits become 18 input values for the network.
- 3
Train
A hand-built feedforward network learns through backpropagation: three 32-neuron hidden layers predict one of nine moves.
- 4
Explain
The server returns the selected move and inference trace; React animates the layers and move confidence scores.
Architecture
The pieces.
Game engine
Go models the board as compact bitboards, validates moves, and evaluates games using bitwise operations.
Training
A Go CLI generates minimax-labeled positions and trains the feedforward network with backpropagation.
Neural network
18 inputs, three 32-neuron hidden layers, and nine output scores. Saved weights load when the server starts.
API
A Go server packaged in a Docker container serves game endpoints, neural-network and minimax moves, static assets, and health checks.
Frontend
React, TypeScript, and Vite render both opponents, game history, ranked moves, and the animated network trace.
Inference cache
A SHA-256 cache deduplicates serialized inference traces by board-state and Protocol Buffers define the schema to save space in the PostreSQL database.
Receipts
Play with the proof.
T3 visualizes neural nets in a complete application: train the model, play either opponent, and inspect the network's choices.