Demo
Loading SQLite engine…
Top earnersTop 10 by salary
Dept summaryHeadcount + avg salary
Salary bandsCASE expression
Results will appear here.
Schema: employees(id, name, dept_id, salary, hired) + departments(id, name, floor)
Schema
Two tables, seeded with 50 employees and 5 departments.
departments (id INTEGER PK, name TEXT, floor INTEGER)
→ Engineering, Marketing, Sales, Finance, Operations
employees (id INTEGER PK, name TEXT, dept_id INTEGER FK, salary REAL, hired TEXT)
→ 50 rows, salaries $42K–$120K, hired 2018–2025
How it works
Everything runs in the browser. No data leaves the page.
sql.js WASM
SQLite compiled to WebAssembly, loaded from CDN (~1 MB). Creates an in-memory database.
Seed data
JS creates tables and inserts 50 employees + 5 departments on page load.
Query + render
User SQL runs via db.exec(). Results render as an HTML table.
Decisions
The tradeoffs that make this maintainable.
Client-side only
No server means no SQL injection risk, no authentication, and no cost. The database lives in memory and resets on refresh.
sql.js over a real backend
sql.js is SQLite compiled to WASM : full SQL support in ~1 MB. Good enough for a portfolio demo without running a server process.
Realistic sample data
50 employees across 5 departments with realistic salaries and hire dates gives enough data for JOINs, GROUP BY, and window functions.