From zero code to a live website in 7 hours (thanks, Cursor!)

Written by Sanita Tripane

My day job is to find and help the Sanity team hire excellent people. I also enjoy making pottery, but as everyone who put clay in a kiln on a regular basis knows: You end up with a lot of ceramics.

So I wanted to have a website where I could display and maybe even sell my creations. And since "AI" and "vibe coding" has been on everyone's lips in this industry, I thought I could give it a try.

I went into this project with:

…and somehow, after 86 messages of back-and-forth, ~100 deployments, and 7 hours of non-stop trial and error, I ended up with a live ceramics portfolio website. Still work-in-progress (like all websites are).

A product landing page

My starting point

I just wanted a simple place to show my ceramics. No coding background. No idea what β€œdeploying” even meant.

The first step was installing Sanity Studio locally, where I could create and manage my content. Then deployed online with π—Œπ–Ίπ—‡π—‚π—π—’ π–½π–Ύπ—‰π—…π—ˆπ—’.

When I initially set up Sanity Studio, I created content schemas/models that define the structure of the data - essentially templates for different types of content.

My main schemas included a π–―π—ˆπ—π—π–Ύπ—‹π—’ 𝖯𝗂𝖾𝖼𝖾 model (with fields for title, images, description, technique, materials, price, status, etc.) and a π—‰π–Ύπ—‹π—Œπ—ˆπ—‡ model (with name, bio, and image fields for my About page), which allowed me to manage all my ceramics and personal content through the Studio interface.

Then came the realization: I have a live CMS where I can manage all the content without touching code, but a CMS is not a website. I needed a frontend.

Building the frontend

For the frontend, I chose Next.js 15 with TypeScript and Tailwind CSS. Well, Cursor suggested it, and I’d heard the combo works well, so I decided to trust the advice and go for it.

This was my first real exposure to React components, file structures, and data fetching. Using @sanity/client and GROQ queries, I connected the site to my Sanity content:

Every piece of content came from Sanity - no static text hardcoded. This is the most meaningful decision you can make.

Deployment pipeline

The next hurdle was making the site public. That’s where GitHub and Vercel came in:

It sounds simple now, but at the time it was a lot. I hit caching issues, broken imports, and old commits redeploying, and yes, I maxed out Vercel’s daily limit of 100 deployments just trying to fix things.

My biggest struggles

More than half of my time was spent debugging. Each fix meant reading logs, Googling errors, and trying again. Cursor and I just kept going. It was so much fun. Somewhere in the digital void, Cursor and I high-fived. Victory was ours.

What helped me get through

Cursor

My code editor with AI assistance. This tool was a lifesaver. It suggested fixes, helped with imports, and explained error messages. Without Cursor, I would not be able to achieve any of this.

Persistence

Even after the 20th failed deployment, I kept going. Yes, until 4 AM. πŸ₯±

Simplicity

Every time Cursor tried to overcomplicate things, I trusted my gut (this shouldn’t be this complicated, should it?) and pushed back. Later, when I asked Cursor to analyze what I did well, this was one of the things it called out - I trusted my gut to push back in moments when Cursor suggested overly complicated routes.

Where Cursor changed everything

Setup: Cursor explained Sanity schema errors, guided me through imports, and fixed TypeScript type issues as they happened.

Frontend: While wiring Sanity content into Next.js, Cursor auto-suggested correct GROQ queries and React component structures.

Debugging: Most of my ~100 Vercel deployment failures came down to syntax errors, typos (π–Ύπ—Œπ—‚π—†π—‰π—ˆπ—‹π— instead of π—‚π—†π—‰π—ˆπ—‹π— πŸ™ƒ), or file placement. Cursor flagged and fixed them locally before redeploying.

Workflow learning: It taught me Git basics inside the editor (why pushing commits mattered, how repo structure worked).

Design tweaks: Tailwind suggestions, component renaming, fixing CSS conflicts β€” all solved faster with AI assistance.

Cursor, my new friend, you are an absolutely incredible tool!

The stats

The result

A professional, Sanity-powered, minimal ceramics portfolio website that I can update anytime without coding. You can check it out at santrip-ceramics.vercel.app.

What I learned

If I'm to sum up what I learned from this experience, it's something like this:

This was my first web project, and it’s live. And I did it all in one go. If you’ve been putting off building something because you β€œdon’t know how,” I’m proof that you can figure it out as you go.

Learning by doing

Here's the thing: I built something that works using tools I barely understand. Without Cursor, I couldn't even explain what I'd built, let alone write this post. After finishing, I had to ask Cursor to walk me through my own project: what I struggled with, which mistakes I kept making, what actually worked.

The magic? Cursor and I somehow understood each other, even when I didn't understand the tech. It translated my intentions into working code, turning "make this look nice" into proper Tailwind classes and "why won't this show up?" into fixed GROQ queries.

That's the real breakthrough here: I didn't have to learn to code first to make it happen. The tools met me where I was.

As a beginner, you can really walk continents in hours, with incredible tools like Sanity, Next.js, Vercel, GitHub, and Cursor. All I did was to take the first step.

Now it’s your turn.

---

πŸ‘‹ Knut from the developer education team here: if you're curious why Sanity makes AI-assisted development particularly effective: it's all code-based configuration. Schemas, workflows, and even the editorial UI are defined in TypeScript, which means AI tools can actually understand and generate the entire stack. No clicking through web UIs to configure things. Here's a course on that specific workflow if you want to go deeper.

And back to our regular programming.