BlockDraw

Inspiration

Aside from our love for hackathons, Tomas and I also love teaching! Twice a week, we teach an after-school coding club for primary students, and along the way, we’ve noticed a LOT of problems in how block coding is taught by major platforms, and we wanted to set out to fix this!

Problems we've noticed in our classroom

1. Kids are lazy!
Block-based platforms often emphasise completing tasks over true comprehension. We find that our students sometimes brute force solutions or rely on tutorials, never really grasping what’s happening. They end up pattern-matching or looking for shortcuts instead of developing real coding skills.

2. Tracing is Tedious :(
Tracing is essential for understanding how code works, but it's dull to learn about. Students lose interest and never truly learn the logic behind the blocks.

3. Going Solo Isn’t Always Fun
Coding alone can sometimes feel isolating. A little friendly competition among classmates can boost engagement and significantly improve learning outcomes.

4. The puppy you designed is lovely, but... this isn’t art class!
While designing sprites on Scratch is fun, it can overshadow the actual coding. We want to encourage creativity, but we don't want students spending half the lesson making a cute puppy on Scratch. We wanted to find a way to leverage their enthusiasm for art without letting it derail the main focus—learning to code!

Our Solution

Take Kahoot, Scribble.io, and Scratch and combine them! Students join a game where they're given a snippet of Scratch code to draw. Once they submit, AI evaluates their drawings for accuracy, awarding points that appear on a live leaderboard. It’s fun, competitive, and builds genuine code comprehension.

How we built it

We used Next.js for the frontend, Supabase for real-time game data management, and Vercel for seamless deployment. To evaluate the accuracy of student drawings, we integrated OpenAI, which analyzes submitted images against the expected outcome, checking if they meet specific criteria. This ensures that students are graded fairly based on how closely they followed the given Scratch code.

Challenges we ran into

Getting realtime updates from the database was quite the challenge!

Tuning the prompt we send to the model also proved to be quite hard as it would not always detect shapes correctly.

Making the system approachable from kid-perspective!

Accomplishments that we're proud of

We really like how the UI fits with other young student-related tools we've seen.

Its really fun!

What we learned

Supabase was completely new

What's next for BlockDraw

We would love to add more exercises and let teachers create their own exercises. From here on, we are also planning on using BlockDraw during our own lessons

Built With

• nextjs
• supabase
• tailwind
• vercel