Website Building

Build a Book-Spine Bookshelf Website

Build a book-spine bookshelf website for creators to organize courses, prompts and links, then customize and sell the template as a digital service.

About 30 minutes8 steps3 promptsBeginner

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.

NetlifyDeploys the static build and hosts the domain.

Google SheetsThe sheet the app reads from and writes to.

GoDaddy

Gumroad

Topmate

Instamojo

03 · Guide

Step-by-step guide.

3 of 8 open

SetupBefore you start

Install Claude Code, Node.js LTS and Python (on Windows, tick 'Add python.exe to PATH'). You also need a Google account and a free Netlify or Vercel account.

SetupCreate the Google Sheet

At sheets.new, name the first tab Books and add eight headers: Order, Book name, Subheading, Description, Button text, Button link, Colour code, Category. Fill one row per book, or copy the sample sheet.

SetupAdd the colour scheme

Add a Colours tab with Colour code, Colour name, Cover colour and Text colour, and the 12 codes C01–C12. Put a code in each book's Colour code cell.

SetupShare the sheet

Share → General access → Anyone with the link, as Viewer, then copy the link. Keep anything private out of the sheet.

PromptPaste the prompt

Open Claude Code in a bookshelf-template folder, put your sheet link on the first line of the master prompt and paste it. It checks the sheet, asks for a name and subtitle, then builds.

TestCheck the live updates

Open http://localhost:4322, then change a subheading or add a row in the sheet. The shelf should update within 15–60 seconds without a refresh.

HandoverGo live

Drag the folder into Netlify Drop, or run npx vercel --prod. You can connect a GoDaddy domain by pointing its A and CNAME records at your host.

HandoverSell it

Use your live shelf and a 15-second screen recording as the demo. DM education creators, tutors and coaches, ideally with a preview built from their own course names.

04 · Prompts

The prompts that built it.

prompt-1.txt

My Google Sheet: PASTE_YOUR_SHEET_LINK_HERE

Build me a bookshelf website whose books stand side by side on one shelf, spine out, and whose content comes entirely from the Google Sheet above. When I edit the sheet, the live website must update by itself, without redeploying. Never hard-code any book content in the code.
Work only inside the current folder and save every file here.

PART 1 — CHECK THE SHEET FIRST
1. Extract the sheet ID from my link. Fetch both tabs as CSV from:
   https://docs.g
…

05 · Monetize it