Back to Projects
8-Puzzle Solver – AI-Powered Puzzle Game
Click to enlarge

8-Puzzle Solver – AI-Powered Puzzle Game

Next.jsTailwind CSSFramer MotionReact IconsReact ToastifyPythonFastAPIqrcode

About the Project

8-Puzzle Solver is a full-stack AI puzzle game where users play the classic 3×3 sliding tile puzzle and can request AI-powered hints showing the minimum moves needed to solve it. The backend implements three search algorithms — BFS (uninformed), Best-First Search (greedy), and A* (optimal with Manhattan distance heuristic). A solvability checker ensures only valid puzzles are generated. Users can also share any puzzle state with friends via a generated QR code. The frontend is built with Next.js and the backend with Python FastAPI, connected via REST API and deployed on Vercel and Render.

Challenges Faced

Implementing the A* algorithm with an admissible Manhattan distance heuristic and correctly reconstructing the solution path using a parent dictionary was the core challenge. Handling the Next.js hydration mismatch caused by Math.random() running on both server and client required initializing the board with a fixed state and shuffling only inside useEffect. Setting up CORS correctly between the Vercel frontend and Render backend (trailing slash issue) also took debugging.

Future Improvements

Add 15-puzzle mode (4×4 grid), animated step-by-step solution replay, side-by-side algorithm comparison showing nodes explored and time taken, and a leaderboard for fastest manual solves.