Ultimate Tic Tac Toe
React.js Ultimate Tic-Tac-Toe game
Start: June 2025 • End: June 2025
React.js Ultimate Tic-Tac-Toe game
Start: June 2025 • End: June 2025
Ultimate Tic Tac Toe is a React.js implementation of a variant of Tic Tac Toe where the game is played on a 3x3 grid where each square contains a smaller, standard tic-tac-toe game. Players take turns placing marks in any open square of a small board, but the location of their move determines which small board the opponent must play in next. The goal is to win three of the small boards in a row to win the larger game.
I originally discovered the concept for this game from a YouTube short by a Youtuber named VSauce. As a fun side-project, this project was a fun way to practice state management, tricky win-detection logic, and using CSS to create a futuristic look (66% of the code is CSS).
In the near future, I intend to add multiplayer support using WebSockets to allow for people to play against each other on separate devices. In the more distant future, I would love to implement a computer opponent that uses the minimax algorithm to find the most optimal move.
In the near future, I intend to add multiplayer support using WebSockets to allow for people to play against each other on seperate devices. In the more distant future, I would love to implement a computer opponent that uses the minimax algorithm to find the most optimal move.
1) Built reusable components. Implemented small React components for cells, sub-boards, and the meta-board to keep logic and UI separated.
2) Designed the state model. Represented the game as nested boards plus a single “next board” constraint.
3) Implemented win detection. Reused the same row/col/diagonal logic at both the sub-board and meta-board levels.
3) Added timers. To add the same feel as in chess, I added timer logic that would countdown for the current player's turn.
4) Adding the neon look. After the core functionality of the game worked, I added glowing animations to the squares and added a 'moving background' with inspirations from the internet.
Enforces Ultimate Tic Tac Toe rules, including sending the next move to a specific sub-board.
Detects sub-board wins and the overall meta-board winner with clear visual feedback.
Glowing red/cyan animations for every state transition to indicate current player turn
Challenge: It was difficult correctly enforcing the “next board” constraint while handling edge cases.
Solution: I modeled the game as nested boards with a single source of truth for legal moves and derived UI state from that.