01 What students build
The chapter's point is the process: students vibe-code a real full-stack tool with an AI assistant. The result is a React 19 + TypeScript + Vite frontend talking to a FastAPI backend, which authenticates to Jira Cloud (REST v3), fetches a story by id, and prompts Claude Sonnet with a YAML template (default, regression, smoke, edge, or security) to produce a strict-JSON list of test cases with steps, test data, and expected results.
Jira In, JSON Out
Connection panel validates credentials, fetches any issue by id, and parses the user story. The LLM must answer in a strict test-case schema (TC ids, type, priority, steps).
5 YAML Templates
Coverage is data-driven: default, regression, smoke, edge, and security templates set categories, depth, tone, and rules like "5 to 7 cases, critical paths only".
Edit + Export
Every generated field is editable inline. One click copies TSV for Jira, Xray, or TestRail paste, or downloads .md / .csv. Latency is tracked per generation.
02 Architecture
03 Live demo (simulated with sample data)
This is a UI walkthrough with pre-baked sample data so you can feel the product without keys. In the course you run the real stack locally: FastAPI on :8000, React on :5173, your own Jira Cloud token and Anthropic API key.
04 Inputs & outputs
What goes in
- Jira Cloud URL, email, and API token (session-only, never persisted)
- An issue id whose user story to cover (VWO-48, VWO-105)
- One of five YAML templates steering coverage and depth
- Anthropic API key on the backend (.env)
What comes out
- 5+ test cases in a strict JSON schema (id, title, type, priority)
- Pre-conditions, numbered steps, test data, expected result per case
- Inline-editable table linked back to the Jira id
- One-click TSV copy plus .md and .csv downloads
- Generation latency shown per request