// Overview

A visual programming education platform built with React 19 and Google Blockly. Players learn programming concepts like loops, conditionals, and functions by solving interactive puzzles across multiple game modes.

Think of it as a gamified coding bootcamp for beginners.

// Game Modes

  • Campaign - Guide a robot through maze puzzles with increasing complexity
  • Factory Lab - Program robots to sort and process items on a factory grid
  • Smart City - Control traffic lights and manage city intersections
  • Physics Lab - Build bridges using Matter.js physics engine
  • Infinite Mode - Procedurally generated mazes with seeded difficulty
  • Multiplayer - Race and co-op modes via real-time connections

// Key Features

  • Google Blockly visual code editor with custom blocks per game mode
  • PWA support for offline play
  • Daily challenges with streak tracking
  • Achievement and progression system
  • Cloud save sync between devices via Supabase
  • Custom level editor for community content
  • Teacher dashboard for classroom use
  • Real-time multiplayer with Supabase Realtime

// Technical Details

React 19 + Vite 7: Modern frontend with fast builds and HMR.

Google Blockly 12: Visual block-based programming that compiles to executable instructions per game mode.

Supabase: Handles auth, database, real-time multiplayer, and cloud save sync with RLS policies for security.

// Architecture

Blockly Editor
→
Code Compiler
→
Game Engine
React 19 UI
↔
Supabase Backend
Auth + RLS
|
Realtime
|
Cloud Save

Each game mode has its own block compiler that translates visual blocks into executable instructions. The game engine interprets these instructions step-by-step, providing visual feedback for each action.

// Challenges & Solutions

Challenge: Each game mode requires a unique set of Blockly blocks with different execution semantics - maze navigation vs factory sorting vs traffic control.

Solution: Designed a plugin architecture where each game mode registers its own block definitions, toolbox configuration, and code generator. A shared execution engine handles step-by-step visualization while mode-specific interpreters handle the actual game logic.

Challenge: Keeping multiplayer sessions synchronized with minimal latency for real-time racing.

Solution: Leveraged Supabase Realtime channels with optimistic updates. Each player's code execution is local, while only position updates and completion events are broadcast, keeping bandwidth low and responsiveness high.

// What I'd Improve

  • Add code-to-text view showing equivalent JavaScript/Python alongside blocks
  • Implement replay system for sharing puzzle solutions
  • Add accessibility features for screen reader users in the block editor
  • Build a mobile-optimized touch interface for tablets