What is the Function of setup.html in the ExerciseDB Repository?

setup.html serves as the interactive developer-setup page for the ExerciseDB static front-end, enabling browser-based database schema generation, multi-language API client snippet creation, and LLM prompt building without requiring any server-side code.

The setup.html file in the hasaneyldrm/exercises-dataset repository functions as a comprehensive, client-side configuration utility for the ExerciseDB (Instagit) dataset. This self-contained HTML document provides developers with instant tools to initialize database schemas, generate API integration code for seven languages, and bootstrap backend implementations using AI prompt engineering. Because all logic runs in the browser through vanilla JavaScript, the page operates entirely offline after cloning the repository, making it a true zero-server "one-stop shop" for developer onboarding.

Database Setup and Schema Generation

At the core of setup.html is the Database Setup section (lines L19-L28), which provides interactive DDL generation for four database engines.

Multi-Engine CREATE TABLE Statements

The page embeds a DB_SQL JavaScript object (defined at lines L38-L63) that stores specific CREATE TABLE syntax for SQL Server, PostgreSQL, MySQL, and SQLite. When a developer selects a database engine via the UI tabs (lines L29-L34), the page instantly displays the appropriate schema definition without server requests.

To retrieve the PostgreSQL CREATE TABLE statement programmatically:

// The DB_SQL object holds each dialect's DDL.
const createPostgres = DB_SQL['postgresql'];
console.log(createPostgres);

Client-Side INSERT Generation

Beyond schema creation, setup.html generates complete INSERT scripts purely in the browser. The generateSQL() function (implemented at lines L86-L108) constructs all 1,324 INSERT statements in memory using source data from the repository's data/ folder, then triggers a download for the exercises.sql file.

// Clicking the "Generate INSERT SQL" button runs generateSQL()
document.getElementById('generate-sql-btn').addEventListener('click', async () => {
  const sql = await buildInsertSQL(); // builds 1,324 INSERT statements in memory
  downloadFile('exercises.sql', sql);
});

This functionality also includes guidance on where to place the static media assets located in the exercises/ folder (containing images/ and videos/ subdirectories).

API Integration and Code Snippets

The API Integration section functions as a multi-language client generator. Using the API_TEMPLATES object (defined at lines L132-L229), the page produces ready-to-use code snippets based on a developer-provided base URL.

Seven-Language Template Support

Located at lines L99-L112, the base URL input field captures the backend endpoint, which then populates language-specific tabs (lines L115-L124) for cURL, JavaScript, Python, C#, Java, PHP, and Go. Each template adapts dynamically to the provided endpoint.

To generate a cURL command for fetching a single exercise:

const base = 'https://api.myapp.com';
const curlSnippet = API_TEMPLATES.curl.getOne(base);
console.log(curlSnippet);

LLM Prompt Generation

Perhaps the most distinctive feature of setup.html is the Ask Your LLM section, which constructs production-ready backend prompts through the buildLlmPrompt() function (lines L75-L84).

Framework and Database Selection

The prompt builder utilizes two metadata objects: FRAMEWORK_META (lines L139-L146) defining Express, FastAPI, ASP.NET, and other frameworks, and DB_META (lines L148-L152) containing database-specific configuration details. Selector buttons for frameworks (lines L142-L151) and databases (lines L155-L162) feed into the prompt assembler.

Generating a prompt for a FastAPI and PostgreSQL stack:

const prompt = buildLlmPrompt('fastapi', 'postgresql');
console.log(prompt);

The generated prompt includes complete instructions for creating a production-ready API using the ExerciseDB schema. The UI wires this to a copy-to-clipboard action (lines L178-L185) using the Clipboard API:

navigator.clipboard.writeText(prompt).then(() => {
  console.log('Prompt copied!');
});

Static Architecture and Navigation

Unlike traditional setup wizards that require server-side processing, setup.html operates as a purely static document. All DOM manipulation, event handling for tab switching, and clipboard interactions run through vanilla JavaScript beginning at line L86 and continuing through the end of the file.

The page provides a sticky header with repository branding (lines L70-L80) and a left-hand navigation pane (lines L86-L107) that anchors to each of the three learning sections: Database Setup, API Integration, and Ask Your LLM. This navigation links back to index.html via the "Back to Browse" button, creating a seamless flow between the dataset browser and the setup utility.

Summary

• setup.html is a client-side interactive setup page located in the root of the hasaneyldrm/exercises-dataset repository.
• It generates database schemas via the DB_SQL object and produces downloadable INSERT scripts through generateSQL().
• The API_TEMPLATES object provides dynamic code snippets for seven programming languages based on user-supplied base URLs.
• The buildLlmPrompt() function creates detailed backend implementation prompts using FRAMEWORK_META and DB_META metadata.
• All functionality operates offline using vanilla JavaScript, requiring no server infrastructure after the initial git clone.

Frequently Asked Questions

Is setup.html a server-side script or a static file?

setup.html is a completely static HTML file. All functionality—including SQL generation, API snippet creation, and LLM prompt building—runs client-side through vanilla JavaScript embedded in the page. This design ensures the repository remains self-contained and functional immediately after cloning, without requiring Node.js, Python, or any other runtime environment.

Which database engines does setup.html support?

The page supports four major database engines: SQL Server, PostgreSQL, MySQL, and SQLite. The DB_SQL object (lines L38-L63) contains specific CREATE TABLE syntax for each dialect, and the UI provides tabs for switching between them (lines L29-L34).

Can I use setup.html without an internet connection?

Yes, setup.html works entirely offline. After cloning the hasaneyldrm/exercises-dataset repository, you can open setup.html directly in a browser. All JavaScript logic, CSS styling, and data references are contained within the file or the local repository structure (specifically the data/ and exercises/ folders).

How does the LLM prompt generator create backend code instructions?

The prompt generator uses the buildLlmPrompt() function (lines L75-L84) to assemble context-aware instructions. It combines the selected framework metadata from FRAMEWORK_META (lines L139-L146), database connection details from DB_META (lines L148-L152), and the SQL schema to produce a complete prompt that instructs an LLM to generate a production-ready API implementation with proper error handling and endpoint definitions.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}