stepcode

GIF
Example pseudocode execution

Inspiration

We wanted to make a project to make the life easier for newcoming computer science students. One of the hardest achievements for these people is to grasp the basic concepts of programming. Our tool aims to teach that in a visual and interactive way.

What it does

Renders markdown as an html that can be directly opened with the browser. It also allows to execute step by step the pseudocode defined in the markdown visualizing on every step the state of each variable in scope.

How we built it

Firstly we divided ourselves into 2 groups. One group started making the generation of the html given the markdown code and the other one building the parser and interpreter as a cli. Finally we joint both together. During all the development we took care of good open source design practices.

Challenges we ran into

The first challenge was to build the parser. We were not sure if we would be able to inject the dependencies when creating the html because we didn't have that much experience in that field. So we decided to write the whole parser and interpreter from scratch.

The other main challenge of the implementation was to join the 2 parts of the project together. It was not trivial to tell what inputs we should feed the parser and how to modify in runtime the divs produced by the generator.

Accomplishments that we're proud of

We are very proud on how out project came out at the end. We manage to solve all our main issues as a small time on a short period of time.

What we learned

We learned a lot about frontend (specially more advanced things that they don't teach at university) and a lot about releasing an open source project with the good practices that involves the process.