A browser-based SQL learning playground. Everything runs locally — no backend, no database connections. SQLite runs directly in the browser via sql.js (WebAssembly).
- 6-table e-commerce schema with realistic Finnish sample data (customers, products, categories, orders, order rows, suppliers)
- 30 progressive exercises across three difficulty levels (helppo / keskitaso / vaikea)
- Topics:
WHERE,ORDER BY,JOIN(2 and 3+ tables),GROUP BY,COUNT/SUM/AVG,HAVING, subqueries,UNION,LEFT JOIN,IS NULL - Schema sidebar showing columns, types, and PK/FK badges
- Mini data grids previewing all tables at the top of the screen
- SQL editor with Finnish error messages; run with
Ctrl/Cmd + Enter - Automatic checking that compares your result against the reference solution
- Progress tracking persisted to
localStorage - Dark theme, monospace UI
npm install
npm run devProduction build:
npm run build
npm run preview- React 18 + TypeScript
- Vite
- Tailwind CSS
- sql.js (loaded from CDN, no npm dependency)
| Table | Columns |
|---|---|
Asiakas |
id, nimi, kaupunki, syntymavuosi, email |
Kategoria |
id, nimi |
Tuote |
id, nimi, hinta, kategoria_id → Kategoria |
Tilaus |
id, asiakas_id → Asiakas, pvm |
TilausRivi |
id, tilaus_id → Tilaus, tuote_id → Tuote, maara |
Toimittaja |
id, nimi, maa, email |
Some email and kategoria_id values are intentionally NULL so you can practise IS NULL queries.
Note: table and column names are in Finnish (the exercises themselves are written in Finnish), but the rest of the documentation and UI scaffolding is approachable from English.
src/
App.tsx # main component (UI, editor, validation)
db.ts # schema + seed data
exercises.ts # 30 exercises with reference solutions
main.tsx
index.css
index.html # loads sql.js from a CDN
Ctrl/Cmd + Enterruns the current query- Click an exercise in the right sidebar to load it into the editor
- The 💡 hint button reveals keywords pointing toward the solution
- The "Nollaa" (Reset) button in the header clears your progress