Este arquivo README também está disponível em português brasileiro. Clique em README(pt-br).md nos arquivos acima para lê-lo.

How*PointersWork

A site that help students understand how pointers work. Available at arturo32.github.io/HowPointersWork.

This system was part of my graduation thesis that is available in the SoftwareEducativo_Souza_2025.pdf file or in my university's repository. Both are in portuguese.

Click here to go to the backend repository.

Objective

To help students understand pointers in the C and C++ programming languages through a visual representation of the computer memory.

Running with docker

Before running locally, you have to change the backend endpoint to http://localhost:80/execute at line 27 in the memoryContainer.js file.

The frontend can be run with docker with these commands:

sudo docker build -f Dockerfile -t hpw-front .
sudo docker run -p 8080:8080 -it hpw-front #detached: sudo docker run -d -p 8080:8080 hpw-front

Go to the backend repository to learn how to run it too.

TODO

• Avoid new local variables appear between pre-existing cells (do some math to calculate space between cells, taking into account their type. ex.: how could it be 8 bytes between two "ints"? there is a hiding cell between them!);
• Improve accessibility
  • How to "show" arrows to assistive technologies?;
  • Notify assistive technologies of changes in memory (aria-live?);
  • "Show" highlighted line to assistive technologies in execution mode;
• Add levels of abstraction (one showing/omitting memory addresses, other showing the values in binary, hiding the stack-heap separation);
• Show pedagogical text when clicking in some parts of the visualization;
• Improve visualization of long arrays;
• Improve visualization of C++'s pass by reference parameters (ex.: void fun(int &x)). Currently they are shown as pointers;
• Add visualization for global variables;
• Show error when executed lines go beyond 300;
• Update the arrows library from LeaderLine to LinkerLine to avoid static arrows attached to the whole HTML document when scrolling;
• Add internationalization with static-i18n. See this repo for an example;
• Explore use of other sandbox environments besides Tork to see improvements in processing time (like nsjail used by Compiler Explorer).

*Icons from reshot