A dynamic, drag-and-drop map builder to visualize a real-world application of Dijkstra's pathfinding algorithm. Built with a React client and Flask server.
Python
Groggo Needs Coffee
Groggo, like many software engineers, needs coffee before performing tasks. Unfortunately, he's out of coffee at home and needs your help. This application provides an interface for you to create maps that include Groggo's home, the coffee shop, and any obstacles you'd like to place in between. When you click 'Find Path', the application will translate your unique map to a weighted graph with 2,000+ nodes and 15,000+ edges and use Dijkstra's algorithm to display Groggo's shortest path to coffee along with a heat map so you can visualize relative travel times to any part of your map.
Setup your username and database based on what you setup in your .env
Migrate and seed the database by intiating the pipenv shell from the root directory.
pipenv shell
flask db upgrade
flask seed all
Start the server from the root directory.
flask run
Start the frontend from the react-app directory.
npm start
Site Preview
New users can register for an account by entering a unique email address, a username, and a password.
Existing users can log in to their account by submitting their credentials via the login form.
Logged in users can end their session by clicking the log out button.
Users may log in with an pre-existing demo user account by clicking the link on the login page.
If a user has any previously saved maps, they can load them by clicking the 'Load Maps' button.
Users can create a new map, which will auto-save to their account, and provide a blank grid with the start and stop placed in their default positions.
Users can add water by clicking and dragging, which will destroy any edges to adjacent nodes.
Users can add forest by clicking and dragging, which will increase the edge weight by 20% to all adjacent nodes..
Users can add roads, which join non-adjacent nodes with and edge weighted to 20% of their Euclidian distance.
Users can edit any features by entering edit mode, and clicking and dragging the points that appear on the corners to their new location.
Users can delete individual features by entering delete mode and clicking on the feature
they wish to deltee.
Users can clear their map by clicking the 'Clear All Features' button. All optional features will be removed and required features will be reset to their default locations.
Users can delete any maps they've created by clicking the 'Delete Map' button and confirming on the popup.
Users can edit the start and stop location by dragging the features in edit mode,
or by selecting the feature from the control panel, and clicking on the screen.
Users can initiate the pathfinding algorithm to search for the shortest route between Groggo's home and the coffee shop by clicking the 'Find Path' button.
Simulations can be reset and re-run by clicking the 'Reset' button, selecting a tool from the control panel.
Once a simulation has been run, a heat map can be toggled to display the relative time it takes from the starting node to all other nodes visited by Dijkstra's algorithm.