Website: eightpuzzlesolver.vercel.app
Background
In my Intro to Artificial Intelligence class, I built a Python terminal application that could solve any 8-Puzzle. After the class, I wrote a friendlier user interface in React, which connects to the Python backend via Flask.
Development
All of the 8-Puzzle logic is handled in Python. The puzzle itself is represented as a 2D array. The Agent class contains the 4 solving algorithms: depth-first search (DFS), breadth-first search (BFS), and two different A* searches. The A* searches respectively use two heuristics to increase performance: the sum of the Manhattan distances between each tile and its corresponding goal position, and the number of misplaced tiles. Next, I wrote a React frontend and reimplemented the moving logic in TypeScript. I created a basic REST API in Flask that allows React and Python to communicate with one another; when "Solve" is clicked, React sends the current puzzle state to the EightPuzzle Python script, which then sends the solutions back to React as an array of strings. The backend is hosted on Render and the frontend on Vercel.
Reflections
This project was fun because it touched a little bit of several domains: algorithms, frontend development, and REST APIs. Later in the class, I delved into basic AI learning algorithms, such as k-means clustering and two-layer neural networks; I can't wait to get my hands on more sophisticated AI models in the future. Additionally, this project inspired me to build an AI agent for another, far more difficult game: chess. This is currently a work in progress, but you can find the source code here.