{"id":29016462,"url":"https://github.com/prudhvignv/pathfindervisualizer","last_synced_at":"2025-06-25T22:30:20.246Z","repository":{"id":63385390,"uuid":"287471509","full_name":"PrudhviGNV/pathFinderVisualizer","owner":"PrudhviGNV","description":"A react Application Used to visualize classical path finding algorithms like BFS, DFS, Dikstra's, A-star","archived":false,"fork":false,"pushed_at":"2022-10-02T14:46:22.000Z","size":363,"stargazers_count":39,"open_issues_count":2,"forks_count":12,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-24T22:50:35.327Z","etag":null,"topics":["a-star-algorithm","bfs-algorithm","dfs-algorithm","dikstra","html5","javascript","minify","pathfinding","pathfinding-algorithm","react","reactjs","shortest-pathfinding-algorithm"],"latest_commit_sha":null,"homepage":"https://prudhvignv.github.io/pathFinderVisualizer/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PrudhviGNV.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-14T07:28:06.000Z","updated_at":"2025-06-21T14:36:14.000Z","dependencies_parsed_at":"2022-11-18T00:17:17.553Z","dependency_job_id":null,"html_url":"https://github.com/PrudhviGNV/pathFinderVisualizer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PrudhviGNV/pathFinderVisualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PrudhviGNV%2FpathFinderVisualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PrudhviGNV%2FpathFinderVisualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PrudhviGNV%2FpathFinderVisualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PrudhviGNV%2FpathFinderVisualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PrudhviGNV","download_url":"https://codeload.github.com/PrudhviGNV/pathFinderVisualizer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PrudhviGNV%2FpathFinderVisualizer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261962037,"owners_count":23236856,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a-star-algorithm","bfs-algorithm","dfs-algorithm","dikstra","html5","javascript","minify","pathfinding","pathfinding-algorithm","react","reactjs","shortest-pathfinding-algorithm"],"created_at":"2025-06-25T22:30:17.987Z","updated_at":"2025-06-25T22:30:20.216Z","avatar_url":"https://github.com/PrudhviGNV.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PathFinding-Visualizer: - A REACT APPLICATION\r\n [![NodeJS](https://img.shields.io/badge/node-12.14.1-important)](https://img.shields.io/badge/node-12.14.1-important)\r\n [![NPM](https://img.shields.io/badge/npm-6.13.7-blueviolet)](https://img.shields.io/badge/npm-6.13.7-blueviolet)\r\n [![Made With React](https://img.shields.io/badge/made%20with-react-61DAFB)](https://img.shields.io/badge/npm-6.13.7-blueviolet) \r\n[![Build Status](http://img.shields.io/travis/badges/badgerbadgerbadger.svg?style=flat-square)](https://travis-ci.org/badges/badgerbadgerbadger) \r\n\r\n---------------\r\n### check out live demo [HERE](https://prudhvignv.github.io/pathFinderVisualizer/)\r\n\r\n##### DFS visualization demo:\r\n\r\n   ![dfs](https://user-images.githubusercontent.com/39909903/91169511-5723df00-e68c-11ea-87ed-896412c347b2.PNG)\r\n   \r\n\r\n\r\n## Overview: \r\n This is a fun project on visualizing path finding algorithms i.e BFS, DFS, Dikstra’s , A* algorithm.\r\nThis app is entirely built in react and below is the how the interface looks like..\r\nGreen box is the starting node and Red box is the end node.\r\nYou can see the various algorithms below to visualize.\r\nHere  design of  grid is done using tables and set first node and second node colors using CSS properties.\r\n![grid](https://user-images.githubusercontent.com/39909903/91166796-c519d780-e687-11ea-9b16-ac0504aa3a49.PNG)\r\n\r\n\r\n## Intro ..\r\n\r\nPath finding algorithms plays a vital role in our daily life such as packets in computer networks , google maps uses a path finding algorthm to find the shortest path.\r\nSo this project main idea is to visualize this path finding algorthms using react with the help of some css animations.\r\n\r\nYou can also follow my [Medium BLOG](https://medium.com/@prudhvi.gnv/path-finding-visualizer-using-react-from-creating-to-building-and-deploying-bd1e2bc64696) for more understanding and details :)\r\n------\r\n\r\nLet's check out some intuition behind this algorithms for better insights.\r\n### Breadth First Search\r\n* Breadth First Search explores equally in all directions.\r\n* This is an incredibly useful algorithm, not only for regular traversal, but also for procedural map generation, flow field pathfinding, distance maps, and other types of map analysis.\r\n* This may be the algorithm of choice to identify nearby places of interest in GPS.\r\n* BFS guarantees the shortest path.\r\nBelow is the result for Breadth first search:\r\n![bfs](https://user-images.githubusercontent.com/39909903/91166761-b7645200-e687-11ea-90ab-ef04daeda21e.PNG)\r\n\r\n### Depth First Search\r\n- Traverses by exploring as far as possible down each path before backtracking.\r\n- As useful as the BFS: DFS can be used to generate a topological ordering, to generate mazes, to traverse trees, to build decision trees, to discover a solution path with hierarchical choices…\r\n- DFS does not guarantee the shortest path.\r\nBelow is how the DFS works\r\n![dfs](https://user-images.githubusercontent.com/39909903/91169511-5723df00-e68c-11ea-87ed-896412c347b2.PNG)\r\n### Dijkstra\r\n- Dijkstra's Algorithm lets us prioritize which paths to explore. Instead of exploring all possible paths equally, it favors lower cost paths.\r\n- We can assign lower cost to encourage moving on roads while assigning high cost on highway to avoid them.\r\n- It is the algorithm of choice for finding the shortest path paths with multiple destinations.\r\nBelow is the demo\r\n![dikstra](https://user-images.githubusercontent.com/39909903/91166789-c0552380-e687-11ea-9e87-e023e381eb06.PNG)\r\n\r\n### A* (A-Star)\r\n- A* is a modification of Dijkstra's Algorithm that is optimized for a single destination.\r\n- Dijkstra's Algorithm can find paths to all locations; A* finds paths to one location. It prioritizes paths that seem to be leading closer to a goal.\r\n- In a game, we could set costs to be attracted or discouraged in going near some objects : how useful it is for an AI.\r\n- It is more or less the golden ticket or industry standard algorithm for all applications finding directions between two locations.\r\nBelow is the demo of application:\r\n![a](https://user-images.githubusercontent.com/39909903/91166759-b59a8e80-e687-11ea-8ed7-faa0d453fe71.PNG)\r\n\r\nNow Let's drive into the code ..\r\n------------------\r\n## Getting Started ..\r\nFirst install node.js which comes with a bundle(npm+npx) to run javascript in local system.\r\ntype following commands in the shell to create a react app\r\n\r\n```\r\nnpx create-react-app my-app\r\ncd my-app\r\nnpm start\r\n```\r\n\r\n### npm start\r\nRuns the app in the development mode.\r\nOpen http://localhost:3000 to view it in the browser.\r\nThe page will reload if you make edits.\r\nYou will also see any lint errors in the console.\r\nBelow is the App.js component which is the root component for the react applications.\r\n\r\n```js\r\n\r\nimport React from 'react';\r\nimport './App.css';\r\nimport PathfindingVisualizer from './PathfindingVisualizer/PathfindingVisualizer';\r\n\r\nfunction App() {\r\n  return (\r\n    \u003cdiv className=\"App\"\u003e\r\n      \u003cPathfindingVisualizer\u003e\u003c/PathfindingVisualizer\u003e\r\n    \u003c/div\u003e\r\n  );\r\n}\r\n\r\nexport default App;\r\n```\r\n\r\nThe PathfindingVisualizer component is imported and rendered in App.js.\r\n\r\nI write everything related to the project in the pathfindingVisualizer component.\r\n## pathfindingVisualizer:\r\nHere we jammed everything we need into this component such as GUI logic, animations logic , node objects structure and its properties, Some boolean values (isRunning, isStartNode, isFinishNode, isWallNode ), css properties , walls logic, implementing algorithms, mousehandlers\r\nThen the pathfinding algorithms are written in another folder and is imported into pathfindingVisualizer component.\r\n\r\n```js\r\nimport React, {Component} from 'react';\r\nimport Node from './Node/Node';\r\nimport {dijkstra} from '../algorithms/dijkstra';\r\nimport {AStar} from '../algorithms/aStar';\r\nimport {dfs} from '../algorithms/dfs';\r\nimport {bfs} from '../algorithms/bfs';\r\n\r\nimport './PathfindingVisualizer.css';\r\n```\r\n Then handle mouse events and some reusable components to make this application more friendly.\r\n \r\n There are functionalities in pathfindingVisualizer component for creating initialgrid(), clearwalls(), CreateNode(), isGridClear(), clearGrid() etc ..\r\n \r\n ***Below is the driver code to implement algorithms in the component!!***\r\n \r\n ```js\r\n \r\n  visualize(algo) {\r\n    if (!this.state.isRunning) {\r\n      this.clearGrid();\r\n      this.toggleIsRunning();\r\n      const {grid} = this.state;\r\n      const startNode =\r\n        grid[this.state.START_NODE_ROW][this.state.START_NODE_COL];\r\n      const finishNode =\r\n        grid[this.state.FINISH_NODE_ROW][this.state.FINISH_NODE_COL];\r\n      let visitedNodesInOrder;\r\n      switch (algo) {\r\n        case 'Dijkstra':\r\n          visitedNodesInOrder = dijkstra(grid, startNode, finishNode);\r\n          break;\r\n        case 'AStar':\r\n          visitedNodesInOrder = AStar(grid, startNode, finishNode);\r\n          break;\r\n        case 'BFS':\r\n          visitedNodesInOrder = bfs(grid, startNode, finishNode);\r\n          break;\r\n        case 'DFS':\r\n          visitedNodesInOrder = dfs(grid, startNode, finishNode);\r\n          break;\r\n        default:\r\n          // should never get here\r\n          break;\r\n      }\r\n      \r\n ```\r\n\r\n\r\n\r\n\r\n\r\n\r\nIf you want to work off of this base to create your own Pathfinding Visualizer, feel free to fork this project or to just copy-paste code.\r\n\r\nFeel free to check out my other projects by going to [My Portfolio Site](https://prudhvignv.github.io).\r\n\r\nEverything below this line was automatically generated by Create React App.\r\n\r\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\r\n\r\n\r\n## Deployment\r\n\r\n### `npm run build`\r\n\r\nBuilds the app for production to the `build` folder.\u003cbr\u003e\r\nIt correctly bundles React in production mode and optimizes the build for the best performance.\r\n\r\nThe build is minified and the filenames include the hashes.\u003cbr\u003e\r\nYour app is ready to be deployed!\r\n\r\n\r\nI deploy this app in github pages. \r\nYou can check out here : [https://prudhvignv.github.io/pathFinderVisualizer/](https://prudhvignv.github.io/pathFinderVisualizer/)\r\n\r\n\r\n\r\n### LICENSE\r\n[MIT](https://github.com/PrudhviGNV/pathFinderVisualizer/blob/master/LICENSE)\r\n\r\n\r\n\r\n\r\n\r\n-------------------------------\r\n\r\n----------------------------\r\n\r\n\r\n\r\n## For more documentation and understanding.. check out following links..\r\n\r\n\r\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\r\n\r\nTo learn React, check out the [React documentation](https://reactjs.org/).\r\n\r\n### Code Splitting\r\n\r\nThis section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting\r\n\r\n### Analyzing the Bundle Size\r\n\r\nThis section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size\r\n\r\n### Making a Progressive Web App\r\n\r\nThis section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app\r\n\r\n### Advanced Configuration\r\n\r\nThis section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration\r\n\r\n### Deployment\r\n\r\nThis section has moved here: https://facebook.github.io/create-react-app/docs/deployment\r\n\r\n### `npm run build` fails to minify\r\n\r\nThis section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprudhvignv%2Fpathfindervisualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprudhvignv%2Fpathfindervisualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprudhvignv%2Fpathfindervisualizer/lists"}