QueryCraft is a Next.js learning studio for database practice. It combines SQL execution, relational algebra, tuple calculus, ER modeling, normalization, and synthetic dataset generation in one workspace.
The project is mostly client-side, with lightweight API routes for seed datasets and Test DB health/probe checks.
- SQL Sandbox with in-browser SQL execution, schema browser, query history, statement-level results, CSV export, and SQL import.
- Relational Algebra playground with parser, expression tree, step-by-step evaluation, and SQL translation.
- Tuple Relational Calculus workspace with TRC-to-SQL conversion and execution.
- ER Diagram Builder (React Flow) with preset diagrams, PNG export, and ER-to-relational conversion.
- Normalization wizard for FD input, candidate key detection, normal form detection, and decomposition steps.
- Table Generator with semantic hinting and SQL generation using Faker-based values.
- Learn page as a searchable SQL/DBMS reference (DDL, DML, joins, aggregates, set ops, TCL, DCL, routines, and theory sections).
- Device-local account system (local accounts, password check, account export/import).
- Per-account state isolation for all persisted workspaces.
- App framework: Next.js App Router + TypeScript.
- SQL runtime: sql.js (WASM SQLite) in the browser.
- State: Zustand stores, persisted to user-scoped localStorage keys.
- Styling: Tailwind CSS v4 + custom CSS variables and motion.
- Diagrams: @xyflow/react.
- Server routes:
GET /api/datasetsreads JSON files fromseed/datasets.GET /api/tests/healthreports Test DB bootstrap/config status.GET /api/tests/health/proberuns a liveSELECT 1connectivity check against Test DB.
Public routes:
//login/register
Dashboard routes (client-side auth guard in layout):
/dashboard/learn/sandbox/sandbox/history/algebra/algebra/history/tuple-calculus/tuple-calculus/history/er-builder/normalizer/generator/settings
API routes:
/api/datasets(GET)/api/tests/health(GET)/api/tests/health/probe(GET)
Prerequisites:
- Node.js 20+
- npm
Install and run:
npm install
npm run devOpen http://localhost:3000.
Environment variables:
- None are required for currently shipped browser-first features.
TEST_DB_URLis optional and used for the upcoming Test module backend foundation.
You can move Test DB from local Postgres to a free hosted Postgres in a few minutes.
- Create a free Neon project and database (for example
querycraft_test). - Copy the connection string from Neon dashboard.
- Set
TEST_DB_URLin.env.local:
TEST_DB_URL=postgresql://<user>:<password>@<host>/<database>?sslmode=require- Apply migrations to the online DB:
npm run test-db:migrate:status
npm run test-db:migrate- Verify connectivity:
GET /api/tests/healthshould reportstatus: "ready"GET /api/tests/health/probeshould reportstatus: "ok"
npm run dev: start local development server.npm run build: create production build.npm run start: run production server.npm run lint: run ESLint.npm run format: run Prettier over repository.npm run test: run Vitest test suite once.npm run test:watch: run Vitest in watch mode.npm run test-db:migrate:status: show Test DB migration status.npm run test-db:migrate: apply pending Test DB migrations.npm run test-db:migrate:down: roll back the latest Test DB migration.npm run test-db:migrate:down:all: roll back all applied Test DB migrations.
Seed files are stored in seed/datasets and loaded through /api/datasets.
Current bundled datasets:
banking.jsoncredentia.jsonuniversity.json
- Accounts are device-local. Passwords are SHA-256 hashed in-browser.
- Active session user is stored in sessionStorage.
- Workspace data is persisted in localStorage with user-scoped keys.
- Query execution happens in-browser via sql.js, not against an external database.
This design is intended for learning workflows, not production authentication.
The unit suite validates:
- SQL executor behavior (DDL/DML, DCL, TCL, procedures, triggers, cursors, MySQL compatibility, and multi-database behavior).
- Statement splitting and PL/SQL runtime helpers.
- Data generator hint detection/output.
- Session persistence utility behavior.
Run all tests:
npm run testdocs/API.mddocs/SECURITY.mddocs/CONTRIBUTING.mdROADMAP.md