CodeVis

Inspiration

Students without internet or who live in areas with underfunded school systems need a way to learn the basics of coding despite these difficulties. We want to remove barriers that prevent intelligent individuals from entering the world of programming.

What it does

CodeVis provides a self-contained teaching environment, rich with explanations that are all stored on the local machine (no internet connection required) and its primary feature is a visual simulation of variable storage and the function call stack.

How we built it

Since Electron makes it possible to support many operating systems, we opted to use it to make a local application programmed with HTML, CSS, and JavaScript instead of using platform-specific APIs.

Challenges we ran into

HTML, CSS, and JavaScript are powerful and flexible, but it is sometimes incredibly time-consuming to come up with a desired appearance or behavior, so developing the user interface was a big challenge. Thankfully, we designed it on paper first so that at least we were not spending time to make a prototype and then having to discard that work. Another challenge was parsing C-like syntax in order for it to be simulated. We could have used a simpler grammar, but decided that it was very important to introduce students to programming in a language that they can easily relate to C-like programming languages, including Java.

Accomplishments that we're proud of

We're proud of our workflow. For the most part, we were able to rapidly create our prototype by splitting up high-level features and each of us worked on his own "module" and was able to provide information about its "API" to other members of the team in order to connect all of the pieces together. As for the product, we think it's a powerful feature that, although it comes with written explanations of programming concepts, the visual demonstration of a program's execution is empowering to individuals who would otherwise be discouraged by language barriers.

What we learned

Although JavaScript is a very flexible and feature-rich programming language, we learned from debugging code with simple typos in it that static typing, though perhaps somewhat inconvenient in some cases, is incredibly good at forcing the programmer to write clean code from the start, since any references to undefined variables (i.e. "my_ojbect" instead of "my_object") are caught prior to even the start of execution, as are common problems caused by mismatched types (i.e. passing "my_object" to a function instead of "my_object.property").

What's next for CodeVis

In future development, we plan to clean up the user interface, add progress saving mechanisms so that closing the application keeps track of code the student has written, and add features to the parser and add one or more new views in order to demonstrate the concepts of memory allocation, memory addressing, and complex data structures. We also want to use responsive design to make the interface work well on a variety of screens, particularly older or inexpensive computers with lower resolutions. Aside from adding new features and improving existing ones, we also want to explore the possibility of translating the text into other languages, since although English is a language many people understand, it is not helpful for the many who do not.

Built With

• ace-editor
• electron
• javascript