React · Blockly · EdTech2026 · Ongoing · Product Engineer — product, frontend, learning systems

SparkleScript

Grow into a web creator — visual HTML/CSS blocks, robot coding challenges, and co-build duels for young creators.

Overview

The product

SparkleScript is a hands-on coding platform where young creators roughly ages 6–12 grow into web creators. Learners snap real HTML and CSS together with visual blocks and watch a sandboxed live preview update instantly, train programming logic in robot grid-puzzle worlds that teach sequencing, loops, and events, build freely in a studio with a saved gallery, and co-build one page with a friend through host-authoritative duel rooms joined by short codes. A sticker book with companions, outfits, and certificates keeps progress tangible. Built on React 19, Vite, Tailwind CSS v4, Blockly, Three.js, and Firebase.

Ages 6–12

Audience

~30 HTML tags

Block registry

Learn · Play · Build · Duel

Modes

Sandboxed live

Preview

The problem

Kids meet code through typing — and bounce off

Most learn-to-code products for children are either passive videos or raw text editors that punish every typo. Young creators need to touch real web primitives, see instant results, and play with logic before they can spell it — plus a safe way to create alongside friends.

  • Text-first editors punish beginners for syntax instead of rewarding logic
  • Tutorials without play don't build intuition for sequencing and loops
  • Solo-only learning misses the motivation of building together

The solution

Real HTML, taught through play

I built SparkleScript around three loops: guided block lessons validated against a target tree so every snap teaches a real tag, robot challenge worlds where block programs deterministically drive a simulator, and a free Build Studio with a local gallery for open creation. Duels make it social — host-authoritative rooms over Firestore (with a same-browser BroadcastChannel fallback) let two learners co-build one page from a short code. Everything renders in sandboxed iframes, progress syncs to Firestore profiles, and the sticker-book reward system keeps young creators coming back.

  • Around 30 real HTML tags as blocks with tree-matched guided lessons
  • Robot puzzles that turn sequencing, loops, and events into play
  • Co-build duels plus studio, quests, skills, and a sticker-book reward layer

Architecture

The system behind SparkleScript

Content as data, engines as pure functions: validators, serializers, and the robot simulator run without React, so learning logic stays testable.

  1. 01

    Web App

    React 19 · Vite 8

    Lazy routes for the learn, play, build, and duel surfaces.

  2. 02

    Block System

    Blockly · Custom kit

    Around 30 HTML tags with flat-sequence and tree serializers.

  3. 03

    Learning Engines

    Validators · Simulator

    Target-tree matching plus a deterministic robot step tape.

  4. 04

    Worlds & Content

    Data-driven lands

    Challenges, quests, skills, and projects modeled as data.

  5. 05

    Realtime Duels

    Firestore · BroadcastChannel

    Host-owned rooms with immutable guest actions.

  6. 06

    Identity & Safety

    Firebase Auth · Rules

    Owner-only profiles, sandboxed previews, nothing sensitive in storage.

Tech stack

Tools that earned their place

Frontend

  • React 19
  • Vite 8
  • React Router 7

Learning

  • Blockly
  • Three.js
  • Framer Motion

Styling

  • Tailwind CSS v4

Backend

  • Firebase Auth
  • Cloud Firestore

UX

  • Sandboxed previews
  • PWA-ready build

Features

What it does, and why it matters

01

Visual blocks

Snap real HTML/CSS tags together and watch a live preview update instantly.

02

Guided lessons

Tag-by-tag topics validated against a target tree — steps unlock as blocks are claimed.

03

Robot worlds

Grid puzzles that teach sequencing, loops, and events through deterministic simulation.

04

Build Studio

A free HTML builder with a saved local gallery for open creation.

05

Co-build duels

Two learners, one page, a short room code — host-authoritative collaboration.

06

Sticker-book rewards

Achievements, companion levels, outfits, and certificates that make progress tangible.

Challenges

What nearly broke the system

Validation that teaches

Free-form building can't tell a learner what's right. Matching the learner's program tree against each lesson's target tree turns open play into guided steps — completed steps unlock as blocks are claimed, so feedback is instant and specific.

Collaboration without a server team

Two kids co-building one page needs ordering guarantees. Host-authoritative duel rooms — the host owns the document, guests post immutable actions — give a simple consistency story on Firestore alone, with BroadcastChannel covering the no-backend case.

Safe by construction

Kids' previews execute code. Sandboxed iframes contain every render, Firestore rules scope profiles to their owner, and auth stays exclusively in Firebase Authentication — nothing sensitive ever touches localStorage.

Lessons learned

What shipping taught me

Pure engines first: validators and simulators as framework-free functions stay testable as content grows.

Content is data — lessons, lands, and quests in data files mean a CMS can arrive later without rewrites.

Safety is architecture: sandboxes and owner-scoped rules beat moderation queues for kids' products.

Impact

Why this actually matters

SparkleScript turns young consumers of the web into creators: real tags under their fingers, logic learned through robot play, friends building beside them, and a sticker book that makes progress tangible.

  • Real primitives early — actual HTML/CSS, not a toy language that dead-ends
  • Logic through play — sequencing, loops, and events learned in challenge worlds
  • Creation together — duels, studio gallery, and rewards keep building social

Gallery

Inside the product

Block lessons

Guided tag-by-tag building with instant validation.

Robot worlds

Sequencing, loops, and events as grid puzzles.

Build duels

Two creators, one page, a short room code.