Learn to Code with Creature Coders

Creature Coders is a JavaScript learn-to-code game made for beginners ages 10 and up. I am a co-creator of this project alongside my wonderful team* during our time at the Grace Hopper coding bootcamp in May 2022. Our game shows that learning to code is not just about understanding syntax, it’s also about thinking and solving problems like a computer.

In Creature Coders, a player traverses through levels to gain points and “PidgeCoins”, which can be used at our hat shop to buy fun hats for their pet. We wanted our game to reflect New York City, so we modeled pet avatars after some of the wildlife commonly found around town, which we lovingly refer to as garbage animals. Because there aren’t many mobile learn-to-code games, we were inspired to develop our game for iPad or tablet.

In designing our app, we agreed on a 90’s aesthetic and drew inspiration from sources such as Math Blaster, Tamagachi, Toejam & Earl, and Duolingo.

The Front-End is built with React, Redux, and Styled Components, while the Back-End is built with Express, PostgreSQL, and Sequelize.

The Blockly* library was fascinating to learn and integrate into our app. The Blockly blocks act just like puzzle pieces. Not all blocks can fit together, but when they do, they can run code in an isolated Javascript sandbox with JS-Interpreter. Once the Blockly code successfully runs in each game, something unique happens in the console, and you gain points and PidgeCoins!

One challenge our group faced while developing our app was figuring out the most efficient tech stack. We began our process using React Native to create a mobile app. We also determined using the Blockly library was a crucial part of bringing the vision of our game to fruition. However, we quickly realized that Blockly needs a DOM to work, and React Native did not operate using a DOM.

So, we put our heads together and thought of ways to work through this challenge. We took time to listen to each other’s ideas, and eventually, we found the best way forward with the limited time we had (less than 2 weeks). Our solution was to build a web app, with a mobile-first design.

I learned so much through this project, and how much programming is trial and error, and trying again. Being able to listen to one another as a group, communicate clearly, and having patience and determination helped us realize our project to completion.

*Check out my amazing team members who co-created Creature Coders: Caitlin Sherman, Hannah Sommer, and Angel Robish.

*See Creature Coders deployed here (the first load will take a few moments to render).

*Does Blockly sound interesting to you? Here’s a Blockly playground to explore how you would start designing your own block.