Awesome Open Source
Awesome Open Source

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

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

Local development

Web

In the packages/web directory, run:

# to install all dependencies
> npm install

# to run the app on http://localhost:3000
> 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 packages/lambda directory, run:

# build your local image
> docker build --tag dev-image .

# create and run a container using AWS RIE as executable to emulate a server for your lambda function
> docker run --rm -p 8080:8080 dev-image

# make a http request to your function, passing event with the -d in body field (escaped json)
> curl -XPOST "http://localhost:8080/2015-03-31/functions/function/invocations" -d '{"body":"{}"}'

Deploy to production

Web

Set your API Gateway endpoint in packages/web/src/config/api.ts.

Ships packages/web on Vercel.

Lambda

The deployment of the Lambda function is automatized by the workflow cd-lambda-function. You will need to complete the following set-up steps to use it:

  1. Create the following AWS resources:

    • Lambda function defined as a container image

    • API Gateway to trigger the lambda function with CORS support

    • ECR repository to store your Docker images

  2. Store an IAM user access key in GitHub Actions secrets named AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY.

  3. Change the workflow file github/workflows/cd-lambda-function.yml:

    • Replace the value of the AWS_REGION env with the region of all your AWS resources.

    • Replace the value of the AWS_ECR_REPOSITORY_NAME env with your repository's name.

    • Replace the value of the AWS_LAMBDA_FUNCTION_NAME env with your function's name.

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (10,909) 
recursion (29) 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising 📦 10
All Projects
Application Programming Interfaces 📦 124
Applications 📦 192
Artificial Intelligence 📦 78
Blockchain 📦 73
Build Tools 📦 113
Cloud Computing 📦 80
Code Quality 📦 28
Collaboration 📦 32
Command Line Interface 📦 49
Community 📦 83
Companies 📦 60
Compilers 📦 63
Computer Science 📦 80
Configuration Management 📦 42
Content Management 📦 175
Control Flow 📦 213
Data Formats 📦 78
Data Processing 📦 276
Data Storage 📦 135
Economics 📦 64
Frameworks 📦 215
Games 📦 129
Graphics 📦 110
Hardware 📦 152
Integrated Development Environments 📦 49
Learning Resources 📦 166
Legal 📦 29
Libraries 📦 129
Lists Of Projects 📦 22
Machine Learning 📦 347
Mapping 📦 64
Marketing 📦 15
Mathematics 📦 55
Media 📦 239
Messaging 📦 98
Networking 📦 315
Operating Systems 📦 89
Operations 📦 121
Package Managers 📦 55
Programming Languages 📦 245
Runtime Environments 📦 100
Science 📦 42
Security 📦 396
Social Media 📦 27
Software Architecture 📦 72
Software Development 📦 72
Software Performance 📦 58
Software Quality 📦 133
Text Editors 📦 49
Text Processing 📦 136
User Interface 📦 330
User Interface Components 📦 514
Version Control 📦 30
Virtualization 📦 71
Web Browsers 📦 42
Web Servers 📦 26
Web User Interface 📦 210