Skip to content

jasonsutter87/CryptoBlocks

Repository files navigation

CryptoBlocks

A visual coding platform where kids and young coders build programs by snapping blocks together — then level up by writing their own.


The Pitch

Scratch proved that kids can code when you remove the syntax barrier. CryptoBlocks takes that further:

  1. Start with blocks. Drag, snap, run. See what happens.
  2. Peek inside. Every block is real code. Flip it over, read the JavaScript or Python underneath.
  3. Write your own. When you're ready, write a function. If it works, it becomes a block — your block, with your name on it.
  4. Share it. Publish to the Shareplace marketplace. Other kids snap your block into their projects.

The gap between "visual coding toy" and "real programming" is where most kids quit. CryptoBlocks is the bridge.


What's Built

Core Platform

  • 320+ blocks across 24 categories (Basics, Math, Text, Logic, Lists, Data, Database, Web, Art, Crypto, AI, Sound, Games, Hardware, micro:bit, Pen, Testing, Vision, Functions, Events, HTML, Libraries, Values, Secrets)
  • Dual-language code generation — every block outputs real JavaScript AND Python
  • Sandboxed execution — iframe sandbox for JS, Pyodide for Python, both in-browser
  • HTML/CSS blocks with live preview in the sandbox
  • Functions — create, call, return values, local variables
  • Events — key press handlers, click handlers
  • Monaco Editor code view (same editor as VS Code)
  • Tauri desktop app — offline, cross-platform

Learning

  • 141 challenges across 27 themed packs (Minecraft, Space, Crypto, Secret Agent, and more)
  • Block Islands — jigsaw-style puzzles where scattered blocks must be reconnected
  • Code Golf — 18 efficiency puzzles across 3 packs
  • Blocksets — 30 step-by-step guided tutorials across 6 packs
  • Code Labs — 11 JavaScript packs with CodeMirror editor
  • Learn — 10-chapter JavaScript fundamentals course with 41 interactive exercises

Creative Tools

  • Create Block — write a function, define inputs/outputs, run tests, it becomes a block
  • Sprite Editor — visual pixel art canvas (16x16, 24x24, 32x32) with animation frames, tools (draw, erase, fill, color pick), 32-color palette, live preview
  • Code to Blocks — paste JavaScript, get blocks on the workspace
  • Scratch Import — import .sb3 files, convert Scratch projects to CryptoBlocks with conversion stats

Collaboration

  • Coding with Friends — real-time collaborative workspace editing via Yjs CRDTs + PartyKit WebSockets
  • Room codes — 6-letter codes to join
  • Presence — see real names and profile photos via Clerk auth
  • Run for Everyone — broadcast execution to all peers
  • Up to 6 editors per room

Authentication & Classrooms

  • Clerk auth — sign in with Google or GitHub (one-click OAuth)
  • Teacher Dashboard — create classrooms, share join codes, view student projects
  • Student join flow — enter a 6-character code to join a class
  • Real identity — your name and avatar flow into collab, Shareplace, and classrooms

Social

  • Shareplace — real database-backed marketplace (Turso + Netlify Functions)
  • Upload, download, like, remix — full project lifecycle
  • Remix tree — visual lineage showing who remixed whose project
  • Dashboard — personal stats and project management
  • Profile — Clerk identity, shared projects, editor config
  • Daily Challenge — one puzzle per day, streak tracking, shareable results

2D Game Engine

  • Physics — gravity, velocity, AABB platform collision
  • Camera — viewport follows player, parallax backgrounds
  • Sprite images — use pixel art from the Sprite Editor in games
  • game_loop block — requestAnimationFrame-based, auto-cancels on re-run
  • Examples — Side Scroller 🦊 and Flappy Bird 🐤

AI & Speech (All Client-Side)

  • Speech — say, listen, stop speaking (Web Speech API)
  • Microphone — live volume level (getUserMedia + AnalyserNode)
  • Image classifier — MobileNet, lazy-loaded (~5MB), 1000 ImageNet classes
  • Hand tracking — MediaPipe Hands, finger position, pinch detection, finger count
  • Sentiment, classifier, Markov chain, regression — educational ML primitives

Hardware

  • micro:bit WebBluetooth — 15 blocks for LED, speaker, sensors, servos
  • Cyber:bot drive helper — forward/back/left/right with timed servo control
  • Sensor streaming — temperature, light, accelerometer, compass at 10fps
  • Time Travel — scrubbable timeline over workspace history with fork-from-any-point

Export

  • Save/Load .blocks project files
  • Export as HTML — standalone HTML file
  • Export as App (PWA) — downloadable ZIP with manifest, service worker, icons — installable on phones/desktops
  • Copy Embed Snippet — embeddable script tag
  • Publish to GitHub — deploy to GitHub Pages

Easter Eggs & CTF

  • Hacker Mode — click the logo 7 times, or enter the Konami code
  • Hacker Terminal — press backtick for a hidden CLI with 20+ commands
  • CryptDOOM — Wolfenstein-style raycaster with procedural levels, enemy AI, procedural audio
  • Matrix Rain — fullscreen animated digital rain
  • Snake — eats actual page elements
  • Space Invaders — aliens abduct your code
  • CTF Treasure Hunt — 6 hidden seed projects with hackable IDs, each awards a secret legendary badge
  • Egg Vault — hidden terminal command with cryptic clues
  • The Cake Is A Lie — Portal reference, hidden command
  • 42 achievements with COD-style unlock animations and server-side tracking
  • Secret Blocks — 13 hidden blocks in the ??? category (hacker mode only)

Version Control

  • Save Checkpoint — snapshot workspace to IndexedDB
  • History Panel — timeline of checkpoints with rollback
  • Auto-save — configurable interval (1/2/5/10 min)

Tech Stack

Layer Tech
Frontend React 19, TypeScript, Vite 7, Tailwind CSS 4
Block Editor Google Blockly (Zelos renderer)
Code View Monaco Editor
JS Execution Sandboxed iframe (blob URL + allow-scripts)
Python Execution Pyodide (CPython → WebAssembly)
Collaboration Yjs (CRDT) + PartyKit (edge WebSockets)
Sprite Editor Canvas API, custom pixel grid
Desktop Tauri v2 (Rust)
Testing Vitest (2,766+ tests) + Playwright E2E
Site Hugo + Tailwind + SCSS, Netlify

Auth & Backend (Setting Up)

  • Clerk — authentication
  • Turso — SQLite edge database
  • PartyKit — real-time collab rooms

What Makes This Different

Scratch Snap! CryptoBlocks
Code output None (dead end) None Real JS + Python
Block count ~120 ~80 280+
Categories 8 8 23
Custom blocks Limited Yes Write code → becomes a block
Collaboration No No Real-time (Yjs)
Challenges No No 141 across 27 packs
Sprite editor Built-in No Built-in
PWA export No No Yes
Scratch import N/A No Yes (.sb3)
Desktop app Electron Browser only Tauri
Target age 8-12 University 10-18

Roadmap

Done

  • 280+ blocks across 23 categories with dual JS/Python generation
  • 141 challenges, 30 blocksets, 18 golf puzzles, 11 code labs
  • 10-chapter Learn JavaScript course with 41 exercises
  • Create Block editor (write code → becomes a block)
  • Sprite Editor (pixel art canvas with animation frames)
  • Coding with Friends (real-time collab via Yjs + PartyKit)
  • Scratch .sb3 import with conversion stats
  • PWA export (installable web app)
  • Shareplace marketplace, Dashboard, Profile pages
  • Hacker Terminal with Snake, Space Invaders, and CryptDOOM
  • CTF treasure hunt with hackable seed projects
  • COD-style badge system with 42 achievements and server-side tracking
  • Spanish i18n (~200 translations)
  • Security audit (Red Team + Black Team)
  • Version control (checkpoints, history, auto-save)
  • Tauri desktop app
  • Hugo marketing site with blog

Next Up

  • Bi-directional editing — edit code AND blocks, changes sync both ways (the moat)
  • Classroom licenses — school onboarding, bulk pricing
  • More CTF challenges — expand the treasure hunt with harder puzzles
  • Leaderboard profiles — public badge showcase pages

Future

  • Scratch project import improvements (more opcode coverage)
  • Voice chat in collab rooms
  • Room history / replay
  • Mobile-native app
  • More languages (French, Portuguese, Mandarin)
  • API for embedding the block editor in external platforms

Monetization

Free forever: All blocks, visual editor, challenges, blocksets, code golf, sprite editor, collab, examples.

Premium: Code Labs, guided curriculum, advanced CS courses, teacher dashboard, classroom licenses.

The line: The sandbox + challenges = free hook. Guided curriculum + builder tools + institutional features = premium.

What we will NOT do: Paywall blocks, gate K-12 content, show ads to kids, sell user data.


Origin Story

CryptoBlocks started as an attack framework for a security competition. Reusable "lego" pieces in Python — small functions that each do one thing well. Snap them together in different orders, get different results. One night, staring at the terminal:

"This is just Scratch for hackers. Why doesn't this exist for everyone?"

The hacking part stays behind. What comes forward is the idea: small, composable, shareable blocks of real code that kids can see, use, modify, and eventually write themselves.


Born from a CTF competition. Built for the next generation of builders.

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors