SQL · DATA SKILLS · LEARNING TOOL

LARKSPUR DATA DESK

A SQL practice game set at fictional Larkspur Freight. Start as a data intern, read requests from colleagues, write queries, repair broken reports, and build toward data engineering tasks. PostgreSQL runs inside the browser, so answers are checked by a real database.

React · TypeScript · Vite · CodeMirror · PGlite · Offline PWA

OPEN SQL DESK

Larkspur Freight office map with SQL chapter desks and beginner progress

A SQL ticket with a CodeMirror editor, database results, and schema explorer — Real application captures from the repository's browser screenshot workflow, using fictional practice data.

PROJECT SNAPSHOT

Real queries, useful mistakes, visible progress

Type: Interactive SQL learning and practice game
Status: Live at larkspur.edwardtorres.dev
Technologies: React, TypeScript, Tailwind CSS, CodeMirror 6, PGlite WebAssembly, PostgreSQL AST parsing, Vitest, Playwright, Cloudflare Pages

Thirteen chapters covering SELECT, NULL, aggregation, joins, CTEs, windows, writes, modeling, pipelines, indexes, and interview practice
Runnable lesson examples, predictions, guided queries, independent tickets, and multi-part bosses
Deterministic visible and hidden datasets with checks for boundaries, ties, duplicates, and missing values
Schema-aware SQL editing, a table explorer, phone keyword buttons, and a read-only scratchpad
Tiered hints, known-mistake explanations, and bounded result diffs
Mastery gates, ranks, XP, badges, Daily Review, Weak Spots, and timed interview sets
Versioned local saves, export/import, backup reminders, and offline use after first loading the needed screens

OPEN SQL DESK SOURCE REPOSITORY

The problem

SQL study can become a cycle of reading syntax without learning how to turn a business request into a correct query. A query that works on one example may still fail when rows contain NULLs, duplicate values, tied timestamps, or boundary dates.

The freight setting makes each exercise a concrete request: shortlist shipments, investigate totals, repair an incremental load, or model warehouse data. Small deterministic datasets let learners inspect their work while hidden edge cases check whether the answer generalizes.

Learning design

Each chapter connects a short lesson and runnable example to guided practice, independent work, and a multi-part boss ticket. Boss completion unlocks the next chapter; collecting XP alone cannot substitute for mastery. Learners can also test out through a chapter's boss.

Hints progress from a nudge to an approach and partial query. Review revisits earlier work with a different sample, while Weak Spots surfaces recorded mistakes and readiness. Timed interview sets separate pass/fail feedback during the set from explanations after it finishes.

Grading & accuracy

PGlite executes learner and reference SQL against the same deterministic fixtures. Read-query grading compares duplicate counts, required order, column names, and PostgreSQL types. Structural requirements use a PostgreSQL parser rather than keyword matching. Write tickets inspect database state and constraint behavior.

Queries run inside rolled-back transactions in a worker with execution deadlines and row caps. A runaway worker is terminated and recreated for the next request. Lessons cite official PostgreSQL documentation, with dialect notes referencing Microsoft and Spark or Databricks sources.

Technical architecture

The app runs entirely in the browser, without accounts or a backend database. React renders the office and learning screens; CodeMirror supplies the SQL editor. Full ticket definitions load by chapter, while the editor and WebAssembly database load when a SQL screen needs them.

A service worker caches the shell and saves other assets on use. The large SQL engine is deliberately excluded from precaching. Versioned localStorage saves preserve progress across reloads and migrations; export/import provides manual transfer between devices.

Quality & deployment

Unit and integration checks cover SQL grading, deterministic seeds, content contracts, game rules, and save migrations. Browser tests exercise phone and desktop journeys, keyboard and tap navigation, accessibility, content security policy, query recovery, and offline operation.

The app is published separately on Cloudflare Pages at larkspur.edwardtorres.dev. Its deployment preserves the WebAssembly security policy, serves precompressed engine files, and caches hashed assets immutably while revalidating the entry page and offline worker. The portfolio card and project analysis live on this website.

Tradeoffs & next steps

Progress stays in the current browser and does not sync automatically. Export a backup before clearing browser data. Offline use requires a successful first visit and loading the screens you intend to use; unopened chapter content may still need a connection.

Hidden fixtures are omitted from normal feedback, but browser-delivered content is inspectable. The app supports practice rather than secure assessment. Completion and interview readiness summarize in-app activity, with no claim of measured hiring outcomes or guaranteed job readiness.