Visual SQL Query Builder with Schema Explorer

SQL is usually learned backwards: students memorize SELECT syntax from slides, then freeze when asked to write a three-table join with a GROUP BY in a viva or interview. The gap is between reading queries and composing them — seeing how each clause changes the result. This project closes that gap with a visual builder: tables are added from a schema explorer, columns are ticked, filters are stacked as condition rows, and aggregates, grouping, ordering and limits are picked from controls. Every visual choice is compiled into real, highlighted SQL on screen, and the identical logic executes immediately against a sample database of departments, employees and orders — so the student sees cause and effect for every clause. Because the app ships with hand-built saved queries (including joins and aggregations), it doubles as a teaching aid the student can walk an examiner through.

1. The student opens the schema panel, expands a table to inspect its columns and types, and adds it to the query.
2. When a second table is added, the builder suggests the join from the known foreign key (e.g. employees.dept_id = departments.id), shown as an editable INNER/LEFT join row.
3. Columns are ticked per table; any column can carry an aggregate (COUNT, SUM, AVG, MIN, MAX) for summary queries.
4. WHERE conditions are added as rows — column, operator (=, ≠, >, ≥, <, ≤, contains), value — combined with AND/OR.
5. Group-by, order-by and limit controls finish the query; the equivalent SQL is rendered with syntax highlighting.
6. Pressing Run executes the same logic against the in-browser sample data and shows the result grid with row counts and the measured execution time.
7. The Sample Data tab shows the raw tables being queried, and Saved Queries loads hand-built examples into the builder.

Tech stack:

• HTML5, CSS3, JavaScript (ES6, zero dependencies)
• In-browser query engine (AST-based execution)
• Deterministic seeded sample dataset (departments, employees, orders)
• Single-file app — runs offline, no build step, no server

• [Visual query composer] Add tables, tick columns, stack WHERE conditions and set grouping, sorting and limits through controls — the SQL is generated live from every choice.
• [Schema explorer] All three sample tables expand to show columns and types with row counts, and tables are added to the query with one click.
• [Automatic join suggestions] Foreign-key relationships are detected when tables are combined, and each join can be toggled between INNER and LEFT.
• [Real in-browser execution] The visual query executes against the sample data (24 employees, 60 orders, 6 departments) with result grid, rows-returned, rows-scanned and measured execution time.
• [Aggregates and grouping] COUNT, SUM, AVG, MIN and MAX with GROUP BY, so queries like "total order value per department" are built visually.
• [Highlighted SQL output] The generated statement is syntax-highlighted exactly as written, ready to copy into any real database.
• [Saved query pack] Four hand-built examples (joins, filters, aggregation) load into the builder and run with one click — ideal for demonstrations.

• Complete single-file SQLCraft web app (builder, schema explorer, data browser, saved queries)
• Seeded sample database (departments, employees, orders) with documented schema
• Four hand-built saved example queries
• Project report PDF (SQL concepts, query-planning methodology, implementation, usage guide)
• PPT presentation for final review
• Viva Q&A preparation document (joins, aggregation, GROUP BY vs WHERE, indexing concepts)

• The engine executes a teaching subset of SQL (single-level queries, one GROUP BY, basic aggregates) — it is not a full SQL parser and does not accept typed SQL input.
• Sample data is fixed and seeded for reproducible demos; connecting a live database is listed as future scope, not implemented.
• Joins are suggested only for the documented foreign keys in the sample schema; arbitrary join conditions cannot be typed.
• The app is a learning and demonstration tool, not a database client — performance figures are measured on the sample data only.
• Very large result sets are capped at the LIMIT value for display; the engine itself is not benchmarked for scale.