qilin2 / blockgram Goto Github PK

• Brandon Hung @qilin2: Team Lead, Team Manager, Frontend, UI/UX Design
• Sunho Kim @sunho : Co-Lead, Frontend, Backend, UI/UX Design, Database
• Wei Quan Lai @LaiWeiQuan & Eren Saglam @ghostpyy: CockroachDB Database.
• Merlin Ho @clairvoyage : UI/UX Design

An interactive and dynamic educational programming interface that simplifies complex structures into simple sentences for better interpretability & understanding. This app is entirely built from scratch.

CalHacks 9.0 Submission

Inspired by Scratch Programming and tutoring young kids coding, words and letters are too dull and boring for them. Having a tool to let them visualize makes coding interesting and easily understandable.

C and C++ programming language is especially challenging language to learn as a beginner. Compared to higher languages like python and javascript, they have more tricky concepts such as pointers that makes the language not really approachable. What we built is a real time bi-translator between scratch-like block language and c/c++ which allows students to toy around with text and block code simultaneously. This enables students to learn complicated programming languages like c/c++ more hands-on, intuitive way.

CParser written in javascript to get C AST and implemented a DFS style conversion from C AST to our own blocking language tree representation. We implemented reverse conversion from blocking language tree to C code so that bi-translation works perfectly. We got a virtual machine for our own block coding language which makes the simulation of variables and expression interpretation more low-level. It allows to implement visualization of control structure and variables changes more easily. We also used cockroachdb to implement code sharing function. CockroachDB fitted into this purpose since it could be used to visualize the traffic of share real time using CockraochLabs.

1. Download the .zip file or use git clone.
2. run npm install
3. run npm start

• ReactJS
• Database

THANK YOU ! :)