CodeMeow. Wiki

Welcome to the CodeMeow. wiki! We hope you have a purrfect experience.

Start the Frontend

Install all dependencies with npm install and start the application by entering npm start

How to Use CodeMeow.

Submit your code

You can start typing code in the text field at the bottom of the page. Submit your code by either pressing the send button or ctrl+enter.

Note: Please submit code blocks like if-statements or loops as one whole code snippet.

View Your Code

You can see your submitted code displayed by nodes. These nodes will always wrap your submitted code in a wrapper node and display the individual statements as separate nodes inside this wrapper.

Whenever you define a variable you will be able to see its state in the Variables-section of the wrappers. This section is clickable and opens a more detailed view of all the variables you defined.

If you assigned a more complicated data structure to a variable, you are able to view its contents by clicking the variable chip directly.

If you defined some output in your code (e.g., with print()), it will be displayed in the Output-section after submission.

Edit or Delete Your Code

Edit Statements

You can edit individual statements by simply clicking on a node and directly changing the values. The changes will then be submitted when pressing the save-button

Rearrange Code Nodes

Press the three dots in the bottom right of any wrapper and click on rearrange nodes to swap its position with another wrapper.

Then select the node you want swap with and confirm by pressing swap.

Delete Code Nodes

Press the three dots in the bottom right of any wrapper and click on delete node to delete the entire selected wrapper node.

Clear Your Entire Code

Click on the delete all nodes-button (depicted as a moving list) to clear all nodes and start with a clear canvas.

Export Your Code

You can export a converted python file of your code by clicking on the download-button on the top right of the page.

Used Technologies

We use the React framework with material ui components.

To visualize our code graphs we use the reaflow library.

For syntax highlighting, we made use of two different libraries: react-syntax-hightlighter was used for highlighting code in nodes and the react-textarea-code-editor was used for hightlighting input in the text field.

For communicating with the backend, we worked with axios.