Introduction
What this tutorial is and how it is structured
Concepts
- A large language model (LLM) is a statistical model trained on
large amounts of text that predicts plausible continuations of a prompt
- LLMs are good at generating boilerplate, scaffolding, and explaining unfamiliar error messages
- they also hallucinate: producing confident-sounding output that is wrong or that cites things that do not exist
- A web application is a program that communicates over HTTP and uses a browser as its user interface
- This tutorial builds one complete application incrementally, adding one feature per lesson
- Each lesson follows the same structure: concepts, a prompt, the generated code, and a critical review of what the LLM produced
Using LLMs as coding assistants
- What LLMs are good at: boilerplate, scaffolding, explaining error messages
- What they are not good at: hallucinating, subtle bugs, security
- How to read generated code rather than blindly trust it
How this tutorial works
- Each section introduces one idea, shows a prompt, and shows the code an LLM produces
- Then reviews it critically for correctness, security, readability, and what was left out
The technology stack
- Quick overview of selected tools:
- uv: package and environment management
- Alpine.js: browser interaction
- HTMX: browser-server communication
- Litestar: server
- htpy: generating HTML
- SQLite: database
- pytest: Python testing
- Playwright: browser testing (from Python)
- ruff: linting Python
- ESLint: linting JavaScript
- Markuplint: linting HTML
- taskipy: task runner
- snailz: synthetic data generation
- Why these tools rather than Flask, Django, React, SQLAlchemy, or Make
The snail survey problem
- What users need: upload CSV files of field measurements, browse records, run basic analyses, and share interactive charts
- Why a web app and not a script
- A guided tour of the finished application:
- upload page
- data table with search and pagination
- summary statistics
- interactive charts
Check for Understanding
What does it mean to say an LLM "hallucinated" something?
An LLM produces text by predicting what tokens are likely to follow the prompt. Nothing in that process checks whether the output is factually correct. When the model produces a plausible-sounding but incorrect claim—a function signature that does not exist, a citation that was never written, a package version that never shipped—it has hallucinated. The output looks confident because the model has no internal sense of uncertainty about facts.
What is the difference between a client and a server in a web application?
The client is the program that makes requests—almost always a browser—and displays the response to the user. The server is the program that receives requests and sends back responses. In this tutorial the browser is always the client and the Litestar application running on your machine is always the server. The two communicate using HTTP: the client sends a request, the server sends a response.
Why does the tutorial review LLM-generated code critically instead of just accepting it?
LLMs produce code that is statistically plausible based on their training data, not code that is necessarily correct for your specific situation. They miss security requirements (CSRF tokens, input validation), introduce subtle bugs (integer division, off-by-one errors in pagination), and omit accessibility attributes. Reading generated code carefully—rather than running it and hoping for the best—is the skill this tutorial is designed to build.
Exercises
Audit a prompt response
Pick any tool from the technology stack and ask an LLM to show you a minimal working example using it. Read the code and identify at least one thing it got right and one thing it either got wrong or left out. Write a one-paragraph evaluation.
Explore the stack
Visit the documentation for two of the tools listed in the technology stack that you have not used before. For each one, write two sentences: what the tool does, and what problem it solves that something you already know does not.
Define your own problem
Describe in three to five sentences a web application you would build for your own research or coursework. Identify which parts of the snail survey application map onto your problem and which parts would need to be different.