PunchCode

The tutorial.
The main screen.
The featured levels.
Some notes to help with Fortran,

Inspiration

The CSSS Historical Track is what inspired us to make this website. When we saw that SFU once had a IBM card-punch machine, we were fascinated by how people used to code this way. So we decided to build our own simulator for others to experience the way coding was back in that time period.

The name "PunchCode" was inspired both by the fact that you are literally punching in code to program, and the fact that we included a few LeetCode style problems in our app that let you test your skills. So a combination of punching in code and some inspiration from LeetCode.

What it does

The website simulates and teaches individuals how people used to code with the IBM 029 card-punch machine. They would need to punch the desired Fortran code and then compile it using a stack of punch cards inputted into the machine.

How we built it

We built the web app using NextJS, with TypeScript as our main front-end programming language. On the back-end we used Python with the FastAPI, mainly to compile and run the user's Fortran code.

Challenges we ran into

We ran into a few challenges during our project. Our first major challenge was figuring out how the IBM 029 card-punch machine worked in real life. We had to spend a few hours doing research as this was a vital part of our project. This was difficult due to the scarcity of reliable info as many sources opposed each other. On top of this we had to learn Fortran because this was the main language people used at the time. Another challenge was finding a solution to make sure the site displays well on varying resolutions, we often ran into bugs in this regard.

Accomplishments that we're proud of

We are proud with the level if historical accuracy that we achieved on this project, historical accuracy was one of our mains goals and we wanted to make the experience as authentic as possible. The sound design is something else we are proud of as it adds a nice atmosphere when using the app.

What we learned

We learned a lot about punch cards and their use in the past in coding, and especially in regards to how the machines worked. We also learned to code in Fortran.

What's next for PunchCode

We could add varying levels of historical accuracy so that user could take on a challenge or have an easier time. For example there could be a mode that includes far more of the problems and manual parts actually needed in real life to use the machine.