Skip to content

CodeDoodle

Project Category: Software

Join our presentation

About our project

CodeDoodle is a web application created primarily with React, designed to help individuals create and understand activation record diagrams. Activation records or AR for short, are diagrams that are used to explain the execution of code and show the current state of computer memory at a specific stopping point within the code. It shows the functions called, values of variables and parameters, the memory allocated on the heap, and as well as static memory. In addition it shows pointers and references, which further help show the relationship between variables and functions. CodeDoodle not only allows its users to create these diagrams by making use of drawing tools, but also lets the user convert their diagram into code, as well as convert code to its corresponding diagram. Its target audience are students and it is meant to be used as an educational tool allowing students to gain a better understanding of computer memory.

Example of an Activation Record:

Meet our team members

Naweed Anwari

Project Manager

Afrah Khan

Frontend Developer

Talha Khalil

Frontend Developer

Jase Pasay

Frontend Developer

James Nguy

Backend Developer

Details about our design

HOW OUR DESIGN ADDRESSES PRACTICAL ISSUES

Online activation record (AR) diagramming tools do not exist currently. As the main focus of AR diagrams is to showcase the memory usage of a program it becomes a vital tool to understand how code relates to memory usage. However, this is a topic which many struggle understanding. CodeDoodle allows students to not only create these diagrams but also directly visualize how a single line of code affects said memory by having the option to turn their diagrams into code, and vice versa. This specific feature currently only supports C and C++ but nonetheless, gives students the opportunity to play around with the diagramming tool allowing them to get a better grasp of how specific code instructions manipulate memory.

WHAT MAKES OUR DESIGN INNOVATIVE

CodeDoodle is an innovative design as currently no online activation record diagramming tools exist. In addition it allows for users to convert their diagrams into code which is something not done by traditional diagramming tools. It is an open-source product allowing others to later add on to the program, adding features and fixing bugs.

WHAT MAKES OUR DESIGN SOLUTION EFFECTIVE

CodeDoodle is an effective teaching tool as students are able to see the direct relationship between code and memory, which helps them solidify their understanding of computer memory. As CodeDoodle is a web-application it is easily accessible by students without the need of any special equipment or software, and since it is also a free product it lifts many of the limitations that might withhold a student from using this resource.

HOW WE VALIDATED OUR DESIGN SOLUTION

CodeDoodle’s diagramming abilities have been confirmed and compared to hand drawn diagrams made by the development team and have also been cross referenced with memory information retrieved from debuggers. We also ensured that all features that are present in CodeDoodle do a well job of providing students the tools they need to adequately understand computer memory. This was done by comparing to course material found in ENSF 480 and ensuring all topics taught covering the use of activation records are feasible to implement in CodeDoodle.

FEASIBILITY OF OUR DESIGN SOLUTION

One of the key restraints the team wanted to focus on was to keep the cost of running the product low (or free), whilst also making it as accessible to as many students as possible. Currently the backend server for CodeDoodle is hosted on Amazon Web Services for free for the duration of the year, until May 2022. This allows the product to be free for it’s initial year of release, from then on CodeDoodle plans on to either continue hosting on the cloud depending on it’s web traffic or to branch into releasing a standalone desktop client so that it can continue being a free resource for students. We decided not to start off with the desktop implementation as it adds more barriers for the user to pass through, so instead we focused on creating a web-application from which we can then monitor the web traffic and respond accordingly, depending if the cost for running the server can be maintained to be under a 100$ CAD. The specific diagramming portion of CodeDoodle does have it’s limits on what it can support in creating, however, these are limits which the team expects will not interfere with a students learning. But rather only inhibit users from trying to use CodeDoodle as a debugger, which is not the focus of the product as it has been designed from the bottom up to foremost be an educational tool.

Partners and mentors

We want to thank the many people who helped us with this project. Dr. Behrouz Far our academic advisor, Dr. Mahmood Moussavi our sponsor, and Dr. Hamid Zareipour our professor for the capstone course. Thanks to all for guiding us through the process with patience and great advice. We would also like to extend a special thanks to our teaching assistant, Tariq Al Shoura who helped us overcome any obstacles we had, and was always looking for ways to help us in any way possible.

Academic Advisor
Behrouz Far, PhD, PEng

Industry Sponsor
Mahmood Moussavi, PhD, PEng

Course Professor
Hamid Zareipour, PhD, PEng

Teaching Assistant
Tariq Al Shoura

Our photo gallery