A few weeks ago I wrote a newsletter about Claude Code and asked you if we should build something together.
82% of you said 'Yes', so today we are building a SQL practice app.
We are going to build it entirely in your browser from scratch, and Claude Code will write all the code for us.
What are we building?
A browser-based SQL practice app. Think a lightweight version of LeetCode, but you built it yourself, it runs offline, it uses a dataset you control (or examples you came up with), and you can keep improving and developing it over time.
It has a challenge panel on the left, a SQL editor on the right, and a Run button that executes your query in the browser. Type your answer, hit Run, and it tells you ✅ or ❌.
The best part is that it requires no backend, no cloud setup, and no monthly subscription — it's a single HTML file that runs entirely in your browser.
What is Claude Code?
Claude Code is Anthropic's AI coding agent that lives in your terminal. It is not a chatbot. You give it a goal in plain English, it reads your files, writes code, and asks your permission before making changes.
The biggest difference between Claude Code and tools like ChatGPT, Grok, or Deepseek is how they interact with your files. With those tools, you have to manually upload a file every time you want it to do something with your code. Claude Code has direct access to your project folder — it can create files, modify them, run commands, and iterate, all with your permission at each step.
What you need before starting
VS Code. It is free, and you can download it here https://code.visualstudio.com/
Claude Code Subscription (comes with a Claude Pro, Max or Teams subscription)
The Claude Code extension in VS code.
Go to the Extensions tab on the left sidebar — it looks like four squares. Search for 'Claude Code for VS Code', find the one with over 5 million downloads, and hit Install
Before we proceed, a little bit of advertising. Your clicks on the ads help me to cover the newsletter hosting fee. This month you helped me to cover 76% - thank you.
I’ve been a reader of Superhuman newsletter for over a year, even referenced them in some of my newsletters. It is a daily newsletter that helps you keep up with AI trends.
The Gold Standard for AI News
AI will eliminate 300 million jobs in the next 5 years.
Yours doesn't have to be one of them.
Here's how to future-proof your career:
Join the Superhuman AI newsletter - read by 1M+ professionals
Learn AI skills in 3 mins a day
Become the AI expert on your team
Let’s build SQL practice platform
Step 1 — Create your project folder
Open VS Code. On the left sidebar, click the Explorer icon, select Open Folder, create a new folder called SQL_practice and select it.
VS Code will reload with your new empty folder open. This is your project home.
Step 2 — Launch Claude Code
Now you can see your folder on the left.
Look for the red fluffy icon (Claude) in the top right corner and click it.
You will see the Claude Code welcome screen. You are now in an active session — Claude is ready to work.
Step 3 — Create your CLAUDE.md file
This is the most important setup step.
CLAUDE.md is a plain text file that Claude reads at the start of every session. Think of it as the brief you hand to a new colleague before they start work. It is Claude’s long-term memory. Instead of re-explaining your project every time, you write it once here.
Type:
/init
This creates a starter CLAUDE.md in your folder.
You will see messages like below popping up, and you need to press 1 or Yes in order to allow Claude make changes.
Once it is finished, you will see a message like this:
Now insert the following text to create Claude.md file:
# SQL Practice App
## What this project is
A browser-based SQL practice app for data analysts and data science learners.
Built with vanilla HTML, CSS, and JavaScript. Uses sql.js (SQLite in the browser).
No backend. No frameworks. Single HTML file.
## Stack
- sql.js: runs SQLite entirely in the browser
- Vanilla JS only — no React, no Node
- All challenges stored as a JS array inside the HTML file
## App features
- Loads a sample e-commerce dataset (customers, orders, products tables)
- Shows a challenge prompt with difficulty level (Beginner / Intermediate / Advanced)
- User writes SQL in a code editor panel
- Run button executes the SQL against the in-memory database
- Output table shows results
- App compares result to expected answer and shows ✅ or ❌
- Navigation buttons: Previous / Next challenge
## Audience
Aspiring data analysts learning SQL. Familiar with SELECT, GROUP BY, JOINs.
Challenges should be business-relevant — think e-commerce KPIs, not abstract puzzles.
## Style
Clean, professional UI. Dark code editor panel. Light results panel.
No rainbow colours. Think Stratascratch meets a clean SaaS dashboard.Save the file. Nothing else goes in there.
Don’t worry if you think we missed anything. We can keep iterating and making the changes to the CLAUDE.md file.
Allow Claude to write to CLAUDE.md (hit Yes).
Step 4 — Give Claude its first prompt
In the Claude Code chat panel, paste this prompt:
Build a single-page SQL practice app as one HTML file called index.html.
Use sql.js loaded from CDN to run SQLite in the browser.
Create a sample e-commerce database with three tables:
- customers (customer_id, name, country, signup_date)
- products (product_id, name, category, price)
- orders (order_id, customer_id, product_id, quantity, order_date)
Populate each table with at least 20 rows of realistic sample data.
Include 6 SQL challenges across three difficulty levels:
- 2 Beginner (basic SELECT, WHERE, ORDER BY)
- 2 Intermediate (GROUP BY, aggregate functions)
- 2 Advanced (JOINs, subqueries)
Each challenge should have a title, a business question in plain English, a hint, and an expected result to compare against the user's query.
UI: left panel with challenge info, right panel with dark SQL editor and Run button, results table below, ✅/❌ feedback, Previous/Next navigation. Clean professional styling, no frameworks.Hit Enter. Claude will read your CLAUDE.md, plan the build, and then ask your permission before creating index.html.
Now you can see index.html file created in your folder (left hand side)
Step 5 — Test the app
Once Claude is finished you will see index.html appear in your folder on the left. In my case it took less than 10 minutes — it depends on your subscription plan.
To open the app, simply type this in the Claude Code chat panel:
open index.htmlClaude will open it in your default browser. You should see your SQL practice app running — try typing a query and hitting Run to make sure everything is working.
Step 6 — Iterate with follow-up prompts
This is where Claude Code gets interesting. You don't start over — you just describe what you want changed.
Still in the same Claude Code session, try:
Add a "Show Answer" button that reveals the expected SQL after the user has attempted the challenge.
Now we have ‘Show answer’ option.
Once that is done, you can keep going with more tweaks:
The results table is hard to read. Add alternating row colours and a border. Or:
Difficulty badges should be colour-coded — green for Beginner, orange for Intermediate, red for Advanced. Each time, Claude will show you what it wants to change and ask permission. You review, approve, and the file updates instantly.
Step 7 — Clear and move on
Once you are happy with the app, type:
/clearThis resets the session context without deleting your files. Claude Code works best with a fresh context when you switch to a new task — it stops old conversation history from confusing the next build.
Next steps:
add more challenges to practice CTE, window functions, case when etc
connect it to a real dataset
add a timer
add it to your portfolio and GitHub
Keep pushing 💪,
Karina
Need more help?
Just starting with Python? Wondering if programming is for you?
Master key data analysis tasks like cleaning, filtering, pivot and grouping data using Pandas, and learn how to present your insights visually with Matplotlib with ‘Data Analysis with Python’ masterclass.
Building your portfolio?
Grab the Complete EDA Portfolio Project — a full e-commerce analysis (ShopTrend 2024) with Python notebook, realistic dataset, portfolio template, and step-by-step workflow. See exactly how to structure professional portfolio projects.
Grab your Pandas CheatSheet here. Everything you need to know about Pandas - from file operations to visualisations in one place.
Data Analyst & Data Scientist
