July 2020
I built a search algorithm web app that helps users learn about graph search algorithms such as Dijkstra's and A*, with built in tools such as auto-generating mazes, the ability to add walls, and more.
React HTML CSS Javascript
• Implemented a visual tool for learning graph search algorithms using React.js hooks that handled the state of the walls, the nodes currently being searched, the discovered nodes, and the start & endpoint simultaneously.
• Wrote 5 graph traversal algorithms, including A*, Dijkstra (w and w/o a Binary Heap), Greedy Best-First Search, and Depth-First Search using priority queues and other data structures.
• Programmed a maze generator using recursive divison along with a random maze generator.
As I entered the Summer of 2020, I had just completed my first year of Computer Science at Northwestern. I knew I was extremely interested in Computer Science, and I wanted to test my skills to see if I had what it takes, having no idea what real computer science was all about. I ended up sitting down one day trying to find a project idea and hopefully implement it over the next few weeks. After seeing many different ideas online and not liking the vast majority, I decided to test my fate with this graph-search algorithm tool.
The reason a sort of "tool" grabbed my eye was because I've always wanted to try and look into how programmers can help other programmers get into the field. Sometimes it is daunting to hear the words used by Computer Scientists, and especially after having just taken a class on Data Structures in the Spring, I knew how difficult it could be. Second, because I knew I wanted to continue on my web programming path, I knew this project could combine HTML, CSS, and JS with React in the perfect way.
This project allows users to choose any algorithm they want and watch it run. The application shows the user when it is discovering a node in real-time and then proceeds to show the "shortest" path (whether or not the algorithm guarentees a shortest path is also explained to the user). A help menu is provided to explain any difficult vocabulary, such as "weighted" and "unweighted" algorithms.
To make things more clear, the user can add walls with a click of the mouse or drag the mouse across the board. This way, the user can truly see the power/weaknesses of each algorithm in how they deal with weights (or walls). The user also has the ability to move the start and end node around to test more use cases.
