Recursion Tree Visualizer

🥇 Winner project of the AlgoExpert SWE Project Contest 🥇

Overview

Stop drawing recursion trees by hand. Watch the demo video or check out the live project.

Folders structure

• web: react user interface.
• lambda: serverless lambda function to execute user-defined code remotely.

Local development

Web

In the web directory, run:

# to install all dependencies
$ npm install
to run the app on http://localhost:3003
$ npm run start

Lambda

You can use the Amazon Runtime Interface Emulator (RIE), already contained in the docker image, to test the Lambda function.

In the lambda directory, run:

# build your local image
$ docker build --tag rtv .
create and run a container using AWS RIE as executable to emulate a server for your lambda function
$ docker run --rm -p 8080:8080 rtv
make a http request to your function, passing event with the -d in body field (escaped json), see examples in requests.http file
$ curl -XPOST "http://localhost:8080/2015-03-31/functions/function/invocations" -d '{"body":"{}"}'

Deploy to production

Lambda

In terraform folder:

• create terraform.tfvars file
• run terraform init
• run terraform validate
• run terraform plan
• run terraform apply

Web

Ships web on Vercel, setup environment variables.

Acknowledgements

Thanks to Drawing Presentable Trees and Improving Walker's Algorithm to Run in Linear Time articles I implemented Reingold-Tilford's algorithm to position each node of the tree on a 2D plane in an aesthetically pleasing way.

Compatibility

For a better experience, I recommend using a chromium-based browser like Chrome or Edge.

Contact me

• Twitter