A small React and TypeScript project that animates a shortest-path search across a 20 × 20 grid. It provides a visual way to explore graph traversal and the relationship between algorithm state and a user interface.
- The app generates random start and destination cells.
- Select GO! to animate the search across horizontal and vertical neighbours.
- Visited cells change appearance as the search progresses, followed by the reconstructed path.
- Select RESET to reload the grid with new endpoints.
The grid uses equal-cost steps. This is an early learning project, with no obstacle editor or weighted terrain.
| File | Responsibility |
|---|---|
src/Algorithm.ts |
Distance updates, neighbour traversal, and path reconstruction |
src/App.tsx |
Grid generation and controls |
src/Cell.tsx |
Cell presentation |
src/types.ts |
Grid, node, and cell-state types |
Stack: React 17, TypeScript, styled-components, and Create React App.
yarn install
yarn startOpen http://localhost:3000. Use yarn build to create a production build.
This repository retains its original dependency stack. Compatibility with current Node.js releases has not been revalidated as part of the documentation update.
For an explanation of the algorithm, see Dijkstra's algorithm.