BLOCKGRAM

How it looks like :)
Logo
GIF
Blocks can be draggable
Blank
Compilation

Team

Sunho Kim @sunho : Frontend, Backend, UI/UX Design, Database
Brandon Hung @qilin2: Frontend, UI/UX Design
Wei Quan Lai @LaiWeiQuan & Eren Saglam @ghostpyy: CockroachDB Database, Backend.

Inspiration

Inspired by Scratch Programming. During this summer break, we volunteered as a coding tutor for elementary kids. We realized the kids enjoy learning scratch more than python. Python was too dull and wordy for them, they like scratch more as it’s more colourful and easily visualized. With C being one of the hardest programming languages, we decided to make a C to scratch translator, so that it will be easily visualized and understood.

What it does

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.

How we built it

We used c parser 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 which also uses Google Cloud to implement code sharing function. CockroachDB fitted into this purpose since it could be used to visualize the traffic of share real time using this software.

Challenges we ran into

Brandon

I was mainly responsible for the frontend, which is the UI / UX Design. With only two weeks of ReactJS knowledge, I faced various difficulties. For example, I didn't know how to use onClick = () => , const [active, setActive], classes and ids in .css, html syntaxes like div tag, importing .tsx files into App.jsx to be used. All of these difficulties taught me how ReactJS works in the industry and how it's programmed to develop an industry-ready website.

Eren and Wei Quan

We had to look throught and figure out a lot of libraries and choose the best one to be able to compile the code. In addition, we had hard time setting up CockroachDB as it is a relatively new database platform and there is not a lot of materials and tutorials online to guide us. However, after settling the set up, we found out that CockroachDB actually provides sufficient sample code on github which makes it easier to implement the Database.

Sunho

It took a lot of time and work to get some converage of c ast patterns. We put all nighters to implement every one of patterns and traversals that we needed.

Thank you

PowerPoint