How I vibe coded a TV show & movie watchlist web app with no coding experience

I’ve long wanted a way to better keep track of the TV shows and movies we want to watch other than jotting them down in the notes app on my phone. With all the talk about “vibe coding,” I wondered. Could that let me build my dream app, even though I have no coding skills? Spoiler alert: yes, it could – and did! Here’s the story of my personal journey of turning my idea into a web app I call WTWN – What To Watch Next.

This is a long blog post! If you’d prefer to skip to some specific sections of interest, well, here are the links:

• A bright beginning
• Working with an AI chat companion that can deploy
• Oops, my bad – I deleted your data and code!
• I discover (am introduced to) refactoring
• Getting an AI to tell an AI what to do
• I get upgraded
• Context windows & sessions
• Testing time!
• The Launch!

A bright beginning

I’d been hearing about vibe coding over the past year or so. Last August, I read with great interest a Wired article about a journalist who spent two days vibe coding: Why Did a $10 Billion Startup Let Me Vibe-Code for Them—and Why Did I Love It? Read it, but still didn’t get it. Still didn’t feel like I really understood it.

Last November, Google’s Gemini 3 AI model came out with a lot of praise, including people talking about how great it was for vibe coding. “Powerful vibe coding so you can go from prompt to app in one shot,” we even promised. (I say “we” because I work for Google, though on the Search team). Time to try vibe coding myself, I thought. I headed over to Gemini and gave it my prompt:

Gemini went on to tell me the app would pull in information from TMDB – The Movie Database (which turns out to be pretty amazing site for movie and TV fans). I’d need an API key to do this (I do know enough about coding and websites that an API is an automated way to get information). Gemini pointed me to the exact place to get a key. 

It wrote the code (in React, it told me) with a button for me to push to launch it. I did, the app loaded, I entered my key and wow, my dream app was a reality. I could find and add TV shows:

I mean, wow! I don’t know the exact time it took to do this, but it wasn’t more than a few minutes. I was also immediately hooked, ready to develop it more. How could I get this on my iPhone and have it remember my TV shows? I was thinking about it as being an iOS app (and maybe someday it will be), but Gemini suggested hosting it as a web app and started sharing instructions:

It also added basic backup and restore functionality to the app based on my simple request about how it might remember things:

More, more, more! I decided to give the site a better name than what Gemini had suggested. It updated it to WTWN and What To Watch Next. It added the ability to categorized watchlists, and to drag-and-drop shows to set a custom order within categories or to move to a new category:

Getting the drag-and-drop working did take a few more prompts, but it didn’t involve any complicated coding knowledge on my part. It was simply saying, “Hey, this isn’t working!”

(Spoiler: later the whole drag-and-drop functionality proved so difficult to get right as I added other features that I dropped it. Maybe it’ll come back in the future.)

I asked Gemini to add more features. Make a way to show notes for a show. Make it so that if you click on a show, you got more details. Make the streaming provider icons bigger. I was vibe UI’ing, getting everything adjusted the way I’d like, no coding required:

Working with an AI chat companion that can deploy

At this point, I realized I needed to host the code on a website – but how? I figured there was probably a way for me to do it through the hosting provider I use for my personal blog here. (that’s Tigertech, if you’re curious – run by a friend from college, awesome service, low cost, and no, this isn’t a paid mention. They’re just great). But I also figured that would involve having to download an FTP tool I haven’t used for ages, plus read some docs, plus do some configurations and more. That was bringing my vibe down. Was there an easier way?

I knew about Vercel through my youngest son and understood they hosted apps like Amazon Web Services (AWS) or Google Cloud or other providers do. I thought it would be fun to have this pop up over on Vercel and say “Guess what? I’m there!” I asked Gemini about it, and it told me it was all doable:

(Spoiler: notice that part where it says I wanted this code as a “single file.” I never said that, and it becomes important – and problematic – later on).

Off I trotted to Vercel, where I found a help page for deploying a React file. That lead me to a template that wanted to bring in my code from a place coders keep the code they work on (git repositories). One of these was GitHub. Good news! Non-coder me did have a GitHub account for some reason. Bad news! My account was flagged and couldn’t talk to any third-party providers (several weeks later, I finally used the GitHub support form and got it resolved in about six hours).

I gave up on the idea of surprising my son and asked for help. He suggested I try Vercel v0, where I could just copy-and-paste the code and keep working with Gemini but through Vercel. Copy-and-pasting code seemed weird to me, like code should be massive and too complicated to do that. But … it’s just text. And it worked:

v0 was amazing. Now I was still vibe coding with Gemini but through a web-based interface at Vercel that could (and did) deploy the code to the web. I could go to a URL on the Vercel site that was assigned to my project, load the web app, search for shows, add them to my lists – it all worked like a real growed up site! It was also easy to find, register and configure a proper domain name for the site.I later found a proper domain name for the site, registered it and got that configured to work with Vercel with the guidance v0 gave me.

Adding features was easy. No, they didn’t always work right to begin with. But we’d get there. We added an autocomplete feature for the search box, so typing a few characters would bring up matching shows:

We changed the default category names. We made it so the app would list individual seasons to record to your watchlist. We added a sharing option. We added a bunch of things. I’d type in what I wanted, and v0 would do the coding. It didn’t always work correctly the first time, but I’d give it that feedback, and it would try again.

v0 also suggested integrations and made them fairly easy to use. Most importantly, I vibe struggled to get the whole Firebase connection going that Gemini had coded for. Frustrated, I asked if there was another option to try. v0 suggested using Supabase (something I thought was a Vercel product but later came to understand was a third-party integration). 

I quickly gained cloud-based support to host my user data. IE: you could now log into the site from any device and get to your watchlist. It did take work, though. v0 initially lost things like the streaming provider icons and the year display for a show. Other errors kept cropping up. It took about 15 revisions to get things running, but we got there.

Similarly, I later decided to add a feature so people could email themselves their backup files. It didn’t work when I tested it. v0 built the feature but hadn’t connected it to anything that could actually email the backups:

Fairly quickly, I was up-and-running with an email provider called Resend that I didn’t even know anything about before.

Later, when I moved off v0 to use Claude (we’ll get to that further below), it suggested and helped me deploy an integration with Linear to get feedback, a recommendation that came from an understanding of my existing code and project.

Oops, my bad – I deleted your data and code!

Every now and then, I kept working on the site, adding little features here and there, testing things and tracking down bugs. But it also seemed to take longer to get things done. v0 would constantly tell me “I see clearly now!” when trying to resolve a problem only not to resolve it at all. I would spend ages trying to get things working better, like the ability to move shows around by using arrows.

(Spoiler: A lot of this was likely due to how big the main coding file was getting, as well as how much I was trying to do within single chat sessions. Unlike an AI, I won’t forget to get back to this below!)

It also, at one point, wiped out the database of what users had stored in their watchlists:

This wasn’t as catastrophic as it could have been, as I was the only user at the time and had my watchlist backed up. But still!

Another time, when trying to add a new feature to let people see listings by country, I was clear I wanted it to be careful. It promised all would be fine:

Narrator: all was not fine.

I discover (am introduced to) refactoring

Around Christmas, both my sons (who both code) were home for about a week. My oldest was dubious that all this vibe coding stuff would work. When he heard me asking my youngest some questions, he wandered over to look at the actual code that was written so far. Me, I’d rarely toggled the view to see the code itself, nor would it have made much sense to me.

“That’s over 4,000 lines! No wonder it’s screwing everything up,” he said, or something similar to that effect.

Long is bad? I mean as a writer, I wouldn’t think twice about writing long (this post is proof of that). I love to write long! But for code in general, it’s apparently a bad thing. It’s even worse for AIs, it seems, because if the code is long, they can’t really see or remember it all when they start to make changes. They are more prone to making mistakes.

It’s kind of like being asked to edit a long blog post, but where you forget what was at the beginning of the post. That makes it hard or impossible to make important changes that might be necessary further down in the post.

I asked v0 what it thought about the file size issue, and it agreed:

It then got hard to work refactoring, breaking the one giant file into smaller components that worked together as needed. Except, now that I knew to ask about line counts and file size, it turns out the first attempt barely did anything:

I continued working with it, but it was difficult. At one point, it wiped out my entire UI:

My f-bomb reaction to that wasn’t exactly a precise instruction, but I enjoyed watching it think about how to respond to that. Keep calm! Be professional! 

In this particular case, I restored to previous code that was working and carried on.

Getting an AI to tell an AI what to do

At this point, my younger son suggested I get off v0 and use more powerful tools. But I was in a comfort zone and thought perhaps I could nurse things along. Maybe Gemini could help me talk v0 through some of the things it was struggling with? I uploaded all my code to a Google Drive folder (as I still hadn’t gotten around to freeing my GitHub account yet), told Gemini to take a look, and it started giving me advice to pass on to v0:

Context windows? Now I was learning things (promise, I will get back to this!). v0 started refactoring things, reassuring me not to worry. It would keep a copy of all the original code as backup, so it could refer to that as needed if something went wrong. But when something did go wrong, it discovered (confessed?) that it hadn’t backed up anything at all:

Fortunately, I had my own backup, including the one I’d given Gemini. In fact, Gemini was turning out to be super-handy. If v0 asked me for some code, or got stumped, I kept feeding it back what Gemini thought:

I get upgraded

The Gemini/v0 combo did help get development moving ahead again, but I was still getting stalled on some things – and continuing to feed money into v0 like it was a slot machine. My oldest was nearly ready to stage an intervention. My youngest son again urged me to let him set me up properly to do some vibe coding. This time, I agreed – especially because now I’d finally taken the time to get my GitHub account out of flagged prison.

There was a flurry of activity and keystrokes on my computer. When he was done, Cursor (a code editor) had been installed. OpenCode had been installed to work within Cursor and tap into AI models for coding. GitHub Desktop had been installed, to track and push my code changes. 

In other words, instead of using a web-based interface to vibe code, I had a desktop app to do it, running the code on my desktop itself. I could choose from a variety of models to work with. I also got detailed instructions:

“Type in here and slash here to change models and when you’re done push here and coder talk and coder talk and coder talk,” I was told.

Both my sons and I joked about how to describe what my youngest had done to me. The idea that he took me off a bicycle I’d been riding and put me behind the wheel of a semi-truck felt most apt. So many dials and gears and things!

My sons flew home the next day, leaving me alone behind the wheel of this new vehicle. I’m shifting comparisons now, but here’s an illustration (courtesy of Gemini) of what that was like:

Hey, it was Christmas and our traditional viewing of Die Hard was still fresh in my mind. Fortunately, my youngest was around for my messages about “I’ve lost this!” and “How do I get back to that?” 

As for the model. I went with Claude Opus 4.5 because my youngest son recommended it and Gemini needed more configuration than I found easy to get it running in my setup. I signed up for the $20 per month trial plan, which my son figured would be plenty for what I was doing. It was not. After doing a few preliminary fixes, I asked it to do a complete audit of my code. It came up with a lot of suggestions but then when I tried to move ahead, I was rate limited.

I bounced back and forth like this for about a day, using the free GLM-4.7 model until my Claude limit was lifted. But Claude seemed to solve things better and faster, so I upgraded to the $100 per month plan. I no longer hit rate limits (though later, I hit a different type of limit – more below). I also felt like I was moving forward again.

Context windows & sessions

With Cursor, there was a little percentage figure that would appear at the top of the Editor window I was working in (for those who know, I used the Editor window that shows how the AI is thinking rather than the simpler Agent window. That’s what my youngest son started me with, and I kind of liked seeing what it was planning and doing).

What was this percentage? I did some Googling and learned it was how much context window the AI had left. I remembered the whole context window thing about not wanting files to be too big that the AI couldn’t remember all of it. Here was a new twist. Just talking to the AI in a session itself could get so long that it was hard for the AI to remember what it had done previously!

Suddenly, I was all about the context window both for files and sessions. I’d be constantly asking Claude if it felt it had enough context window left to complete a task we working on or if I should start a new session. If I started a new session, I realized I had to tell it what to keep doing if there were relevant things from a different session. I even began to have it make notes that I could copy-and-paste into a new session, to help it remember and not have to start from scratch.

To give some perspective, way back when I first started with v0, my first session went on for seven days and involved 93 revisions of my code! It’s no wonder v0 was struggling. Most of my sessions were extremely long like this – 50 revisions, 75 revisions – one that was 117 revisions in a single session.

These are things that an experienced coder who is vibe coding probably knows. In fact, many of the stumbles I’ve described on this journey are probably things that some coders might groan about and say, “Yeah, that’s his fault – he shouldn’t have told it that, or done it that way.” 

Of course. Agreed. I’m not a coder. Things like context windows, for a non-coder like me, it wasn’t obvious. It wasn’t anything I understood at all.

Testing time!

At last, I was feeling the vibe in vibe coding again. Sessions were going well. New features were working. Refactoring was happening as needed. Reticulating spines were reticulating. I was ready to start testing things for a formal launch (beyond a couple of friends who had been using it). It even gave me tests to try….

It also assured me “smoke test” was real coder speak:

I also decided to go back to the code’s origins. I asked Gemini to do a code review and see if it spotted any issues. But instead of Gemini on the web, I downloaded and tried Antigravity which, my son told me, is basically like Cursor but all “Googlefied.” Gemini noted some things, including one critical security error:

I shared that with Claude, and it agreed. But when I asked my youngest son about this, he said both Gemini and Claude were wrong. And when I told them both he said they were wrong, they also agreed with him.

I carried on with the testing. And yet still adding new features! And working almost exclusively with Claude Code in a terminal window on my Mac after the Great Claude Code Cutoff happened and messed with my whole Cursor / OpenCode / Claude setup. And I felt … comfortable! Like (probably overconfidently) feeling at last, I’ve got the vibe of this vibe coding.

The Launch!

Today, almost two months after I started on my vibe coding journey, What To Watch Next is officially live for anyone to use. It might only ever be something that I and a few friends use. But it’s got (hopefully) a robust feature set that will serve weill, if it catches on with more more people. It should be fairly self-explanatory for anyone to use, but if you’d like some guidance, here’s an introduction page.

Also, some stats:

• About 1,000 commits were made over a nearly two month period
• There’s almost 36,000 lines of code (TypeScript/React), 259 files (.ts/.tsx), 62 UI components, 32 API endpoints, 19 custom hooks and 35 utility/library modules — or so Claude Code told me, when I said “Give me some interesting figures!”
• Total cost to date was about $450 ($20 for Google AI Pro for two months, $100 for Claude Code for a month and $250 to Vercel — $40 for two months hosting (so far — no plans to leave, either very happy!) plus the extra credits I spent with the v0 agent.

As for the higher-level takeaways from this project, well, you made it through over 3,000 words to reach this point. I figured you needed a break! When you’re ready, part two awaits: My Takeaways From Vibe Coding As A Non-Coder