I Built and Launched a Web App in 3 Hours with an AI that Codes
From a simple idea to a live, public website using Google’s AI Studio. Seriously.
So, picture this: it’s 2 AM, I’m supposed to be sleeping, but instead, I’m scrolling through Reels, drowning in a sea of “Top 10 AI Side Hustles” videos. We’ve all been there. You get these flashes of genius ideas for an app or a website, but then you remember… you have to actually build it. The motivation just goes poof.
That was me. I had this idea for a simple website: a library of really good AI prompts. Not the junk you see everywhere, but the high-quality stuff that actually gets you amazing results. A place where you could just search, copy, and go. I named it Best AI Tools.
Normally, an idea like that would die in my notes app. But this time, I used a secret weapon: Google’s AI Studio. And it was wild. I went from a single sentence idea to a fully deployed, public website in just a few hours.
This is the story of how I did it, and how you can too.
Step 1: The Idea (That Didn’t Instantly Die)
My idea was simple: a website with a curated list of prompts. Users could search by category (like “Marketing” or “Coding”), copy a prompt, and maybe even customize it. That’s it. No crazy backend, no user logins (at first), just a clean, useful tool.
The problem? Even a “simple” site like this takes time. You’ve gotta set up the project, fight with CSS to make it look decent, write all the JavaScript for the search and filtering… it’s a whole weekend project, easy.
And I did not have a weekend.
Step 2: Meeting My AI Coding Buddy (AI Studio)
AI Studio is different from ChatGPT. It’s not just a chatbot; it’s designed to build and change a web application with you. You talk to it, and it writes and rewrites the actual code for the entire app. It’s like having a senior developer on call 24/7 who never gets tired of your questions.
I started with the most basic prompt I could think of:
“An app which have curated collection of high-quality prompts categorized by use case… Users can browse, search, copy… Simple App Feature: A static website with categorized text boxes that users can easily copy.”
Step 3: The First Draft (It… Actually Worked? 🤯)
A few moments later, AI Studio spat out a bunch of code. It gave me an index.html, a index.tsx (that’s the main React code), and a bunch of other files. I loaded it up and… it worked.
It wasn’t pretty, but it was functional. I had a list of prompts. I had categories. I could copy the text. The foundation was there, and it took literally two minutes.
This is the first version of Best AI tools
Step 4: Iterating Like a Maniac
This is where the magic happened. I didn’t have to open a code editor and start wrestling with divs. I just kept talking to AI Studio.
My thought process went something like this, and this is literally what I typed into the prompt box:
- “Okay, let’s make this look better. Add a nice header and a dark mode.”
- “The cards look boring. Can you add a shadow, rounded corners, and a star rating system?”
- “Now I need a search bar that filters the prompts in real-time.”
- “Let’s add a feature to customize prompts. If a prompt has a placeholder like [Your Product], I want an input field to show up so the user can fill it in.”
For every request, AI Studio would think for a second and then give me the exact files I needed to update. Instead of spending hours googling CSS tricks or React state management, I was just describing what I wanted.
Step 5: Going Pro with Image Prompts & SEO
I was having so much fun I just kept going.
I thought, “People don’t just use text prompts, they use image prompts too.” So I asked AI Studio:
“Create a new page for image prompts. I want to show a ‘Before & After’ of the image edit. The user should be able to hover to see the original image.”
Boom. It created a whole new section of the site. Then I realized people search for “Gemini prompts” or “ChatGPT prompts.”
“Can you update the titles and descriptions on the page to be more SEO-friendly and include keywords like Gemini and ChatGPT?”
Done. It knew what to do.
In just a couple of hours, my simple list had turned into a full-fledged, multi-page application with features I would have been too lazy to build on my own.
Step 6: Going Live (The Scary/Awesome Part)
Okay, so I have a working app. Now what? I needed to get it on the internet. I decided to use Google Cloud Run.
I deployed it and… hit a wall. The images weren’t loading. Classic developer problem. The server didn’t know how to handle the image files.
My first instinct was to dive into server configuration docs for an hour. But then I thought… why not ask my AI buddy?
“I’m deploying this to Google Cloud Run and my images are getting a 404 error. I think I need a web server. Can you create a Dockerfile for me that uses ‘serve’ to host the static files?”
And it did. It generated the exact Dockerfile I needed. I added it to my project, re-deployed, and everything just worked.
The Takeaway
The barrier to creating something and putting it out into the world is lower than it has ever been. Tools like AI Studio don’t replace developers, they give them superpowers. They crush the boring, tedious parts of coding and let you focus on the fun part: building cool stuff.
I went from a procrastinating student with a note in my phone to a launched-product owner in less time than it takes to binge a season of a Netflix show.
So, go check out the final product: https://bestaitools.tech/
And more importantly, if you have an idea sitting in your notes app, go give AI Studio a try. You might be surprised at what you can build. 🚀
