Gatestub: tickets, QR check-in and sales for a small music venue

Gatestub: tickets, QR check-in and sales for a small music venue

00 Markdown

Shows with posters and ticket types, card checkout, one QR code per ticket by email, sales per show, and a phone door check-in with a live count.

Agent specs

Agent
Claude Code, Opus 5.5 Medium
Time
22 min
Cost
$7.43*

Agents work faster and more accurately on Elements.

* Cost at API rates, September 2026.

Run it yourself

Paste this prompt into your AI agent. You get the finished app on your own machine, ready to change however you like.

Agent Chat
Install elements:
curl -fsSL 'https://install.elements.dev?os=darwin' | sh && export PATH=~/elements/bin:$PATH

Create an Elements app from the elementscode/demo-gatestub scaffold:
cd ~/elements/projects
elements create gatestub -scaffold=elementscode/demo-gatestub
cd gatestub

Start the app.

Need an AI agent?

In AI desktop apps, paste into the Code tab, not the general chat.

How it's built

Gatestub needed guest card checkout, QR code tickets by email, a phone door page, and live ticket and check-in counts. Each of those is a part of Elements, so the agent spent its 22 minutes on the venue's night itself.

What Elements gave the app

  • Live ticket counts. Ticket types are a LiveTable. Database triggers keep sold and checked-in counts current as tickets are issued and scanned and broadcast each change, so tickets remaining and checked in versus sold update on every open screen.
  • Card checkout with just an email. Checkout reads prices and stock under a row lock, holds the tickets and sends the fan to Stripe. Tickets are issued when the fan returns and again when Stripe's webhook arrives, once either way. Until a Stripe key is set, the pay button opens a test checkout inside the app that records the payment through the same function, so tickets and emails work from the start. With one secret key it goes to Stripe, and in production the app registers its own webhook on the first checkout.
  • Ticket emails from a job. Issuing tickets schedules a job in the same transaction, and it emails one QR code per ticket, inline and as an attachment.
  • Door check-in. Door staff scan a QR code with the phone's camera or search by name, and an @rpc function admits each ticket once and answers valid, already checked in or not found.
  • Sessions and roles. Admin and door accounts sign in to their own pages, and admins create shows and see sales per show.
  • Data from SQL files. Migrations define the schema and seed four upcoming shows with drawn posters and sales, plus tonight's show with 141 of 230 checked in. The project server applied each one as soon as it was saved.

What the project server gave the agent

The project server runs alongside the agent and answers as soon as a file is saved: it type-checks the templates, TypeScript and SQL, applies migrations and reruns the tests, so every question came back right away and the agent kept building.

What shipped

The app type-checks with zero errors and all 32 tests pass. Every page works on desktop and phone. A real sandbox payment goes through Stripe end to end and issues tickets with their QR codes, and live updates arrive across phones, such as the door count moving on a second phone the moment a ticket is scanned.

The code

Build it from scratch

To watch your agent build this app from an empty project, use the prompt we used instead. It takes longer than starting from the finished app above.

Agent Chat
Install elements:
curl -fsSL 'https://install.elements.dev?os=darwin' | sh && export PATH=~/elements/bin:$PATH

Create an Elements app:
cd ~/elements/projects
elements create gatestub
cd gatestub

Start the app, then build this:

Build an event ticketing app named gatestub for a small music venue.

FAN
- Upcoming shows with poster image, date, doors time and ticket types
  (general admission, balcony) with prices and quantities.
- Buy tickets with email and card, no account.
- Get an email with one QR code per ticket.

VENUE (accounts: admin and door staff)
- Admins create shows and ticket types, and see sales per show.
- Door check-in page for phones: scan a ticket's QR code with the camera, or
  search by name. Shows valid, already checked in, or not found, loud and
  clear.
- Live count of checked in versus sold.

Payments by Stripe.

Seed one admin, one door account, four upcoming shows with poster images and
ticket sales, one show tonight partly checked in. Show the logins on the
sign-in page.

Tickets remaining and check-in counts update in real time.

The weekly digest

New lessons, demos and posts from elements.dev, in one email a week.

Comments· 0