SQL Practice App

How agents.md Was Used

agents.md was the working spec for this project, and Codex used it as the source brief to create the app. It defined the product goal, the technical constraints, the stack, the required features, and the UI direction before implementation started.

Specifically, it was used to lock in:

• A browser-based SQL practice app for data analysts and SQL learners
• A single-file build in index.html
• Vanilla HTML, CSS, and JavaScript only
• sql.js for running SQLite fully in the browser
• Business-relevant SQL challenges over an e-commerce dataset
• A clean professional UI with a dark editor and light results panel

In practice, Codex read agents.md, translated that brief into the app structure, and then implemented the project in index.html. That kept the build aligned with the requested architecture, SQL-learning use case, and UI style instead of inventing a different scope.

Short summary:

• agents.md described what the app should be
• Codex used that file as the implementation brief
• The final project was built to match that spec as closely as possible

Project Overview

Browser-based SQL practice app for aspiring data analysts and data science learners. The app runs SQLite entirely in the browser with sql.js, ships as a single index.html file, and uses a realistic e-commerce dataset for business-style SQL challenges.

This project was built as a lightweight SQL training environment with:

• Vanilla HTML, CSS, and JavaScript
• sql.js from CDN for in-browser SQLite
• No backend
• No frameworks
• A single-page UI inside index.html

The app includes:

• Sample e-commerce tables: customers, products, orders
• Realistic seed data
• 6 SQL challenges across Beginner, Intermediate, and Advanced
• Difficulty-based navigation
• SQL execution and results rendering
• Result validation against expected answers
• A gated Show Answer button after the user attempts a challenge

How It Works

When the page loads, the app initializes SQLite in memory with sql.js, creates the sample schema, and inserts the dataset directly from JavaScript arrays embedded in index.html.

Each challenge contains:

• A title
• A business question
• A hint
• A starter SQL scaffold
• An expected SQL query used to compute the expected result

When the user runs a query, the app:

1. Executes the SQL against the in-memory database.
2. Renders the result as a table.
3. Runs the expected SQL for that challenge.
4. Compares the two result sets.
5. Shows ✅ for a correct match or ❌ otherwise.

Running the App

No install step is required.

1. Open index.html in a browser.
2. Wait for sql.js to load from CDN.
3. Pick a difficulty.
4. Write SQL and run the challenge.

Files

• index.html: the full application, styling, data, and challenge logic
• agents.md: the project brief used to guide implementation
• sql-practice-app-screenshot.png: screenshot used in this README

Why This Setup

This structure keeps the project easy to understand and easy to share:

• No local server required
• No package manager required
• No build step required
• Easy to host as a static page
• Easy to inspect for learning purposes

Future Improvements

• Add more challenge packs
• Track progress in localStorage
• Add schema explorer and sample row previews
• Add query formatting and keyboard shortcuts
• Add tests for result comparison logic