Tic Tac Toe
Classic game with a smart AI opponent
Problem
While there are countless Tic Tac Toe implementations online, most are either too basic with no AI opponent, or they lack polish in terms of animations and user experience. Many are built as quick tutorials without attention to responsive design, accessibility, or smooth interactions. There was an opportunity to build a polished, production-quality version that demonstrates modern frontend development practices while being genuinely fun to play.
Solution
This Tic Tac Toe game features a minimax algorithm-based AI opponent with adjustable difficulty levels. The UI is built with smooth Framer Motion animations for every interaction — placing marks, winning celebrations, and board resets. The responsive design works seamlessly on both desktop and mobile, with touch-friendly tap targets and visual feedback.
Key Features
Smart AI Opponent
The AI uses the minimax algorithm to play optimally, with difficulty levels that adjust how often it makes the best move.
Smooth Animations
Every interaction is animated with Framer Motion — mark placement, win line drawing, score updates, and board resets.
Responsive Design
Fully responsive layout that adapts to any screen size with appropriately sized touch targets for mobile play.
Score Tracking
Persistent score tracking across rounds so players can see their win/loss record against the AI.
Challenges
The main challenge was implementing the minimax algorithm efficiently and then adding adjustable difficulty without simply adding random delays. The solution was to introduce a probability parameter — at lower difficulties, the AI occasionally picks a suboptimal move. Balancing this so the game feels fair but beatable at each difficulty level required extensive playtesting.
Learnings
This project was an excellent exercise in algorithm implementation within a modern React context. It demonstrated how game state can be cleanly managed with React hooks and how to structure code so that the AI logic is completely decoupled from the UI. The animation work with Framer Motion provided valuable experience in creating polished micro-interactions.