With 3 Prompts, Claude helped me build and deploy a simple web app; no coding required.
I got my web app deployed and running with just three prompts and responses from Claude. This post shows you exactly how I did it, with screenshots and GIFs for every step.
The Requirements
It all started with a seemingly straightforward set of requirements:
- I maintain a list of certificate records in a Google Spreadsheet;
- I need a simple web page where people can input a certificate number to verify its authenticity;
- The app must check if the user-provided certificate number is on my spreadsheet and return the certificate’s details if a matching record is found; and
- The app must display a “no match” message if no matching record is found on the spreadsheet.
Simply put: I needed a way to look up a row in an online spreadsheet without sharing the contents of the entire spreadsheet.
I thought to myself: how hard can this be?
I figured a no-code platform like Zapier or Airtable would let me set this up easily. And as it turns out, the no-code platforms do support this—provided you’re willing to pay a monthly recurring fee to enable the necessary features.
Alas, I wasn’t willing to spend that kind of money given that I had a single, simple requirement.
So I turned to Anthropic’s Claude to help me code up a solution using Google Apps Script. The whole thing was accomplished with just three prompts.
Step A. Create the Certificate Spreadsheet.
I started by creating a simple Google spreadsheet with these columns: certificate number, date issued, course code, course name, student first name, and student last name.
Step B. Tell Claude What I Need.
I opened a new chat session with Claude, attached a screenshot of my spreadsheet, and gave it the prompt below. You can copy this prompt from a handy Google Doc.
Note: The last line in the prompt above, where I tell Claude I prefer a script that is bound to the spreadsheet, helps eliminate spreadsheet access issues. Your own application or requirements may not allow this, so ask Claude for guidance.
Claude responds to my prompt by giving me a block of code to copy/paste into the Google Apps Script editor and a step-by-step guide for using and deploying the code as a web app. You can also find all the code generated by Claude in the same handy Google doc.
I dutifully followed each step and saved screenshots and GIFs so you can follow along.
Step C. Follow Claude’s Instructions.
1. Open the spreadsheet, click on Extensions > App Script, Paste the code.
As instructed, I opened my Google spreadsheet, then used the Extensions menu to launch the App Script Editor. This action opens the Script Editor to an empty Script project that’s bound to my Certificates spreadsheet.
Per Claude’s instructions, I delete the existing code placeholder, paste Claude’s code into the editor, and then click the Save button to save my changes.
Unfortunately, the script editor raises an error, and my attempt to save the script fails.
2. Resolve the script error
I copy the error message into Claude, and Claude gives me an updated block of code to use.
As instructed, I delete the old version of the code and paste the new version into the editor. This time, I’m able to save the script without errors. The handy Google doc has the code that Claude generated in this response.
Note: See how the little orange dot next to “code.gs” on the left sidebar disappears after the script is successfully saved? The script editor uses the orange dot to indicate that the code still has unsaved changes, so check if the dot is still there after saving.
3. Name the project
It’s time to give this project a helpful name.
I move my cursor over the current project name (“Untitled Project”), click on it, and name it “Certificate Validator.”
4. Deploy the Web App
Next, I followed the steps to deploy the Web App. I click “Deploy > New Deployment” and select “Web app” as the type.
In the configuration pane that appears, I give the web app a meaningful description.
I leave the “Execute as” field set to “Me” because I’m the one who has access to the underlying spreadsheet.
Per Claude’s instructions, I change the “Who has access” setting to “Anyone” so everyone can use the app.
I hit the Deploy button and am prompted to give my new app access to my Google Spreadsheet. I click the Authorize Access button.
Google asks me which account I should grant access to. I pick the account that owns the Google Spreadsheet.
Note how the screenshot below uses the name “Certificate Validator” because that’s the name we provided in the deployment Description in an earlier step.
Google asks for my confirmation while reminding me not to trust unknown apps. Since I am the creator of the “Certificate Validator” app, I have no problems trusting it, and I click the “Allow” button.
All of the authorization steps above are required only once. Future deployments of the app won’t have these authorization steps (as you’ll see further below).
Google Apps Script proceeds with the deployment, and I get a confirmation message letting me know my “New deployment” succeeded.
Near the bottom of the confirmation screen above is the web app URL (see red box in the image). I copy the app’s web page URL and visit it using my web browser.
It loads successfully! 🎉
At this point in the process, our app has been deployed and is live and online! It looks like this:
5. Test the app
The moment of truth is upon us! Will the app work?
We first test it with an invalid certificate number, and it correctly returns the message that no matching certificate is found. ✅
We next test it with a valid certificate number, and a certificate record is found! Hooray! ✅
Oh, but wait. . . ❌
❌ The Course field incorrectly displays the student’s first name. ❌ The Student Name field only has the last name. ❌ The course name itself is nowhere to be seen.
So we’re almost, but not quite, there.
6. Ask Claude to Fix the Final Bugs
I go back to Claude and describe the error encountered, together with a screenshot of the erroneous output and a screenshot of the spreadsheet headers. You can also see my prompt in our handy Google doc of prompts and code.
Claude spots the issue and gives me an updated code block for the “lookupCertificate” function.
I go back to the Script Editor, delete the old “lookupCertificate” function, and paste the new version of the function into the editor before saving my changes.
Note how the orange dot beside “code.gs” in the sidebar appears when I first delete the old function. The same orange dot disappears once my changes are successfully saved.
7. Deploy the Updated Code to Update the Web App
At this point, we have changed the code and successfully saved the changes. However, only the code has changed.
The previously deployed version of the app is still running on the old code. To get the new code live and working, we need to either update the deployment or set up a new deployment.
In the GIF below, I update the current deployment by clicking Deploy > Manage Deployments. In the window that appears, I click on the pencil icon and select “New version” for the Version drop-down. Optionally, we can provide a more meaningful description. Don’t forget to click the “Deploy” button at the bottom of the window to deploy the changes to the live app.
Note: When we deploy new versions of an existing deployment, the URL for the web app does not change. However, when we deploy our code as a “new” deployment, we get a new URL for the web app.
Since we are merely fixing bugs in our previous deployment, we are better off deploying new versions of our web app rather than starting an entirely new deployment.
Also, we didn’t have to go through all the authorization steps this time, because those authorizations have already been granted for our app.
Step D. Test the app after resolving all the issues.
We revisit our web app at its URL and test it with both valid and invalid certificate numbers.
And this time, it works as intended! 🎉
You can give the live web app a try using any of the valid certificate numbers on our test spreadsheet.
All the Links in One Handy Place
- The published Google Spreadsheet
- The three prompts I gave Claude and Claude’s code for each, as well as the Final Debugged Code
- The live and online Certificate Verification web app
- Claude can be found at https://claude.ai
- Google Apps Script can be found at https://script.google.com
In Closing
I knew it was theoretically possible to ask LLMs to do the heavy lifting to write code, but this process exceeded my expectations.
Claude did more than just give me a working block of code. It also:
- Gave me a decent-looking web page that I can use as a starting point and extend/style further.
- Generated a user interface that used colors to communicate certificate search outcomes visually, even though I didn’t specify that as a requirement.
- Added comments to its code so I could follow along more easily.
- Used its solid understanding of the Google App Script development and deployment environment to give me easy and straightforward instructions that I could follow even though I’d never deployed a web app using Google Apps Script before.
Oh, and let’s not forget the best part: the cost to keep this web app up and running is exactly $0.00.
Still an open question: How well will this web app perform when the spreadsheet has tens of thousands of records? Thankfully, I don’t expect to hit that volume anytime soon.
What’s next? In a future post, we’ll tackle how to get this web app displayed as part of a page on a WordPress website. Spoiler: Claude and iframes are involved.