This website can create a recursion tree of any java code. And not just a recursion tree it can also help one visualize how to function calling works in java code. On this page, I am going to explain the project. You can either watch the video for the demo or study the project below.

Project Context ✍🏻

  • Open Source
  • Data Structures and Algorithms
  • Java

Tools Used 🛠🔎

  • HTML, CSS, js
  • Nodejs

How To Use :

In the left sanction there is “How to use”, “Feedback”, and “Contribution” guide of the website. In the top-right section, there are some social buttons and a theme change dropdown for the editor themes. Below that, we have the code editor and then there are 2 buttons for custom input and submit code.

To use the website just paste your java code in the editor, put custom input if any, and then click submit. Then the website will take some time to analyze the code and create a JSON object for its function calling. It will copy the code to your clipboard and open another website vanya.jp.net/tree .Paste your clipboard content in the text area and your recursion tree is ready. It uses another website for JSON tree view. I will talk about it again at the end of the video.

How it works :

For a detailed code explanation please see my other video from the description below, here I will explain just the basics of how the code works. First when you enter your code in the editor and press submit the website will send the code to the backend. The backend of the website is created with nodejs. First, the code will be run once and checked for runtime and syntax errors. If there is a problem it will send an error message to the frontend. If there is no problem then we will start to change the code. We will add print statements to all the functions using string manipulation and another ds like the stack. We will add print statements to the start of function and end of every function like just before the return or when the function is ended. Then we will run the code again and copy the output of our new code. It will look something like this. Then we will create the JSON object from this out and send it to the frontend. The object is then copied to the clipboard and a new website will be opened where you paste your code for tree view.

Where it can be improved :

If you are interested in contributing to the project you are most welcome. The website can be improved on both the front end and back end. Detailed instruction on how to start the project is available on Github and the link to Github is in the description. Just use the website, if you think you can improve in anything open an issue and start working on it. From my side, first I would love to add support for other languages. So if you know any other language and nodejs (or just js) you can add support for that language. Some websites already create recursion trees for python but their functionality is also limited. There are also some edge cases where code fails to add extra statements like when the user doesn’t use curly brackets for if-else statements and adds a return statement and when the main function is not the last, etc. In the front end, I think adding our tree view will be great. I am already working on it but if you have any other ideas you are welcome to contribute.

How is it different from other websites :

There are some websites which create recursion trees of python code with much more beautiful animations but working is very limited. Either they work for some fixed codes or they only allow 1 function which will work in recursion. But in the real world, we often use different functions to run the code, some of them might be using recursion, others may just keep calling another function again and again. So this website handles all those use cases. And it's very customizable. Like you can add as many functions as you want, you can add different languages support with ease, you can choose what you want to show in your recursion tree, etc.

Where it can be used :

We can use it on our day to day basis to debug our code. But it can also be used by code challenge websites like Leetcode or code forces. The user can add his code to see where his code is not working. We can calculate the number of times a function is called with the same parameters and tell the user how much his algorithm can be improved to the same time and space complexity. We can calculate code efficiency with these algorithms.