SQL quest

An interactive, gamified SQL tutorial that runs entirely in the browser. Learn SQL through 33 bite-sized lessons — Basic → Intermediate → Advanced — each with a plain-English explanation, a pro-level explanation, an example, and a hands-on challenge you write and run yourself.

Features

• 33 lessons across three tiers (Basic, Intermediate, Advanced), unlocked progressively as you complete each one
• Two explanation modes per lesson — "Explain like I'm 5" and "Explain like a Pro"
• Live query execution in the browser via sql.js (SQLite compiled to WebAssembly) — no backend required
• XP, streaks, and progress tracking, persisted locally via localStorage
• Sample schema with employees, customers, and orders tables to practice against
• Optional local MySQL bridge server (see below) if you'd rather run challenges against a real MySQL database instead of the in-browser engine

Getting started

No build step or install required for the core app.

1. Serve the folder over HTTP (opening index.html directly via file:// won't work because of WASM/module loading restrictions). A helper script is included:

   ./_serve.ps1

   This serves the app at http://localhost:8791/.

   Alternatively, use any static file server, e.g.:

   npx serve .

2. Open the served URL in your browser and start with Lesson 1.

Progress is saved locally in your browser, per-origin. Use the Reset button in the top bar to clear it.

Optional: local MySQL bridge

By default, challenges run against an in-browser SQLite database (via sql.js). If you'd rather practice against a real MySQL instance (e.g. the same one MySQL Workbench connects to), a small local Flask bridge is included in server/.

cd server
pip install flask pymysql
cp .env.example .env              # then edit with your MySQL credentials
python app.py

The bridge:

• Seeds your database from server/seed.sql on startup
• Exposes GET /api/health, POST /api/seed, and POST /api/query
• Only allows read-only SELECT / WITH / EXPLAIN statements, and only a single statement per request
• Runs on http://127.0.0.1:5057 by default (configurable via .env)

This server is intended for local use only — it has no authentication and permissive CORS.

Project structure

index.html   Page shell / layout
style.css    Styling
data.js      Lesson content + sample database seed (SEED_SQL) for sql.js
app.js       Game engine: lesson rendering, progress/XP/streak tracking, query execution & grading
server/      Optional local MySQL bridge (Flask + PyMySQL)
_serve.ps1   Minimal PowerShell static file server for local dev

Tech stack

• Vanilla HTML/CSS/JS, no framework or build tooling
• sql.js (SQLite via WebAssembly) for in-browser query execution
• Flask + PyMySQL for the optional MySQL bridge server