Melanie Baratto — Software Developer | Front-End · React · React Native

Independent Work

One studio · seventeen projects · shipped solo

Plate 01

Northbound

An AI-native software studio in Toronto — fixed scope, fixed price, fixed date. Products built in 7 to 30 days.

A hand-built EN/FR bilingual layer — 247 translation bindings across text, markup, ARIA labels and placeholders, persisted to localStorage, with the mobile comparison table re-derived on every language switch.
A serverless contact pipeline on Vercel — a Node function posting to Resend, with per-field HTML escaping and a plain-text fallback body.
A cross-referenced JSON-LD entity graph, sitemap, robots and full icon set across 23 pages and ~10,000 lines — zero dependencies, no build step.
Ships its own agent tooling: seven authored Claude Code skills that run client scoping, with a manifest template and an eval harness.

HTML CSS Vanilla JS Vercel Functions Resend JSON-LD i18n · EN/FR

Live

Visit Source

The Line

Four products · designed, built and shipped inside 48 hours

Plate 02

Duebook

A repeat-customer engine for service businesses — it ranks who is due, and drafts the reminder for a human to approve.

The brand mark is a live tear-off calendar — the logo writes today's real date into every instance on load.
Two independent IntersectionObservers: one for scroll reveals, one that animates each service's interval bar to its own percentage only on entry.
Reduced motion is a code path, not a media query — a matchMedia check and a feature test both short-circuit to the final state, so nothing hides behind an animation that will never run.

Single-File HTML Vanilla JS IntersectionObserver JSON-LD GitHub Pages

Live

Visit Source

Plate 03

ZipQuarry

Local prospecting by ZIP radius — it finds the businesses nearby, enriches each lead, and drafts the first email.

The hero's animated radius search is pure CSS keyframes and inline SVG — no images, no libraries, no canvas.
Every colour, radius, shadow and typeface is a :root token, so one line repaints the whole site.
Real CI/CD for a static page — a GitHub Actions Pages pipeline publishing an artifact deployment on every push, with in-progress runs cancelled.

Single-File HTML CSS Keyframes Inline SVG GitHub Actions Design Tokens

Live

Visit Source Read the case

Plate 04

Millwright

Custom internal apps, automated workflows and AI agents — built around the process a business already runs.

Accessibility designed in, not bolted on — a described aria-label on the workflow diagram with the decorative SVG hidden from assistive tech, visible focus rings throughout, and every animation disabled under reduced motion.
A semantic token system — ink, paper, volt and jade — drives the page's entire light/dark alternation from two variables.
The animated workflow diagram is inline SVG and three keyframe sets — no illustration assets, nothing to download.

Single-File HTML Inline SVG Design Tokens WCAG 2.1 AA GitHub Pages

Live

Visit Source

Plate 05

Quotefront

Estimate intake for trades — a guided, photo-first request that comes back as a structured scope and a ballpark range.

A 15-token documented design system — a full navy/blue scale plus amber and jade for estimate and confirmation states, with dark sections inverting the palette.
Eight component-scoped breakpoints — each attached to the component that needs it rather than to one global grid.
Progressive enhancement held to — all copy lives in markup, the FAQ is native <details>, and hero reveals fire on load so nothing above the fold waits for a scroll.

Single-File HTML Design System Progressive Enhancement GitHub Pages

Live

Visit Source

The Workshop

Five projects · engines, simulations, client work and a type library

Plate 06

Laska

Emanuel Lasker's 1911 column-capturing draughts, rebuilt as a full-stack TypeScript game with its own engine and opponent AI.

One zero-dependency rules engine is imported verbatim by both the React client and the authoritative game server, so the two can never disagree about what a legal move is.
The opponent runs negamax with alpha-beta pruning and quiescence search over a column-aware evaluation, across six difficulty tiers.
130+ tests, a Playwright end-to-end suite and CI on GitHub Actions — and the engine is validated by replaying Lasker's own 1911 games on every import.

TypeScript React Vite Node Playwright GitHub Actions

Live

Visit Source

Plate 07

Emergence

A particle-life simulator where membranes, chasers, oscillators and galaxies emerge from nothing but an N×N attraction matrix.

Eleven behavioural archetypes identified and formally classified, each with a real-time computational detector that names the pattern as it forms.
Written against raw canvas with typed arrays and an O(N) spatial hash for neighbour lookup, so thousands of particles stay smooth.
No framework, no build step, no dependencies — every line of the simulation is hand-written.

JavaScript Canvas Typed Arrays Spatial Hashing GitHub Pages

Live

Visit Source

Plate 08

OutfitOracle

A weather-powered styling app — it reads live conditions for any city and returns a structured outfit verdict.

Cross-platform React Native (Expo, TypeScript 5.3) for iOS and Android from a single codebase.
Geocodes any city through Open-Meteo, then passes the live conditions to the Claude API for a structured verdict rather than free text.
Built around a state-machine hook for the fetch lifecycle, with AsyncStorage persistence and native-driver entrance animations.

React Native Expo TypeScript Claude API Open-Meteo

iOS · Android

Source

Plate 09

Montecasino

My first paid client project — a Spanish-language restaurant, hotel and event venue, taken from brief to launch.

A multi-page marketing and menu site built in HTML5, SASS and vanilla JavaScript, before any framework was involved.
Shipped with a sitemap, robots.txt and documented SEO guidelines handed over to the owner.
Worked directly with the owner in Spanish, from the first brief through to launch.

HTML5 SASS JavaScript SEO

Live

Visit Source

Plate 10

Typecase

A private type library, lookbook and journal — fifty families scanned at build time, forty-four pairings composed as real pieces, and twelve articles on what to use each face for.

Fonts are parsed, not trusted — a fontkit build step reads every glyph outline and marks the placeholders, watermarked vowels and ligature traps that demo cuts hide.
Every look is a pairing with a reason — composed in its own three-colour palette with a WCAG contrast badge, and openable straight into a comparison or an editable page.
Content is data — a look or an article is one object in a file, and shareable URLs carry the full state of a comparison so a pairing travels as a link.

Vite + React fontkit Design System GitHub Pages

Live

Visit Source

The Laboratory

Four experiments · simulations, languages and instruments

Plate 11

Primordium

Two species of neural network — one hunting, one fleeing — coevolve under the law of the Red Queen. An experiment built so that it can come back null.

NEAT-style evolvable topology under a global innovation registry, with compatibility-distance speciation and explicit fitness sharing — no architecture is designed, all of it is mutated into existence.
Every synapse carries its own evolvable learning rate, so within-lifetime plasticity is inherited as a rule rather than as weights. Recurrence and memory emerged in 10 runs out of 10.
The verdict is a two-sided permutation test over 20,000 shuffles against a frozen-predator control — statistic and threshold both fixed before the first run.

Vanilla JS Canvas NEAT Permutation Test Zero Dependencies

Live

Visit Source

Plate 12

Lexicon

A population that begins with no shared words. A vocabulary, a drifting myth and a taboo assemble themselves out of nothing but conversation.

Three coupled models in one file — a naming game for vocabulary, telephone-style mutation for myth, and prohibition spread backed by an optional metanorm.
Prestige and conformist transmission biases run over two topologies — well-mixed for global consensus, spatial for persistent regional dialects.
Every stochastic draw comes from one seeded mulberry32 PRNG, so any run replays exactly from its seed. Consensus, fragmentation and endless drift are all valid outcomes.

Single-File HTML Vanilla JS Canvas Seeded PRNG

Live

Visit Source

Plate 13

Wend

A small programming language in which execution history is part of the language — you rewind a run and ask when a value changed.

A 1,700-line interpreter with zero dependencies — lexer, parser and a generator-driven evaluator that yields between steps, so a run can be stepped, paused and wound back.
Reversible execution and value history — deterministic seeds make every run reproducible, and --trace replays how each binding changed instead of printing only its last value.
One runtime in both places — a Node CLI reading stdin and a browser playground with a timeline scrubber — plus first-class group_by, to_csv and |> pipelines.

JavaScript Interpreter Node CLI Zero Dependencies

Live

Visit Source

Plate 14

Fathom

An RSVP speed-reader — one word at a time, each anchored on the letter the eye actually lands on, so your gaze never has to move.

A framework-agnostic core package — tokenizer, optimal recognition point solver, timing and transport — with a React reader built on top, held by 122 specs across the monorepo.
Pacing is drift-corrected, not a naive interval: 100 to 800 WPM, with longer dwell on long words and real pauses at clause and sentence ends.
PDF and EPUB are parsed entirely on-device, and prefers-reduced-motion turns auto-advance off in favour of manual stepping and a non-flashing full-text view.

TypeScript React Vite Monorepo Vitest

Live

Visit Source

The Reading Room

Two long-form pieces · editorial built as software

Plate 15

Fuego

An interactive atlas of volcanic geology, built by someone who grew up watching mountains breathe — Guatemala's ring of fire, in long form.

A cursor-following spotlight masks two layered geological images against one another, so moving the pointer peels back the surface of the earth.
Full profiles of the four persistently active peaks — Fuego, Pacaya, Santiaguito and Acatenango — with elevation, eruption cadence and historical record.
A long-form editorial on the fire archipelago — its tectonics, its cultural weight and its human cost — set in Playfair Display against Inter.

React TypeScript Vite Tailwind CSS Canvas

Live

Visit Source

Plate 16

Is Anyone Home?

A long-form essay on machine consciousness where every load-bearing claim carries an epistemic confidence tag — and the page enacts its own argument.

A certainty threshold control filters the essay in place — raise it and the page visibly hollows out to only what is settled, which turns out to be very little.
Nine sections spanning the competing theories, the steelmanned case on both sides, the published research and the loud public voices — each claim tagged established, contested, speculative or unknowable.
One React essay held together by a single useState and one context threading the threshold down — no state library, fully keyboard-navigable, honouring prefers-reduced-motion.

React Vite Context API IntersectionObserver

Live

Visit Source

The Assay

Two instruments · systems built to be hard to fool

Plate 17

ReconAI

An accounts-payable clerk's afternoon, automated — read the invoice, match every line to the purchase order, and decide whether it is safe to pay.

Claude does only what a model should — transcribing the invoice exactly as printed, and matching each line to the right PO line when the wording differs (Wheel stops - replace against Wheel stop replacement), with a confidence score per pairing.
The model never does the arithmetic. Every unit-price delta, quantity delta, per-line qty × price, subtotal, tax and total is recomputed in plain TypeScript — the audit is a trust boundary, not a prompt.
Returns Approve · Hold · Reject with every mismatch priced, and ships a browser-only sample mode that runs the real reconciliation engine with no API key.

Next.js TypeScript React Claude API

Runs locally

Source

Plate 18

quant-harness

A backtesting harness for AI market agents, built to make the usual self-deceptions structurally impossible rather than merely discouraged.

Look-ahead bias is guarded twice — the decision loop makes future bars physically unreachable at decision time, and a detector test truncates the future to prove that earlier steps do not change.
Agents are scored against fair baselines, not against zero — all-cash and buy-and-hold controls, a multi-seed driver, and an accounting identity the portfolio must satisfy on every rebalance.
Deterministic to the seed and dependency-free at runtime, with 21 passing tests over execution, costs and the honesty guardrails. The report states what the numbers do not prove.

TypeScript Node.js Zero Dependencies Seeded PRNG

Beta

Source

Seventeen repositories · all public · fourteen live Everything on GitHub ↗

Melanie Baratto
Software Developer · Front-End Specialty

Worked With

Built & Run

Expertise

Work Experience

Independent Work

Northbound

Duebook

ZipQuarry

Millwright

Quotefront

Laska

Emergence

OutfitOracle

Montecasino

Typecase

Primordium

Lexicon

Wend

Fathom

Fuego

Is Anyone Home?

ReconAI

quant-harness

Writing

Lifting State Up

Get in
touch.

Melanie Baratto Software Developer · Front-End Specialty

Worked With

Built & Run

Expertise

Work Experience

Independent Work

Writing

Lifting State Up

Get intouch.

Melanie Baratto
Software Developer · Front-End Specialty

Get in
touch.