Build a booking app with AI, step by step
A booking app is a brilliant first "real" app: it needs a database, emails and an admin view, but it's small enough to finish. This is a step-by-step overview of how a beginner can build one with AI tools. It covers the stack, the order to build things in, and the details that catch people out.
What you're building
A simple, useful booking app has five parts:
- A public page showing available time slots.
- A booking form that saves the booking to a database.
- A confirmation email to the customer, and a notification to you.
- A private admin page, behind a login, where you see and cancel bookings.
- Optionally, a deposit taken by card when someone books.
Do you need to build one at all? If you only want bookings for your own business, an off-the-shelf tool may be cheaper in time. Building your own makes sense when you want something tailored, want to learn, or want no monthly fee. It's also excellent practice for bigger apps.
A beginner-friendly stack
- Hosting and back end: Cloudflare Pages or Workers. Generous free tier, and your front end and server code live in one place.
- Database: Cloudflare D1, a simple SQL database with a free allowance, or Supabase if you prefer.
- Admin login: Clerk. Don't let the AI invent its own login system. Use a proven service.
- Email: Resend. Its free plan currently covers 3,000 emails a month, capped at 100 a day.
- Payments (optional): Stripe. No monthly fee; standard UK cards cost 1.5% + 20p per payment at the time of writing.
- Version control: GitHub, so every working version is saved.
- Builder: a coding agent such as Codex, Claude Code or Cursor, rather than copy-pasting from chat.
Step 1: write the rules before the code
Booking apps go wrong on rules, not code. Decide and write down:
- Opening days and hours, and slot length (e.g. 30 minutes).
- How far ahead people can book, and the minimum notice (e.g. not within 2 hours).
- What happens when two people try to book the same slot at once.
- Time zone. If you're in the UK, use Europe/London so slots stay correct when the clocks change between GMT and BST.
- Cancellation policy, and whether customers can cancel themselves.
- What details you collect, and why. Collect only what you need; UK GDPR applies.
Paste these rules into your project notes file and into your first prompt. See how to write prompts for building apps for the format.
Step 2: ask for a plan, not code
Prompt your coding agent: "Here's my booking app brief and rules. Propose a plan: pages, database tables, server routes and the build order. Don't write code yet. Ask me questions about anything unclear." Expect something like a bookings table (date, time, name, email, service, status) and routes such as "list free slots", "create booking" and "cancel booking". Push back on anything you don't understand. Asking "why do we need this?" is a perfectly good prompt.
Step 3: build the public slots page
Build only the page that shows free slots, using fake data first. Check it on your phone. Is it obvious which slots are free? Can you tap them easily? Only then connect it to the real database.
Step 4: save bookings safely
Now the booking form. Ask for three things explicitly:
- Server-side checks: the server, not just the page, must confirm the slot is free and within opening hours. Anything in the browser can be tampered with.
- No double bookings: ask the AI to enforce "one booking per slot" in the database itself (a unique constraint), not just in the page.
- Friendly errors: if the slot was taken a moment ago, say so clearly and show the next free times.
Test it by opening the page in two browser windows and booking the same slot in both.
Step 5: confirmation emails
Connect Resend. You'll need to verify your domain, which means adding a few DNS records. The AI can walk you through it, and Resend's dashboard shows which records are still missing. Keep your Resend API key on the server as a secret or environment variable, never in front-end code. Send a plain, clear confirmation: what, when, where, and how to cancel.
Step 6: a private admin page
Add Clerk so only you can sign in to an admin page that lists bookings and lets you cancel them. The crucial bit: the server must check the user is signed in and is you on every admin request. Hiding a button isn't security. Ask the AI directly: "Show me where the server checks admin access for each admin route."
Step 7 (optional): take a deposit
Stripe Checkout is the simplest route: your server creates a checkout session, Stripe hosts the payment page, and a webhook tells your app when payment succeeded. Use Stripe's test mode and test cards until everything works. Only mark a booking as confirmed when the webhook says so, not when the customer returns to your site.
Step 8: test like a customer, then go live
- Book, cancel and rebook on your phone and on a laptop.
- Try a booking around the date the clocks change.
- Try nonsense input: empty fields, a past date, a 500-character name.
- Ask a second AI model to review the code for security problems, then fix what it finds.
- Add a short privacy policy and link it from the form.
How long will it take?
For a complete beginner, expect a few evenings to a couple of weekends, depending on whether you add payments. Most of the time goes on testing and on setup tasks such as DNS records and API keys, not on the AI writing code.
What it costs
On free tiers, potentially nothing but your domain while you're small. Add an AI subscription of roughly £8 to £30 a month if you outgrow the free AI allowances, plus Stripe's per-payment fee if you take deposits. The full breakdown is in how much it costs to build an app with AI in the UK.
New to all this? Start with what vibe coding is or a simpler first project: building a website with ChatGPT.