NMPoole / MazeSolver

Maze generation and path-finding algorithm visualiser using React.js.

Personal Project: Maze Solver

Brief:

This project allows a user to experiment with different path-finding algorithms by visualising/animating how different search algorithms seek a (perhaps optimal) route towards a goal (from a starting position) in a grid. This project was also used as a means to learn React.js for creating web-based Graphical User Interfaces (GUIs).

Demo At: https://NMPoole.github.io/MazeSolver/.

The user is able to select between different search algorithms:

1. Random Walk
2. Breadth-First Search
3. Depth-First Search
4. Dijkstra's Algorithm
5. A* Search
6. Greedy Best-First Search
7. Bidirectional Greedy Search

The user is able to place walls within the grid that the algorithms must account for, but more importantly, the user may generate mazes using different maze generation algorithms:

1. Random Generation
2. Horizontal Generation
3. Vertical Generation
4. Recursive Division Generation

Demo Video:

Project Goals:

There were several goals to this project as a means for personal development:

1. Review previous concepts related to search algorithms: weighted search, unweighted search, heuristics, etc.
2. Learn new algorithms relating to maze generation.
3. Learn and practice web development with Javascript, namely by learning how to create good-looking interfaces and animations.
4. Practice the ability to visualise my work - previous projects are underwhelming in what they achieve due to the CLI.
5. Begin to learn and practice creating such interfaces with React.js.

Project Motivation:

Perusing YouTube one day, I found myself looking at Dev Blogs for personal projects and came across this video by Clément Mihailescu. Immediately, I thought to myself, "I've done this before extensively, better even, with more algorithms and research and analysis. However, my project work doesn't look this impressive". Indeed, my university work is impressive in the theory it explores, but the average recruiter, employer, or fellow developer wouldn't be able to tell. CLIs are lack luster at showing off what a project does! Thus began my journey of marrying two key aspects: the review of previous theory from my degree, and learning web development to showcase this theory.

Outcomes And Acknowledgments:

The complexity of the project was underestimated! Learning React.js was more difficult than initially expected and required a significant review and practice of ES6, HTML, and CSS. Meanwhile, I also took several detours to learn significant theory about Next.js as a framework for React.js, common web tech stacks (such as MERN), etc.

In the end, I found that since the project idea was unoriginal, it would be beneficial and efficient to follow tutorials and examples for the idea instead of trying to re-invent the wheel. After all, the priority of the project was to learn new skills about web UIs (via React.js). As such, I must acknowledge the great sources by Clément Mihailescu and Rohith S P as significant contributors to this project.

Overall, I feel that I would have been able to implement a project even more impressive with a technology I am already very familiar with, such as P5.js. However, I learned a great deal during this project and will endeavour to explore React.js in future projects! In particular, I have implemented the project using the now dated practice of class-based UI components, since this complemented my dominant Java experience. However, in future projects I would like to explore the more modern functional component model with hooks.