NestQuest

• 

  Visual Editor - Selected

• 

  Visual Editor

• 

  Multi-Person Co-editing

Inspiration

This is our very first hackathon, so we figured we should work on something we can deeply connect to :) Then the idea of re-implementing Scratch popped into our heads. Developing a programming interface from scratch seemed pretty exciting and challenging, since there are few tutorials and source code out there for us to reference to. We figured we could add some cool new features to our long-loved childhood coding tool as well.

What it does

NestQuest is a fun programming interface for kids that mimics MIT Media Lab's Scratch. One new feature we've added is the multi-person editing room, allowing users to collaborate with co-workers in real time by sharing a generated code. Editor-wise it provides a block-based interface, supporting multiple nested while's, if's, and for's, undoing, redoing changes, and a variable system, just like Scratch. Visual-wise it involves the classic orange Scratch cat, supporting translation, rotations, and texts.

How we built it

NestQuest is built with HTML and vanilla JavaScript. We did not use any external libraries like Blockly that are specifically designed for creating block-based programming languages. We thought that this could make our exploration far more challenging. The server side is written using Socket.IO with express app as well as MySQL, in order to support multi-person editing and recording the undone and redone changes made to the editor.

Challenges we ran into

One challenge invovles implementing the while loop. We could never seem to correctly pause the loop with the STOP button. No matter what tricks we had to work around it, once the while true loop is going, it leaves zero space for other code to be executed. Then after a day or so we realized that we could write our program asynchronously. This amazingly solved our problem and leaves opportunities for us to write asynchronous conditionals, while x > 5, and other various different ways to control our loops.

Accomplishments that we're proud of

At first our idea simply involved re-implementing Scratch. We never thought that we could add a completely new feature like multi-person editing! It had only initially existed during brainstorming period as a whimsical idea. But we grabbed any learning opportunities we could and implemented this feature that is way beyong our expectations.

What we learned

One thing we learned is of course to challenge ourselves! Both of us had had experience developing mobile apps. We could've chosen to do a health app or a GPT-enhanced app, which have been implemented numerous times by other hackers and have ample support online. But no, we decided to do something entirely different, which had proven to be very challenging and had impelled us to learn new programming skills we never thought we'd be able to learn.

What's next for NestQuest

1. Support for sprite editors (uploading local photos, color schemes...)
2. Version control for multi-person editing.
3. Allow users to define custom blocks
4. Refine our UI (currently it looks sort of rough)
5. Create keyboard shortcuts

Built With

• css
• express.js
• html5
• javascript
• mysql
• node.js
• socket.io