← LabsL-02 · Product● Live2024 —

AutomataVerse

Theory of Computation, but you can see it — draw a machine, run a string, watch it execute. Dynamic ideas, finally in a dynamic medium.

automataverse.com ↗Solo · design + eng + ops

Fig. 0 — The whole product

17,000+

Users · from ~3,000

7

Machine families

50+

Countries

23,000+

Automata created

01 · The problem

Dynamic objects, taught through static media.

A DFA moves — the textbook shows the graph and hides the walk. Students trace by hand (and fail silently) or memorize patterns. The fix: make execution visible, make feedback immediate.

build → run → observe → correct
the loop every other tool was missing

02 · Seven machines, one editor

DFA

a,b · even-parity

NFA

ε-branching · …ab

DPDA

a,z₀/ab · parens

NPDA

(state, stack) sets · aⁿbⁿ

TM

a/bR · tape head

2-TAPE TM

a;b/c;d/R;L · wcw

MEALY / MOORE

a/1 · output, not accept

One canvas reshapes itself per family: PDA brings up a live stack, TM a tape, Moore puts outputs on states. Nondeterminism = watching the machine be in four places at once.

03 · The core loop — first run < 30s from landing

pick type→add states→click-click → transition→toggle final→RUN / STEP

No signup wall — canvas is already there
Execution paced at ~500ms — the pause is the pedagogy
Duplicate edges merge: a + b → one arrow "a,b"
⌘K palette · chrome-style tabs · 3 themes
PNG @2× + JSON export · localStorage autosave
Verdict names the symbol and state where it died

04 · Errors that teach

"No transition for 'b'"
→ machine incomplete
"Multiple Transitions for Same Symbol"
→ not deterministic
"Maximum steps exceeded"
→ your TM doesn't halt — a lesson, not a freeze

You can't solve the halting problem. You can bound it and say so honestly.

05 · Architecture

BROWSER — 8 async engines · Konva canvas · tabs · autosave
↓ Bearer token
API ROUTES — the only server code
↓ Admin SDK
FIREBASE — Auth · Firestore · rules · Stripe ext.

Client-heavy, thin server. Simulation never touches the network: works offline, zero-latency feedback, ~free hosting.

06 · The whole data model

// rendering geometry = computational graph
Node { id, x, y }
Transition { label, source, target }
TransitionMap = adjacency by source
lookup: O(out-degree), not O(|E|)

One DTO serializes everything: autosave, export, cloud save, assignments, submissions. Labels are plain strings — what you type is what's stored is what's drawn.

07 · The trick: animation IS the algorithm

highlightTransitions(t);
await sleep(500); // ← the pedagogy
setCurrNode([next]);

Engines are async and narrate themselves through injected setters. One implementation per machine — no trace-and-replay layer to drift. Bounded everywhere: MAX_STEPS 1000, MAX_CONFIGS 2000.

08 · Edge geometry = the feel

Arrowheads offset by node radius, labels on measured plates, drag-vs-pan made mutually exclusive. Small trig; the entire difference between "graph library" and "editor."

09 · Classroom layer — submissions are runnable machines, not screenshots

create group→invite by email→assignment + starter→student submits→grader RUNS it

Roles: admin > mentor > member. Grading by execution, with points + markdown feedback. Never in the original plan — instructors showed up and asked for the missing half. Now ~half the product.

10 · The hardening

Built with toy defaults; then real classrooms with grades arrived. Membership docs were client-writable — anyone could self-promote to admin.

Anything that grants authority is server-mediated. The client may never write it.

Identity from the verified token, never the body. Rules and routes agree. Client checks demoted to optimistic UI. Audited exhaustively, not incrementally.

11 · Growth — organic search, compounding, seasonal

"DFA simulator online", at midnight, before the assignment is due → one click, no signup → the group chat. Usage tracks the academic calendar; every post-v1 feature came from watching real use: PNG export (homework), tabs (comparison), step cap (frozen tabs), dark theme (1 a.m.).

12 · Learned / Next

Distribution is a technical decision — the CRA→Next.js migration mattered because search supplies the users.

The interaction is the product — the value is the half-second pause, not the verdict.

Correctness has a UX surface — bounded simulation + honest error beats hanging or lying.

One implementation, paced, beats two, synchronized — the unwired headless engines still drifting in the repo prove it.

Security posture doesn't upgrade itself — audit every authority-granting write at once.

01Machine-type registry — kill the repeated switch, before family #8
02One parseLabel(type, label) — encode/decode can't drift
03Auto-grading — define assignments by language, validate by execution
04Animated conversions — NFA→DFA, minimization, regex→NFA
05Telemetry on learning — where first attempts fail, not just usage

The bet: the material isn't hard — the medium was.

Next.js 16 · React 19 · TypeScript · Konva · Firebase · Stripe · Vercel

Explore AutomataVerse ↗