See it Live!

My Process

I wanted to create a fully fleshed out pathfinding visualizer, inspired by Clement Mihailescu, a software engineer and Youtuber. His project was decidedly more feature-heavy, however what I achieved I believe was more thought-through and elegant in its design. I started with a sketch of what I wanted the final product to look like to guide my development.

System Design

This is the folder structure I used to construct this project. I created components for the visualizer itself, the toolbar, and the node.

Code Snippets

code snippet

This is the node constructor which takes in a row and column value and creates a node with a set of values.

This is the node component per se. It's a <div></div> with a variable id, depending on its row and column. It has associated classes and styles, as well as functions that are passed through as props.

This is the implimentation of Dijkstra's algorithm, which finds the shortest path between a given node and all other nodes in a graph.

If you'd like to learn more about how I built this project, feel free to reach out to me on the socials linked below, or at naiadbaksh@gmail.com.

LinkedIn
Twitter
Instagram
GitHub