Keith Reed

CalTPA Writing Studio

Writing tool. Live

A writing workspace for California teaching candidates working on the CalTPA. Each part gets its own template, and a keyword check shows which rubric categories a draft still misses.

The assessment

California teaching candidates write long, structured responses for the CalTPA, split into parts that each have their own requirements. The hard part is knowing whether a draft covers what the rubric asks for before you submit it.

What's in it

• A template for each of Parts A, B, C, G, and H.
• A searchable library of the teaching standards.
• Keyword highlighting, and a radar chart of how well a draft covers each rubric category.
• A 14-page guide to the credential pathway.

How it's built

Two Cloudflare Workers and a D1 database. New accounts wait for my approval before they can sign in. The demo needs no account and keeps drafts in your browser.

• React
• TypeScript
• Vite
• Cloudflare Workers
• D1

caltpa.rootsofreason.org

Math Mastery

Learning app. Live, still adding to it

Math practice I built for my tutoring students: multiplication, division, fractions, geometry, and word problems, each with a visual model next to the numbers.

Why I built it

My students needed practice I could change between sessions, depending on what they had just gotten stuck on, so I built my own. There are six rooms: multiplication, division, adding and subtracting, fractions, geometry, and word problems. Each one puts a visual model next to the arithmetic.

Anyone can practice as a guest, and their progress saves in the browser. With an account, progress saves to the cloud and follows the student to another device.

How it's built

React and TypeScript on Cloudflare Pages, with Pages Functions handling accounts and saves against a D1 database.

I'm connecting it to my tutoring hub, which keeps its own records. The hub decides on the server whether an answer was right, and it keeps a student's first try apart from a corrected one, because the two tell me different things.

• React 19
• TypeScript
• Vite
• shadcn/ui
• Pages Functions
• D1

math.rootsofreason.org

Code Playground

Learning tool. Live

A coding sandbox for students where a shape, a set of sliders, and the code that draws it stay in sync. The code can be shown in Luau, GDScript, or Python.

Why it's built this way

Kids learning to code often can't connect a line of code to what it does on screen. Here the shape, the sliders, and the code all edit the same thing, so changing one changes the other two.

Three languages

Luau is what Roblox uses, GDScript is Godot's, and Python is what most intro courses teach. A student sees the same idea in whichever one they'll use next.

• React, single file from a CDN
• Canvas

code.rootsofreason.org

Physics flashcards

Learning tool. Live

Interactive flashcard modules for physics. Each card starts with something you move, then names the idea and asks a few questions about it.

How a card works

Each card opens on something you can move: a wave, a slider, a scene. Once you've played with it, the card names the idea, gives the key terms, and asks a short quiz.

• HTML, CSS, JavaScript
• Canvas

lms.relay70.dev/cards

Lithorium

My business. Live, and I'm still adding to it

The site for my rock and mineral business. The home page is the menu: five sections orbit a ring of drifting particles.

The orbit

Shop, Stories, Learn, About, and Explore sit around a ring of drifting particles. Each one has its own color and a one-line description when you hover it. If you'd rather have a normal menu, one click gives you that instead.

Getting there

I went through an SVG radial menu and a plain ring before the particle version. The particles run on a small Canvas engine I wrote for the site.

• HTML, CSS, JavaScript
• Canvas

lithorium.rocks

Sound Toys

Interactive collection. Live

Ten instruments that run in the browser. They all color sound the same way: pitch sets the hue, register the saturation, and loudness the brightness.

One color rule

Because every instrument uses the same mapping, a given note is the same color wherever it shows up.

The instruments

• A theremin, beat frequencies, and Karplus-Strong plucked strings.
• IPA vowel formants and a Doppler model.
• A resonance study, an acoustic field simulation, and animal hearing ranges shifted into the human range.
• A live spectrum analyzer that drives a radial pitch wheel, an oscilloscope, and a spectrogram.

• JavaScript
• Web Audio API
• Canvas

sound-toy-deploy.pages.dev

Chromata

Creative tool. Live

A drawing tool that redraws a picture as moving lines. Small pathfinders wander across the image and draw with the colors they pass over.

What I added

I built an editor around the Chromata engine so the drawing can be steered while it runs.

• Force points and radial paths, adjusted live from a control panel.
• Face detection that pulls the lines toward faces.
• Regions to keep lines in or out of, plus presets.
• Microphone or audio-file input that shifts the colors with the sound.
• Story Studio, a second mode that strings images and text into a timed piece.

The drawing engine is Michael Bromley's Chromata. The editor around it and Story Studio are mine.

• JavaScript
• Canvas
• Tweakpane
• Face detection
• Web Audio

chromata.relay70.dev

auto.relay70

My own tooling, in progress. In progress

Tools that keep my AI coding agents working on a schedule while I'm away, and keep a record of what each run did.

What it does

I keep a list of the agent jobs that should run and when. The scheduler runs them, each run leaves a record of what it produced, and anything on the list that didn't actually get scheduled shows up as a mismatch.

The website describes the tools. The tools themselves run on my own machine.

auto.relay70.dev

Roots of Reason website

My business. Live

The website for my tutoring practice. Families read about the services, book a consultation, and fill out intake forms there.

What it does

Booking, consultation requests, parent surveys, and intake forms all go to the site's own server functions. Each request is saved to a database, emailed to me, and screened for bots.

The rest of the domain

rootsofreason.org also hosts the other tools I've built for my students, including Math Mastery, the CalTPA Writing Studio, and Code Playground. Each one is deployed on its own.

• HTML, CSS, JavaScript
• GSAP
• Pages Functions
• D1
• Resend
• Turnstile

rootsofreason.org

Onleigh Crystals

My business. Website live; Shopify theme built

The store for my crystal business. I built the current website, and I wrote a Shopify theme from scratch for when the shop moves to Shopify.

The website

The current site is a React app on Cloudflare Pages with its own database: collections to browse, product pages, and a journal about the stones.

The Shopify theme

For the move to Shopify I wrote the theme myself instead of starting from a template: 40 sections, 27 templates, and the snippets and blocks behind them. Every push runs Shopify's theme check, a check that every file the theme references exists, and Lighthouse.

The Shopify store isn't open yet, so there's no link to it here.

• React 18
• TypeScript
• Vite
• Tailwind
• D1
• Vitest
• Shopify Liquid
• GitHub Actions

Focus Matrix

Study tool. Live

A study-session planner. You list what you're going to do, give each item a timer and a priority, and earn a coin for each one you finish.

What it's for

A study session goes better with a plan: what to do, in what order, for how long, and when to take a break. The planner holds that plan and keeps time for each part.

Saving progress

Progress saves in the browser as well as to the cloud, so a reload never loses it, even when no student is signed in. Each finished item pays its coin once, no matter how many times it's checked and unchecked.

• React
• TypeScript
• Vite

focus-matrix.pages.dev

Long Night

Generative art. Live

A night sky drawn from real star positions for the current time, above a treeline. The same positions are available from an API.

How it works

Each star is placed from a star catalog, projected onto the sky for the current time, and drawn above the horizon. Leave it open and the sky slowly turns.

The API

Programs can ask for the same star positions directly, without the picture.

• JavaScript
• Canvas
• Cloudflare Pages
• D1

night.relay70.dev