← emm jay

Product

Knorient

An interactive way to learn how software works — build a map of a system, predict what it will do, then trace what really happens.

Role
Design and engineering
Status
In progress
Stack
React, TypeScript, React Flow
Knorient in dark mode. A lesson panel asks what still works when the connection to Sync Service goes down; the learner's answer is confirmed. On the canvas, a dozen concept cards, each with its own colour and icon, and Sync Service outlined in red, marked Never arrived. A strip along the bottom reads: App Logic cannot pass buy milk to Sync Service, nothing connects them. Blocked, step 2 of 5.
A lesson from Unit 5. The learner predicts what still works when the sync service is cut off, then the trace along the bottom plays the system step by step and stops where the message never arrives.

The idea

More people are building software with AI tools, often without a picture of the system underneath. Knorient teaches that picture first: learn to see the system, not memorise the code. Every lesson runs the same loop.

  1. Scenario
  2. Predict
  3. Trace
  4. Compare
  5. Repair

Design decisions

The same prediction on a phone, in light mode: the question, two answers, and the confirmed answer highlighted in green.

Light and dark, desktop to phone

Both themes are designed rather than inverted, and the lesson becomes a sheet over the canvas on a small screen. The learner arranges the map; Knorient owns what each piece and connection means, so the map can be checked.

Status

In progress. Seven Base Camp units and a first Systems Lab are playable end to end, and are being refined from first-time-learner testing.