A feature-rich Tic-Tac-Toe game built with React 19 + Vite, based on the official React documentation tutorial — extended with a complete UI overhaul and several new features on top of the original.
This project started as the official Tic-Tac-Toe tutorial from the React documentation. The tutorial teaches core React concepts like components, state, and lifting state up by building a basic Tic-Tac-Toe game with move history.
This version takes that foundation and adds:
- A full visual redesign (dark glassmorphism theme, animations, Google Fonts)
- An AI opponent using the Minimax algorithm
- A persistent scoreboard across rounds
- Undo / Redo controls and a clickable move log
- Animated confetti on win
- Responsive layout for all screen sizes
| Feature | Description |
|---|---|
| 🤖 Minimax AI | Unbeatable AI opponent — it evaluates every possible game state and always plays optimally |
| 🕒 Time Travel | Undo / Redo any move with buttons, or jump directly to any point via the move log |
| 🏆 Scoreboard | Tracks wins for X, O, and draws across multiple rounds in the same session |
| 🎉 Confetti | Animated confetti burst fires on every win |
| 💡 AI Thinking Indicator | Animated dots appear while the AI is computing its move |
| 🎨 Premium UI | Dark glassmorphism theme with gradient accents and smooth micro-animations |
| 📱 Responsive Layout | Fully adaptive for mobile, tablet, and desktop |
| ♿ Accessible | ARIA labels, keyboard navigation, and focus management throughout |
- Node.js ≥ 18
- npm ≥ 9
# Clone the repo
git clone https://github.com/GodSonIsBack/tic-tac-toe.git
cd tic-tac-toe
# Install dependencies
npm install
# Start the dev server
npm run devOpen http://localhost:5173 in your browser.
src/
├── Board.jsx # Square & Row components with win-square highlighting
├── Game.jsx # Core game logic, Minimax AI, state management, layout
├── index.css # Full design system (tokens, animations, component styles)
├── App.css # Root wrapper styles
└── main.jsx # React entry point
- vs Human — Two players take turns clicking squares on the same device.
- vs AI — You play as X, the Minimax AI plays as O. It's unbeatable — aim for a draw!
- Use the Undo / Redo buttons or click any entry in the Move Log to travel through the game history.
- Next Game resets the board while keeping the scores. Reset All clears everything.
The AI uses the classic Minimax algorithm with no depth limit (the 3×3 search space is small enough to evaluate completely):
- Recursively explores all possible future game states from the current board.
- Scores terminal states:
+10for an O win,-10for an X win,0for a draw — adjusted by depth so it prefers faster wins. - Always picks the move with the highest score, meaning it never makes a mistake.
- React 19 — UI library
- Vite 7 — Dev server & bundler
- MUI Icons — Icon components
- Orbitron + Inter — Google Fonts
MIT © 2025 GodSonIsBack