Private prompt kit

You made it.

This page is for people who commented on the booking site post. Enter the password from the reply/DM to unlock the walkthrough and copy-paste prompt.

Tip: change the password in this page whenever you reuse this lead magnet format.

Build your own booking site

Your branded booking page, without starting from scratch.

This is the exact kind of prompt I would give Claude Code if I wanted it to build a company-branded booking site with a small admin dashboard. You do not need to be “technical.” You just need to move one step at a time.

Copy the full prompt Show me the steps

You will need some quiet time for setup. Think of it as a weekend project, not a five-minute hack.

Start here

Do this in small, calm steps.

You are not “learning to code” all at once. You are setting up a few accounts, asking Claude Code to build the first version, and then improving it with follow-up prompts.

Time

Block 2–4 hours for the first pass. More if you want calendar, email, and deployment fully working on day one.

Tools

Use Claude Code for planning, copy, generation, and edits. Keep the work in one project folder so it can read the app and improve it step by step.

Mindset

If something breaks, paste the error back into Claude Code and ask it to fix it. That is part of the workflow, not a sign you failed.

Setup path

The friendly version of the technical stuff.

These are the accounts and clicks that make the prompt easier to use. Open each link in a new tab and move slowly.

Create a GitHub account

GitHub is where your project files live. Think of it like Google Drive for code, with version history.

Open GitHub signup

Create a new repository

After signing in, create a new repository. Name it something simple like booking-site, branded-booking, or your-company-booking. Choose Public if you are comfortable sharing it, or Private if you prefer to keep it hidden.

Create a repo

Open Claude Code

Use Claude Code in the folder for your new project. Paste the full prompt below. If Claude asks clarifying questions, answer with your company name, services, colors, timezone, and booking types.

Claude Code

Publish with Vercel when you’re ready

Vercel is one of the simplest ways to put a Next.js app online. Connect your GitHub repo, import the project, add environment variables, and deploy.

Open Vercel Import project

Add the grown-up features later

Start with the page and the booking flow. Then add Google Calendar, email confirmations, database-backed admin management, and a custom domain once the basics feel less scary.

Copy-paste prompt

Use this as your starting prompt.

Change the company name, offers, colors, timezone, and examples before you paste it. Keep the first version realistic. You can always ask Claude Code to add more later.

I want to build a clean, company-branded booking site for my business. Please create it as a Next.js app using TypeScript and Tailwind CSS.

Before you start, assume I am not a developer. Please make sensible choices, explain anything I need to do manually, and keep the first version simple enough that I can actually launch it.

Here is my business info:
Company name: [YOUR COMPANY NAME]
Website/domain: [YOUR DOMAIN IF YOU HAVE ONE]
Brand colors: [YOUR COLORS, OR SAY “HELP ME CHOOSE”]
Timezone: [YOUR TIMEZONE]
Admin email: [YOUR EMAIL]
Main services people can book: [LIST 2–4 SERVICES]

The goal is my own lightweight Calendly-style booking site, but branded for my company and flexible enough for multiple services. I want a public homepage that shows all available booking options as cards. Each booking option should have its own page at /[slug], where someone can choose a date, pick from available time slots, fill out a short form, and submit the booking.

Please make the design feel polished, simple, modern, and mobile-first. The homepage should have my brand name at the top, a short tagline, and a list of booking projects. Each project card should show the service name, company or brand, short description, duration, color/emoji, and a button to book.

Each individual booking page should have a branded header, a back link, the session duration, a video call label, the timezone label, a short description, a calendar picker, time slot picker, form step, loading states, validation, and a success screen.

Please support multiple booking projects. Each project should have:
- slug
- name
- company
- tagline
- description
- duration in minutes
- primary color
- optional emoji
- weekly available time slots
- custom form fields
- optional blocked dates
- optional Google Calendar ID
- booking window in weeks

Include 2–3 sample projects based on my business so I can see how it works right away.

For the first version, make the app work even before I connect paid or advanced services. If Google Calendar, email, or database settings are missing, show helpful setup messages instead of crashing.

Then add Google Calendar support. The app should generate possible slots from each project’s time slot rules, check Google Calendar free/busy for that day, and mark overlapping slots unavailable. When someone books, verify the slot is still available, create a Google Calendar event, add the guest as an attendee, store useful booking info in the event description, and send calendar updates.

Add email confirmations using Resend. The person booking should get a confirmation email, and I should get a notification email. Make the email copy warm, clear, and professional.

Add an admin dashboard at /admin. It should be password protected using environment variables. After login, the dashboard should have tabs for Bookings, Projects, and Setup.

The Bookings tab should let me load upcoming Google Calendar bookings, filter by project, expand a booking to see details, and cancel a booking, which deletes the Google Calendar event.

The Projects tab should let me manage booking projects from the browser using Supabase. I want to create new projects, edit existing ones, pause/activate projects, delete projects, and load the default seed projects. The editor should let me change basic info, slug for new projects, session duration, color theme, emoji, time slots by day and time, custom form fields including text/textarea/select, booking window, and optional calendar ID.

The Setup tab should walk me through connecting Google Calendar, Supabase, and Resend. Include the SQL needed to create the Supabase booking_projects table and a copy button. Also include a Google OAuth flow so I can connect my Google Calendar and get a refresh token from inside the app.

Please include API routes for:
- checking availability
- creating a booking
- admin bookings
- admin project create/read/update/delete
- seeding projects
- cancelling bookings
- Google OAuth start/callback

Please include environment variables for all secrets and configuration, including Google client ID/secret/refresh token/calendar ID, Resend API key, email from address, admin email/password, base URL, timezone, Supabase URL, and Supabase service role key.

Please include a README written for a smart non-developer. Explain what the app does, how to run it locally, how to create a GitHub repo, how to push the code to GitHub, how to deploy on Vercel, how to add environment variables, how to connect Google Calendar, how to configure Resend, how to configure Supabase, and how to add or edit booking projects.

Please keep the code straightforward and production-friendly. Use the Next.js App Router, server API routes, TypeScript types, Tailwind styling, date-fns/date-fns-tz for dates and timezone handling, googleapis for Calendar, Resend for email, and Supabase for project storage.

Important: build the simple working version first, then add integrations. If anything needs a paid plan or extra setup, clearly label it as optional. The finished app should feel like a real branded booking product, not a toy demo.

Want the shortcut?

If you want this for your team, your service business, or your internal workflows, book AI @ Work or an AI consulting call and I can help you map it, build it, or make it less overwhelming.

Book with Chiibitsu Labs