BubbleCode

Inspiration

We wanted to build a platform that gives tech-interested people of all ages an easy way to jump in and get started with code. Many new coders find their way to block coding platforms similar Scratch.edu. These platforms are great since they get your mind thinking like a programmer, but they don’t necessarily lead to a smooth transition into learning traditional code. Our goal is to bridge that gap and let users learn traditional code through the easy to understand code blocks.

What it does

Inspired by the simple and elegant block coding of Scratch.edu we developed BubbleCode as a way to bridge the gap between conceptual logic and actual, functional code! With BubbleCode, you can learn the fundamentals of coding by breaking it down into easy-to-digest bubbles, which are converted into any of multiple programming languages! You can even test your new skills by taking on built-in programming challenges, ranging from completing tasks to reverse-engineering real code!

How we built it

Our project was created primarily using a React frontend and Node.JS backend. We utilized DnD-kit to create a highly interactive drag and drop code bubble system, and the Judge0 API to interpret and run code in our frontend terminal. Even our homepage is interactive, featuring a 3d modeled CodeBubble logo utilizing Three.JS.

Challenges we ran into

Our first challenge was also our largest, our drag and drop blocks would continuously overwrite each other, meaning only one block was visible at a time. This took 3 of our 4 members to debug and resolve. Besides this, a majority of our members were brand new to web development, including React, Javascript, and even HTML. This meant the first couple hours we were tasked with learning brand new frameworks and languages.

Accomplishments that we're proud of

Coming into this event, we were not sure we would be able to take on such an ambitious project in a short amount of time. We ended up completing everything we set out to and more. We are very proud to have created a project aimed towards getting more people into the technology field.

What we learned

We all came in with different strengths and weaknesses, so we all had something to learn from each other. We strengthened our web dev skills, while some learned it for the first time. We learned about 3d modeling, and connecting to APIs.

What's next for BubbleCode

We plan to add more coding functionality, including functions, function calls, modulo, etc. We also plan to add other features giving users a direction to follow, such as word problems users can follow and solve, and text files the users can aim to replicate with block code.

Built With

• html
• javascript
• node.js
• react
• tailwind