Pathfinding Visualizer

A react-based visualization of a pathfinder, built without any UI library. You can view live here.

Concepts

Each grid item represents a node in a implicit graph.

• Each triangle is adjacent to other 3 triangles.
• Each square is adjacent to other 4 squares.

Features

• 2D grid types

  • Triangle Grid
  • Square Grid
  • Hexagon Grid

• Search algorithms

  • Depth-First Search
  • Breadth-First Search
  • Greedy Best-First Search
  • A* Search

• Pattern generation algorithms

  • Perfect mazes
    • Recursive backtracking
  • Basic random

• View, pause or continue the visualization

• Immediate response to delay change during visualization

• Draw your own wall nodes with mouse

• Persist form inputs on local storage

• Drag and drop the source and target nodes

• Folding animation on changing the node state

Installation

In the root directory, you can run:

# To install all dependencies of the project.
> yarn install
> npm install

# To run the app on http://localhost:3000.
> yarn start
> npm run start

# To run the unit tests
> yarn test:unit
> npm run test:unit

# To build the bundled app for production on the `build` folder.
> yarn build
> npm run build