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.


Technologies Used

Launching Locally


– Python 3.10
PostgreSQL 12s

Getting Started

  1. Clone the project repository

  2. Install Python dependencies from the root directory

    • pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt
  3. Install Node package dependencies from the react-app directory

    • npm install
  4. Create a .env file base on the .env.example given in the root directory

SECRET_KEY=<you strong secret key>

  1. Setup your username and database based on what you setup in your .env

  2. Migrate and seed the database by intiating the pipenv shell from the root directory.

    • pipenv shell
    • flask db upgrade
    • flask seed all
  3. Start the server from the root directory.

    • flask run
  4. 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.

Registration Demo

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.

Demo User

If a user has any previously saved maps, they can load them by clicking the ‘Load Maps’ button.

Demo User

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.

Demo User

Users can add water by clicking and dragging, which will destroy any edges to adjacent nodes.

Demo User

Users can add forest by clicking and dragging, which will increase the edge weight by 20% to all adjacent nodes..

Demo User

Users can add roads, which join non-adjacent nodes with and edge weighted to 20% of their Euclidian distance.

Demo User

Users can edit any features by entering edit mode, and clicking and dragging the points that appear on the corners to their new location.

Demo User

Users can delete individual features by entering delete mode and clicking on the feature
they wish to deltee.

Demo User

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.

Demo User

Users can delete any maps they’ve created by clicking the ‘Delete Map’ button and confirming on the popup.

Demo User

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.

Demo User

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.

Demo User

Simulations can be reset and re-run by clicking the ‘Reset’ button, selecting a tool from the control panel.

Demo User

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.

Demo User


View Github