Practice Thy Algorithms

Solve and verify classic algorithm problems entirely in your browser — no clone, no toolchain, no backend. Pick a problem, pick a language, write a solution, and run the bundled test cases instantly, client-side.

▶ Live: https://jaysonvirissimo.github.io/practice-thy-algorithms/

What it is

A static single-page app (hosted on GitHub Pages) that runs your code and its test cases in the browser, across three languages:

• JavaScript — executed natively in a Web Worker.
• Ruby — executed via ruby.wasm (CRuby → WebAssembly).
• Python — executed via Pyodide (CPython → WebAssembly).

The Ruby and Python runtimes are downloaded lazily the first time you select that language.

Features

• Browsable catalog of 27 problems with academic-style statements.
• CodeMirror 6 editor seeded with the correct function signature; optional Vim keybindings and a reset-to-signature action.
• In-runtime test harness: per-case pass/fail, expected-vs-actual diffs, runtime errors, captured console.log/puts/print output, and an infinite-loop timeout.
• Progressive hints for select problems.
• Local persistence (your code per problem+language, solved status, revealed hints, Foundations answers, last language, and the Vim preference) via localStorage — everything stays on your machine. A Reset progress control at the foot of the catalog erases all of it except the language and Vim preferences.
• A medieval illuminated-manuscript ("Scriptorium") theme.

Usage

1. Open the live site.
2. Choose a problem from the catalog.
3. Choose a language (JavaScript / Ruby / Python). The first Ruby or Python run lazily downloads that runtime (one-time, multi-MB).
4. Write your solution and press Run (or ⌘/Ctrl+Enter). Solved problems get a ✓ in the catalog.

Local development

Requires Node 20 (see .tool-versions).

npm install
npm run dev        # Vite dev server
npm run build      # type-check + production build to dist/
npm run preview    # serve the production build locally

npm test           # Vitest (unit/component + Ruby/Python comparator parity)
npm run test:e2e:install   # one-time: install the Playwright browser
npm run test:e2e           # Playwright end-to-end (runs the real WASM runtimes)

Problem set

All 27 problems run in all three languages in-browser:

Two Sum · Unique Paths · Coin Change · Contains Duplicate · Best Time to Buy and Sell Stock · Valid Parentheses · Maximum Subarray · Product of Array Except Self · Three Sum · Merge Intervals · Group Anagrams · Reverse Linked List · Detect Cycle in Linked List · Container With Most Water · Find Minimum in Rotated Sorted Array · Longest Repeating Character Replacement · Longest Substring Without Repeating Characters · Number of Islands · Remove Nth Node From End of List · Palindromic Substrings · Pacific Atlantic Water Flow · Minimum Window Substring · Course Schedule · Top K Frequent Elements · Tiered Allocation · Tiered Allocation With Split · The Augsburg Bill Index

Foundations — short no-code exercises in counting the steps that basic operations take and stating the Big O of short procedures, answered in the browser and graded per part:

Florentine Deposit Ledger · Masons' Guild Roll · The Reeve's Tithe Count · The Venetian Account Register · The Jubilee Audit · The Moneychanger's Purse · The Usurer's Reckoning · The Assayer's Fair Weight

Editing or adding problems

shared/problems.json is the single source of truth — the app consumes it directly at build time (no code generation step). Each problem entry has:

• title, description, complexity, parameters;
• functionSignatures and returnType, keyed per language (javascript / ruby / python);
• testCases (each { input, expected, description }, with an optional comparison.mode of exact | unordered_array | set_equality);
• an optional top-level hints array (language-agnostic).

Foundations entries instead set "kind": "analysis" and carry title, description, hints, an optional code string (a JavaScript procedure shown under the description), and a parts array of { prompt, answer, explanation? }. Each answer is either { "type": "integer", "value": 81 } or { "type": "choice", "choices": [...], "value": "N" }. They have no complexity, signatures, or test cases, and they never reach a runner.

Edit the JSON, then verify with npm run dev in each language and npm test. If you add a problem, also add it to the problem list above.

Architecture

• src/data/ — loads problems.json (@shared alias) and the localStorage persistence layer.
• src/runner/ — a common LanguageRunner contract and the assert-in-runtime test harness: JavaScript runs in a fresh-per-run Web Worker; Ruby and Python run in persistent WASM workers (terminated and re-booted on timeout). Comparators are kept consistent across languages by a shared comparison-vectors.json parity fixture.
• src/components/ — the React UI (catalog, editor, results, hints).

Design details are in the SDD: issue #42.

Tech stack & deployment

Vite · React · TypeScript · CodeMirror 6 · Vitest · Playwright. Deployed to GitHub Pages by a GitHub Actions workflow on every push to master.

History

This was originally a multi-language local-CLI practice repo (clone, then run Jest / RSpec / unittest per language). That workflow was retired in the browser cutover; its final state is preserved under the cli-final git tag.