App Building

Build a Digital Booklet Gift Maker

Build a personalized digital booklet gift maker with Claude Code and monetize it by selling custom digital gifting experiences to customers.

About 45 minutes10 steps6 promptsIntermediate

Tools Step-by-step guide Prompts Monetize it Built with

01 · Tools

AI tools you’ll use.

Claude CodeWrites the code and runs the terminal for you.

VercelDeploys the Next.js app and makes it public.

SupabaseThe database, auth and file storage the app talks to.

RazorpayCollects the payment from the buyer.

Google Cloud Console

GoDaddy

Gumroad

Topmate

YouTube

03 · Guide

Step-by-step guide.

3 of 10 open

SetupInstall Claude Code and Node.js

Install Claude Code (curl on Mac, irm in PowerShell on Windows) and Node.js LTS from nodejs.org. Create the Vercel, Supabase and Razorpay accounts later, at the step that needs each one.

PromptPaste the master prompt

Make a booklet-gift folder, run claude inside it and paste the master prompt whole. It builds the editor, the page-turn book and the single-file export in plain HTML, CSS and JavaScript.

TestCheck it on localhost

Drop in photos, build a page, shut the book with 'Show it closed' and click it open. Then press Download gift and open the file.

HandoverSend it as a gift

If you only want gifts, you are done. Send the .html file on WhatsApp as a document, by email or on AirDrop. It is 200KB–5MB and works offline.

SetupDecide what you're selling

Done-for-you booklets, the template folder, or a SaaS where buyers make their own. Start with done-for-you; it needs no extra code.

PromptTurn it into a product site

In a new folder, run the second prompt. It wraps the editor in a Next.js 15 app with Supabase Google sign-in, Razorpay payments and a server-side download gate.

SetupAdd Google sign-in

Copy the Supabase URL and keys, create a Google OAuth client and set its redirect URI to your Supabase /auth/v1/callback, not your own site. Then switch on the Google provider and add your site URLs in Supabase.

SetupTake payments

Simplest: a ₹299 Razorpay Payment Link sent in DMs. For the SaaS, use test keys and create orders in paise. Verify the signature on the server and add a payment.captured webhook.

TestGate the download

Anyone can build and preview a booklet free. The server allows Download gift only if it can see a paid purchase for that user, so a client-side check can't be bypassed.

HandoverGo live on Vercel

Run npx vercel --prod and add every environment variable to Production, Preview and Development. Add the live domain to Supabase and to the Razorpay webhook, and point GoDaddy DNS at Vercel if you use a custom domain.

04 · Prompts

The prompts that built it.

prompt-1.txt

Build me a "booklet gift maker": a web page with an editor on the left and a live book on
the right, where I compose a small photo booklet and export it as ONE self-contained .html
file I can send to someone as a gift.

Work only inside the current folder. Plain HTML, CSS and JavaScript — no framework, no build
step, no backend, no npm install. Serve it over a local static server, never file://.

PART 1 — THE BOOK AND THE PAGE TURN
- A spread is one element with the aspect ratio 1280x720, drawn
…

05 · Monetize it

How you can monetize it.

Done-for-you bookletBuild it from the buyer's photos (5–7 spreads) and deliver the file after a Razorpay payment link: ₹799. Start here.

Occasion packageBooklet plus a 15-second screen recording for their story: ₹1,499.

Wedding or farewell booklet12–15 spreads in their colours with two rounds of changes: ₹2,500–₹5,000. Wedding photographers and planners can resell it under their own studio name.

Sell the templateThe editor folder as a zip on Gumroad or Topmate: ₹299–₹599.

Self-serve on your siteBuyers make their own and pay to download: ₹199–₹299 each, or ₹499 a month for unlimited during a wedding season.

06 · Built with