Build a Carousel Bookshelf Website That Updates From Google Sheets, and Publish It on Netlify or Vercel (Student Guide)

What you're building

The finished project is a full-screen website called a carousel bookshelf. A wooden shelf holds a row of hardcover books drawn in 3D. The selected book sits in the centre, larger and pulled forward, while its neighbours angle away at the edges, and the whole room changes colour to match its cover. Visitors scroll through the books, open one, flip its pages, and click a button that takes them to a link you chose.

What makes this version special is where the content lives. None of the book names, descriptions or links are written in the code. They sit in a Google Sheet that you own. The website reads the sheet when it loads and checks it again every 15 seconds. Add a row and a new book appears. Change a link and the button changes.

The example is The AI Toolshelf, a shelf of 8 popular AI tools, each linking to the tool's website. You can replace them with your own books, courses, products or links in a few minutes.

Before you start: set up your computer

This guide assumes you already have Claude Code, Node.js and Python installed. Claude Code writes the website, Python runs it on your computer so you can preview it, and Node.js is needed if you deploy with Vercel's command-line tool. If you've already set these up, skip to step 3.

To check everything worked, run these three commands. Each should print a version number. On Windows, use python instead of python3.

Create your project folder on the Desktop

Keep the whole project in one folder on your Desktop. The website files, the spreadsheet Claude Code creates, and everything you deploy will all live there, so it's easy to find and easy to upload later.

1. Create the folderRight-click your Desktop and create a new folder called ai-toolshelf. Use lowercase letters and hyphens, with no spaces.
2. Open it in Claude CodeIn the Claude desktop app's Code tab, choose this folder as the project folder. Or open it from a terminal, as shown below.
3. Check you're in the right placeAsk Claude Code "Which folder are you working in?" It should name your ai-toolshelf folder. Every file it creates, including shelf-sheet.xlsx, will be saved there.

The Google Sheet: your website's content manager

A Google Sheet works as a free, no-login content manager for a website. Instead of editing code, you edit rows in a spreadsheet, and the website reads those rows live. Your sheet has two tabs: Books, with one row per book, and Colours, the palette the books can use.

How the sheet is created

Claude Code can't sign in to your Google account, so it doesn't create the sheet inside Google. It creates a spreadsheet file called shelf-sheet.xlsx in your ai-toolshelf folder, with both tabs already filled in. You bring it into Google Sheets yourself:

1. Open a blank sheetGo to sheets.new while signed in to your personal Google account.
2. Import the fileChoose File → Import → Upload, select shelf-sheet.xlsx from Desktop/ai-toolshelf, and choose Replace spreadsheet. Both tabs come in, with colours.
3. Name itClick the title at the top left and rename it, for example "Bookshelf AI project".
4. Share it as view-onlyClick Share, set General access to Anyone with the link, and keep the role as Viewer. The website can only read a sheet shared this way.
5. Give the link to Claude CodeClick Copy link and paste it into Claude Code. It saves the link in config.js and checks that both tabs load.

Why a Google Sheet is so useful here

• No redeploying for content. The code online stays the same. Only the sheet changes, and the site reads it live.
• No database or server. Google stores the data for free, so there's nothing to set up, secure or pay for.
• Easy to hand over. Build a shelf for someone else and give them edit access to their sheet. They update it from their phone.
• Hard to break. A dropdown in the Colour code column prevents typos, and a row without a Book name is simply skipped.

The colour scheme

The Colours tab is a fixed palette of 12 named colours, each with a short code. Instead of typing a hex code into every book row, you type a code like C03, and the website looks up the colours for it.

Each colour has two parts. The Cover colour is the book's cloth. The Text colour is the foil stamping: the title and the pattern on the cover. From those two values, the website works out everything else, including the wall, floor, lighting and on-screen text, so the whole room changes mood for each book.

Change one hex value in the Colours tab, and every book using that code changes on the live site.

• The shelf always looks designed. Every pair has been chosen so the title stays readable on its cover.
• One edit updates many books. Great for rebranding a whole shelf in seconds.
• Colour can carry meaning. Give each category its own code, such as C05 for writing tools and C08 for image tools.

The prompt

With Claude Code open in your ai-toolshelf folder, paste this whole prompt. Claude Code asks you three short questions, then builds the website and the spreadsheet in that folder.

Build me a 3D bookshelf website whose content comes from a Google Sheet that I own. When I edit the sheet, the live website must update by itself, without redeploying.
Work only inside the current folder. Save every file you create here.

PART 1 — ASK ME ONLY THREE THINGS, THEN START
1. The name of the shelf (e.g. "The AI Toolshelf")
2. A one-line subtitle (e.g. "A shelf of AI tools worth knowing")
3. A topic for 8 sample books (e.g. "popular AI tools")
Do not ask me anything about individual books. Their content will live in the sheet.
Also check whether I'm on macOS or Windows, and use the right commands for it (python3 on Mac, python on Windows).

PART 2 — CREATE THE SPREADSHEET FILE
Create shelf-sheet.xlsx in this folder with exactly two tabs.
(Use Python with openpyxl. If it isn't installed, install it into a local folder with pip --target. If that fails, create data/Books.csv and data/Colours.csv instead and tell me to import each one as a separate tab.)

Tab "Books", with these columns in this order:
Order | Book name | Subheading | Description | Button text | Button link | Colour code
Fill in 8 real, accurate sample rows on my topic, with real https links.
Add a dropdown on the Colour code column that lists the codes from the Colours tab.

Tab "Colours", with these columns:
Colour code | Colour name | Cover colour | Text colour
C01 Haze #ADC8D2 #27262C
C02 Charcoal #27262C #E1DF73
C03 Tangerine #E77040 #FBF0E4
C04 Citron #E1DF73 #27262C
C05 Cobalt #334FA2 #EEF2FB
C06 Vermilion #F66440 #FDEFEA
C07 Ochre #DA9650 #2B1D12
C08 Crimson #D5373E #F8D9C8
C09 Ultramarine #1B2C48 #C9774B
C10 Aubergine #3D2340 #D7AD5A
C11 Forest #2F4A3A #E9D8A6
C12 Powder blue #86B1C4 #F2F7F8
Fill each Cover colour and Text colour cell with its own colour. Make the header rows bold and freeze them.
Also save the same data as data/Books.csv and data/Colours.csv, so the site works locally before a sheet is connected.

PART 3 — READING THE SHEET
- Put all settings in config.js: sheet (the Google Sheet link), booksTab "Books", coloursTab "Colours", refreshSeconds 15, name, subtitle, edition.
- If sheet is empty, read data/Books.csv and data/Colours.csv. Otherwise read each tab as CSV from:
  https://docs.google.com/spreadsheets/d/SHEET_ID/gviz/tq?tqx=out:csv&sheet=TAB_NAME
  Extract SHEET_ID from a full link. Add a timestamp to the URL and use cache: "no-store".
- Write a proper CSV parser that handles quoted fields, commas and line breaks inside quotes.
- Match column headers loosely (ignore case, spaces and punctuation).
- Skip rows without a Book name. Sort by Order.
- Colour code may be a code from the Colours tab or a raw hex. If it is missing or unknown, use a palette colour and log a warning in the console.
- Add https:// to links that don't have it.
- If Google returns an HTML page instead of CSV, show: "The sheet is not public. Share it as Anyone with the link: Viewer."
- Check the sheet every refreshSeconds, and immediately when the browser tab becomes visible again. If the data changed, rebuild the shelf, keep the same book selected if it still exists, dispose of old 3D objects, and show a toast: "Shelf updated from the sheet · N books".
- Never rebuild while a book is open. Save the update and apply it when the book is closed.
- Top-right, show "Synced HH:MM:SS" with a small green dot, or "Sheet unreachable, retrying" if a check fails.

PART 4 — THE WEBSITE
Tech: index.html, styles.css, config.js and JavaScript modules in src/. Load Three.js 0.165 from jsDelivr with an import map. No build step, no backend, no image or audio files. Generate all covers, textures and sounds in code.
The room: a textured back wall, a floor and a long walnut shelf, with soft shadows, warm light and a few floating dust particles.
The books: real 3D hardcovers with boards, a spine showing the title and number, a cream page block and a ribbon bookmark. Cloth-texture covers with foil stamping: Cover colour is the cloth, Text colour is the foil. Each book gets an abstract geometric motif, the book name in serif (shrink to fit if long) and the subheading in small caps.
The carousel: the selected book is centred, larger and pulled forward; neighbours angle away and fade at the edges; the shelf loops. Browse with the mouse wheel, arrow keys, dragging or swiping, clicking a book, or clicking dash markers.
Theme: derive wall, floor, lighting and interface ink colours from each book's cover colour, and fade the room to them on select.
Layout: top-left, name and subtitle. Top-right, edition line, colour name, sync status, mute button and volume slider. Bottom-left, "02 / 08", big title and subheading. Bottom-centre, ( OPEN ). Bottom-right, dash markers and "WHEEL · ARROWS · SELECT".
Open view: the book flies left and the shelf sinks away. A right panel shows "VOLUME 02 · <colour name>", a huge serif title, the subheading in italic, the description, and a solid pill button with the Button text and ↗ that opens the Button link in a new tab (rel="noopener noreferrer"; hide it if there's no link). Below: page navigation, Open book, Reset view, and a × close button. Dragging the background orbits the camera.
Pages: clicking the book opens the cover. Two turnable leaves: a title page, an About page with the description, a Next step page with the button text and link domain, and a closing quote. Pages curl as they turn. Turn with buttons, arrow keys, clicks or dragging. Escape closes.
Sound: Web Audio ambient pad with gentle chimes and small interaction sounds, starting on the first click; mute and volume saved in localStorage.
Mobile under 820px: camera pulls back; the open view becomes a bottom sheet.
Also: loading screen, static fallback grid with titles and buttons if WebGL fails, prefers-reduced-motion support, aria labels and a live region.

PART 5 — RUN, CONNECT, CHECK AND DEPLOY
1. Start a local server on port 4322 (python3 -m http.server 4322 on Mac, python -m http.server 4322 on Windows) and give me the localhost link.
2. Tell me how to import shelf-sheet.xlsx into Google Sheets (File → Import → Upload → Replace spreadsheet), share it as Anyone with the link: Viewer, and paste the link back to you.
3. When I paste the link, put it in config.js and fetch both tabs yourself to confirm they return CSV, not a sign-in page.
4. Ask me to edit one cell and confirm the change appears on the page without a reload.
5. Give me step-by-step instructions for two deployment options: Netlify (drag-and-drop with a free account) and Vercel (the npx vercel command). Then explain how to connect a domain bought on GoDaddy to whichever one I choose.

What each part of the prompt tells Claude to do

The prompt has five parts, and each gives Claude Code a separate job. That's why one paste can produce a complete, working project instead of a rough draft.

What the prompt is teaching you

• Separate content from code. Anything that changes often belongs in data, not in instructions to rebuild.
• Define the data exactly. Naming tabs and columns in order means the code and the sheet always agree.
• Plan for failure. The prompt says what to do when a library is missing, the sheet is private, or a colour code is wrong.
• Ask for proof. Part 5 turns "it should work" into checks Claude actually runs.

Build and test it on localhost

Localhost means the website runs only on your own computer, at an address like http://localhost:4322. It's where you build and test before publishing. Nobody else can see it, and it stops when you close the terminal.

1. Answer the three questionsGive Claude Code your shelf name, subtitle and a topic, and let it build.
2. Open the previewClaude Code starts the local server and gives you http://localhost:4322. Open it in your browser. At first, it reads the sample data saved in the folder.
3. Connect your sheetImport shelf-sheet.xlsx into Google Sheets, share it as view-only, and paste the link into Claude Code, as in step 4.
4. Test a live editWith the page open, change a book's subheading in the sheet. Within 15 to 60 seconds, the change appears without refreshing.
5. Make it yoursReplace the sample rows with your own books and links. Five to nine books looks best.

Deploy on Netlify

Netlify hosts static websites for free, and this project is a static folder with no server code. You can publish it by dragging the folder into your browser. These steps work for any static project, not just this one: any folder with an index.html at the top.

1. Sign up and log inGo to app.netlify.com/signup and sign up with GitHub, GitLab, Bitbucket, Google or email. Logging in keeps your site online and lets you update it later.
2. Open Netlify DropGo to app.netlify.com/drop while logged in.
3. Drag in your folderDrag Desktop/ai-toolshelf, the folder containing index.html, onto the page. Don't use a zip or the parent folder. Netlify gives you a random address such as https://jolly-cupcake-12ab34.netlify.app.
4. Rename the addressOpen Site configuration → Change site name and choose something like ai-toolshelf, so the site becomes https://ai-toolshelf.netlify.app, if the name is free.
5. Test itOpen the address on your laptop and phone, then edit a cell in your sheet and watch the live site update.

Deploy on Vercel

Vercel also hosts static sites for free on its Hobby plan. The quickest way to upload a folder is Vercel's command-line tool, which runs through Node.js. Like Netlify, these steps work for any static project folder.

1. Create a Vercel accountSign up at vercel.com/signup with GitHub, GitLab, Bitbucket or email, and choose the free Hobby plan.
2. Open a terminal in your folderYou can ask Claude Code to run the next command for you, or run it yourself:
   cd ~/Desktop/ai-toolshelf
3. DeployRun the command below. The first time, it asks you to log in through your browser and answer a few setup questions. Accept the defaults, and when asked about a build command, leave it empty, because there's nothing to build.
   npx vercel --prod
4. Get your addressWhen it finishes, Vercel prints a live address like https://ai-toolshelf.vercel.app. Open it on your laptop and phone.
5. Update laterAfter any code change, run npx vercel --prod again from the same folder. Sheet edits still go live without this.

Connect a domain from GoDaddy

A custom domain turns ai-toolshelf.netlify.app into something like yourname.com. You buy the domain on GoDaddy, tell Netlify or Vercel about it, then point the domain's DNS records at your host. Both hosts add free HTTPS automatically.

Other hosting options

Because this project is plain HTML, CSS and JavaScript, it runs on any static host. Netlify and Vercel are the simplest, but these also work well and are free for a project this size.

Skills you'll learn from this AI project

You don't have to write the code yourself, but reading the files Claude Code creates is one of the fastest ways to learn how a real website fits together. This project touches front-end development, 3D graphics, data, deployment and AI-assisted building.

How to present this project on your resume

This project shows front-end skills, 3D graphics and a real data integration, which makes it stand out more than a typical to-do app. List it under Projects with your live Netlify or Vercel link, and use three pointers like these:

1. Built and deployed an interactive 3D bookshelf website using Three.js (WebGL), JavaScript, HTML and CSS, with procedurally generated textures, camera animation and a responsive mobile layout, hosted on Netlify with a custom domain.
2. Used Google Sheets as a live, no-backend content manager: the site fetches and parses sheet data as CSV, checks for changes every 15 seconds, and rebuilds the 3D scene without a page reload or redeployment.
3. Delivered the project with AI-assisted development in Claude Code, including data validation, error handling for private or malformed sheets, and accessibility support (ARIA labels, keyboard navigation, reduced motion).

In an interview, the most interesting thing to explain is how the site notices a change in the sheet and updates without interrupting a visitor who has a book open. Also link the project on LinkedIn with a short screen recording of the page turn.

How to make money from it

Once your own shelf is live, it doubles as a demo you can sell from. The Google Sheet is what makes it sellable: clients update their own shelf, so you don't become their unpaid content editor.

1. Build shelves for creators and teachers

Offer a done-for-you shelf. You run the prompt, fill in the client's sheet with their links, publish it, and hand them edit access to the sheet. Creators use it as a link in bio; teachers use it as a library of courses and notes. Illustrative prices to test:

2. Sell your own products through it

Point each book's button at a Gumroad, Razorpay, Stripe or Topmate checkout. A book that visitors open and flip through feels more considered than a plain button in a list.

3. Sell a ready-made kit

Package the prompt, a sample sheet, the colour palette and a short video walkthrough as a low-priced digital product for students and creators.

4. Use it to get hired

A live 3D site that updates from a spreadsheet is a memorable portfolio piece for front-end, creative developer and freelance web roles.