How I Built a Money-Making AI Website in Minutes (With $0 Cost)

Niraj Dhungana•July 15, 2025

Share:

In this post, I’ll walk you through exactly how I built a YouTube Thumbnail Downloader website in just a few minutes using free AI tools — no API, no complex backend, and zero cost.

If you’ve been looking for a side hustle idea that’s fast to launch and has the potential to generate real income with Google Ads, you’ll love this.

💬 Inspired by the gold rush mindset: Don’t chase the gold, sell the shovels. This site is my first “shovel.”

The Opportunity: Building a Free Tool People Actually Use

Just like during the California Gold Rush, those who sold supplies (like jeans and shovels) made millions. Today, the new gold rush is content and side hustles — and you can be the one selling the tools.

So I picked something simple, useful, and searchable — a YouTube Thumbnail Downloader.

Tools I Used

• Claude AI (Free, by Anthropic)
• Figma (or any UI design tool)
• Vite + React + Tailwind CSS
• VS Code
• GitHub + Vercel for deployment
  All tools were completely free to use.

What You’ll Learn

• How to structure a no-API project
• How to use AI to write 100% of the code
• How to troubleshoot AI-generated code
• How to deploy the site live
• How to monetize your tool

Step-by-Step Breakdown

Step 1: Research and Pick the Idea

I searched for basic online tools that people actually use. Thumbnail downloader is one of them, with huge organic search volume and very simple logic.

💡 Search this in Google: “YouTube thumbnail downloader online”
Notice how basic those sites are — and how many ads they run.

Step 2: Mock Up Your UI (Figma or Text Prompt)

I created a basic wireframe of the app with:

• A simple input for the video URL
• A preview area to show thumbnails
• Download buttons for each thumbnail type

Step 3: Use AI to Generate the Entire Codebase

I gave Claude:

• The logic for thumbnail URL construction
• The mockup UI
• The technologies I wanted (React + Tailwind)
• Some extra instructions for folder structure and clean code

I want to create an app that can download thumbnails from the youtube
videos like if we have the id of the video we can grab the thumbnail using these url structure
`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
`https://img.youtube.com/vi/${videoId}/sddefault.jpg`,
`https://img.youtube.com/vi/${videoId}/hqdefault.jpg`,
`https://img.youtube.com/vi/${videoId}/mqdefault.jpg`,
`https://img.youtube.com/vi/${videoId}/default.jpg`
I have provided you the mockup for this app, it's a simple React app use tailwind css for styling,
I want a modern looking UI as you can see at first there will be a heading and some text that describes
the application then we have input field, when user submits the url I want a smooth animation that takes the 
input at the bottom and displays a loading UI then once the images are ready I want a section with tabs where 
different resolutions will be rendered users can select those tabs and look for the images and create a link 
at the bottom that can be used to download image, for all the links and buttons use cursor pointer, this app 
don't need to support dark-mode so you can ignore that. The UI must be responsive and must not feel jumpy 
while moving tabs, use the fixed width and height as per the screen sizes to render those images. Create 
separate components if possible and  use typescript.

Claude generated six versions of the code until it got it right — but the final output worked like magic.

Step 4: Debug & Customize

Here’s where a little HTML/CSS/JS knowledge helps.

🛠 Fixes I applied:

• Replaced broken image URLs
• Customized styling using Tailwind
• Added functionality to download images instead of opening them in a new tab

💡 Claude kept rewriting full files. I told it to only suggest code, not rewrite everything to save credits.

Here is the Ex Prompt

you wrote 
@keyframes fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } 
.animate-fade-in { animation: fade-in 0.5s ease-out forwards; }
inside the style tag tell me how can I have it inside the index.css
and use inside the tailwind css, no need to re-write the artifact
just tell me how to do this in general

Step 5: Clean Up the Code

I structured the app into components:

• Home Screen
• Thumbnail Viewer
  Then imported everything into App.tsx for cleaner code.

Step 6: Add Image Download Function

To improve UX, I added a downloadImage function that triggers a direct image download on button click.

write a new function called downloadImage where I can pass the image url and create a new link element and download image

Step 7: Deploy for Free with GitHub + Vercel

Here’s what I did:

1. Initialized git and pushed the repo to GitHub
2. Connected GitHub to Vercel
3. Let Vercel auto-detect the Vite + React app
4. Hit Deploy ✅

Now the app is live with a free URL. You can later add a custom domain.

🤑 How It Makes Money

This tool runs ads, not APIs — so you don’t pay Google, you get paid by Google (via AdSense).
It’s all static front-end code = minimal hosting cost + high scalability.

Once traffic grows:

• Apply for Google AdSense
• Add SEO keywords (like “free thumbnail downloader”)
• Share on Reddit, Quora, forums
• Upgrade the site with premium features

⚡ Bonus Monetization Idea

Instead of downloading thumbnails only, let users:

• Generate AI thumbnails based on the original
• Swap faces with their own photo
• Use templates with text and effects

That’s a whole extra feature set you can offer behind a paywall later.

Final Thoughts

This is just one tool — but if you repeat this process weekly, you can build an entire portfolio of side hustle tools.
Remember: In the AI era, speed is the new superpower. Build fast, learn fast, and monetize wisely.