My Little Web Dev

My first web dev!

Comment 3

Inspiration

"My Little Web Dev" was inspired by the simplicity and beginner-friendly nature of Scratch. We wanted to make a product that had the same approachability, but tackled a more complex topic like web development. Furthermore, we wanted to build a project that allows children in marginalized groups to shrink the gap in early coding confidence so that all children can learn to code on a level playing field.

What it does

This educational tool allows users to drag and drop code blocks into a canvas, and link them together to create a web application. Furthermore, the app also allows users to save their work into a file and load it into the canvas when they decide to continue working on their project.

How we built it

We created the "My Little Web Dev" webpage using Next.js and React. We then used a library called Blockly to build the code blocks and parsed the blocks into HTML using JavaScript.

Challenges we ran into

We ran into some issues with building our own HTML-specific code blocks and parsing them properly into HTML.

Accomplishments that we're proud of

We're very proud of how we integrated Blockly with Next.js, and how we parsed the block code into HTML.

What we learned

We learned how to a lot about building websites with Next.js, rendering HTML based on block code, and working with Blockly.

What's next for My Little Web Dev

Now that we've created a project encapsulates frontend development into block code, we hope to extend the project to also cover backend development, evolving the app into "My Little Fullstack Dev".

Built With

  • blockly
  • next.js
  • react
  • vercel
Share this project:

Updates