As first-year college students, intro to computer science courses have been fundamental to our UCI education so far. While undergoing the transition into studying the finer points of programming, we realized that there was a shortcoming in the education tools available to us -- the problems we solved were very abstract, but tools to visualize these abstract concepts either lacking or missing completely. In order to fill this void, we decided to create Tapestry at HackUCI 2020 -- an online code visualization system built to solve this problem.

We built Tapestry to help users gain a better intuitive understanding of Python's inner workings, which can sometimes be decidedly unintuitive. Through careful analysis of Tapestry's diagrams, programmers everywhere can solidify their computer science skills, whether by learning the inner workings of Python code (and applying it to their own projects), or by analyzing the state of their script in order to better visualize the causes of bugs and errors.

What it does

Tapestry is a web application whose primary purpose is to help computer scientists visualize the code that they're writing. Specifically, in its current iteration, the application executes a Python script that the user writes and executes using the online editor. Then, our system works behind the scenes, translating the Python module's namespace into a namespace diagram -- an illustrated "tapestry" of variables (boxes), values (ovals/rounded rectangles), and references between them (lines). Also, console output is displayed on the application, so users can produce useful output in order to further visualize the process of their script's execution.

How we built it

We built Tapestry using a Django web server, building a single-view frontend web application and a backend web service to power it. On the frontend, we created HTML templates styled with CSS and supplemented with JavaScript (relying on Django's templating system to transfer our backend data to the HTML). Our backend system was built using the Django framework, and our diagram generation system was built using Python code to provide functionality to the framework. Additionally, we implemented diagram generation visually using SVG generation, converting Python modules first into custom model classes, then into JSON data (provided to the frontend), and finally into a cohesive SVG diagram.

Challenges we ran into

Our two main challenges were translating the user's script into our custom models and translating these models into a diagram. These became challenges for us because they involved connecting two different facets of the code through problem solving and programming skill. The level of careful design and implementation proved taxing and challenging, but also incredibly rewarding when we were eventually able to overcome them.

Accomplishments that we're proud of

Overall, we're particularly proud of the cohesiveness of the project we created. We were able to create many individual components of the application (the frontend, user script execution, graphical model definition, etc), but the cohesiveness that tied the project together to create Tapestry as a whole was special, especially considering the amount of effort it took. As part of this system unity, we had to design the aforementioned code-to-model and model-to-SVG translation systems, while also ensuring that our individual components were well-defined, well-implemented, and well-documented, so that other members of our team could use the code. Overall, unifying our app into one cohesive system is our proudest accomplishment due to the level of thought, effort, and planning that went into it.

What we learned

Throughout the development of the application, we learned the value of forethought. There were so many different moving parts to our application that we had to be extremely careful about our design; even the slightest mistake or inconsistency could pose major problems throughout the system. Overall, developing Tapestry has taught us that careful planning is crucial to the success of the development process; having a good understanding of our goals and the methods we would use to achieve these goals allowed us to spend more time on their implementation, and less time worrying about what to implement.

What's next for Tapestry

Although we're very proud of the app we created at HackUCI, this is only the beginning for Tapestry. We plan on adding many new and exciting features to the website in the future; whether it's small UI improvements such as adding syntax highlighting or major changes such as support for even more Python language features (or even other languages themselves), Tapestry will continue to rapidly grow and expand as time goes on.

Share this project: