Infuriating CodePen

Inspiration

We were inspired to create a CodePen-like website to "teach" about basic programming concepts with Python.

What it does

The project features many truly infuriating features.

For one, the code examples that we created are intentionally designed to be incredibly poorly written (e.g. heavily-nested "if" statements, very long-winded comments, completely pointless functions/classes, etc.) and are sure to trigger any programmer.

The UI of the website is also designed to be frustrating. It features frustrations such as: "privacy and settings" link that is inoperable, a checkbox that unchecks itself after a couple seconds, UI elements that may fall off the screen (currently activated by a button), colours that (are supposed to) switch to a truly awful monstrous theme, the code execution button (is supposed to) run away from the cursor, and many more chaotic features

How we built it

We wrote the project in Next.js to allow for easy use of animations and component creation.

Challenges we ran into

It took us a very long time to decide on how to accomplish our goal. We tried a number of methods, such as embedding a python interpreter into the site or trying to send the code to Repl.it to be executed and retrieving the output. Eventually we decided just to simulate the execution of code by hard-coding javascript equivalents of the example code into the page. This allowed us to focus on adding the various UI elements rather than trying to execute python in a website.

We also had a tough challenge at the end where the styling of our site stopped working. We got it fixed eventually but have no idea what the issue was.