Vibe Coding For Beginners: Guide + Notes + Commands

Before we dive into Vibe Coding with AI. I want you to teach some concepts for non techie.

Table of Contents

Lets first discuss frontend in any application.

Frontend Components (HTML, CSS, JavaScript)

Now let’s zoom into the frontend, the part of a web application users see and interact with.

Every website you’ve ever visited is built with three core technologies working together.

Think HTML = Car Structure, CSS = Color of Car and JavaScript = Engine of Car. HTML, CSS, Javascript allow any application to build structure, style it and functions it.

Learn more about it here.

Python for Vibe Coding

Python is very flexible with AI. Every big creators use Python for Vibe Coding with VS Code is perfect combination.

Just understand Python is Programming Language which we will use to do coding, but where we will do coding? Answer is in VS Code a place to write code with AI.

Don’t worry, I suggest you to setup and understand Python with VS Code basics from below video which will be sufficient:

More Info here about Python.

How to Install Claude Code in VS Code

Step 1: Install Claude Code CLI

The VS Code extension needs the CLI installed on your machine first.

Mac / Linux:

curl -fsSL https://claude.ai/install.sh | bash

Windows (PowerShell)

irm https://claude.ai/install.ps1 | iex

Step 2: Install Git (Windows Only)

winget install --id Git.Git -e --source winget

Step 3: Install the Claude Code VS Code Extension

Quick Terms You Saw

Frontend-only app
An app that runs entirely in the browser (no server, no database)
Client-side
Code that runs on the user’s device, not on a server
Plan Mode
AI first plans the project before writing any code
Drag & Drop Zone
An upload area where users drag files instead of clicking a button

Modularity + AI = Power

Modular structure makes AI work better:

AI reads smaller files
Context is reduced
Fewer hallucinations
More accurate updates
Less chance of breaking unrelated code

AI edits only what needs to be changed.

The Rule to Remember

When starting any project, always include this instruction:

Build it using a fully modular structure for easy updates, scaling, and maintainability.

These words matter.

Understanding Packages

What is a Package?

A package (or library) is pre-written code you can use directly in your projects instead of building everything from scratch.

Term	What it means
Package / Library	Reusable code for a specific purpose
Framework	A larger structure that shapes how you build (packages are more focused)

Popular Python Packages

Package	Purpose
`pygame`	Game development (100,000+ lines of code)
`requests`	HTTP requests — download files, send data, interact with URLs
`numpy`	Math operations, essential for machine learning
`SimplerLLM`	Build AI-powered apps easily
`Django`	Web framework (installed as a package)

How to Install Packages

Single package:

pip install pygame

Multiple packages (using a requirements file):

pip install -r requirements.txt

Virtual Environments

The Problem: Package Version Conflicts

When you install packages directly on your computer, every project shares the same versions. This causes conflicts when different projects need different versions of the same package.

Project	Needs	Problem
Project A	`requests==2.0`	Breaks if 2.31 is installed
Project B	`requests==2.31`	Breaks if 2.0 is installed

The Solution: Virtual Environments

Each project gets its own isolated environment with its own packages and versions.

Commands Reference

Check installed package version:

pip show pygame

Install a specific version:

pip install simplerllm==0.3.22

Create a virtual environment:

python -m venv venv

Activate the virtual environment:

Windows:

venv\Scripts\activate

Mac/Linux:

source venv/bin/activate

Deactivate:

deactivate

Key Takeaway

Every time you start a new project:

Create a virtual environment
Activate it before installing any packages

Resource

🔗 PyPI.org — Browse and search all Python packages

Databases & Django ORM

What is a Database?

A database is a way to save and organize data so you can easily search and retrieve it. Think of it like an Excel sheet with tables, columns, and rows.

Operation	What it does
Add	Insert a new record (e.g., new user signs up)
Update	Modify existing data
Delete	Remove a record
Search	Find and retrieve specific data

What is an ORM?

ORM (Object-Relational Mapping) is like a universal adapter between your code and the database.

Your Python Code  →  Django ORM  →  Any Database

Why it matters: You can switch databases (SQLite → PostgreSQL → MySQL) without changing your code. The ORM handles the translation automatically.

Example

# This Python code works with ANY database thanks to ORM
User.objects.filter(age__gt=18)

The ORM translates this to the correct database language—whether you’re using SQLite, PostgreSQL, or MySQL.

Django has a built-in ORM. You don’t need to worry about.

Django in Action (Demo)

Running a Django Project

# 1. Create virtual environment
python -m venv venv

# 2. Activate it
venv\Scripts\activate        # Windows
source venv/bin/activate     # Mac/Linux

# 3. Install Django
pip install django

# 4. Start Django project
django-admin startproject projectname

# 5. Move into the project folder
cd projectname

# 6. Run migrations (creates database tables)
python manage.py migrate

# 7. Create superuser (for admin panel)
python manage.py createsuperuser

# 8. Run the server
python manage.py runserver

Then open: http://127.0.0.1:8000

Django Built-in Features (Demo)

Feature	What you get
Admin Panel	Full dashboard at `/admin` to manage your data
Authentication	User login, logout, permissions—ready to use
Authorization	User groups and permissions system
Database Management	Add, edit, delete records through the UI
Command Line Tools	Manage your app without touching the code

Creating Users

Option 1: Admin Panel

Go to /admin → Users → Add User

Option 2: Command Line

python manage.py createsuperuser

Useful Commands

python manage.py help           # See all available commands
python manage.py runserver      # Start the web server
python manage.py createsuperuser # Create an admin user

Building a Simple Blog

Now what ever we learned, lets create a simple mini project of building a simple blog website to understand how vibe coding works. Follow below steps:

First do all the setup in terminal:

# 1. Create virtual environment
python -m venv venv

# 2. Activate it
venv\Scripts\activate

# 3. Install Django
pip install django

Then paste the prompt to AI 🤖

The Prompt You can Use

I want to build a new Python Django app.

I already installed Django.

I will use Django ORM for the database (SQLite).

Use the built-in Django admin for all admin and management tasks.

Use my existing virtual environment (venv).

I want to create a simple blogging system where I can add and publish blog posts and view them on the home page.

Core feature: Create and delete blog posts.

Ask me questions to fully understand the project before beginning.

Why This Prompt Works

Line	Purpose
`Python Django app`	Tells AI the language + framework
`I already installed Django`	Saves time, skips installation steps
`Django ORM` + `SQLite`	Specifies database setup
`Built-in Django admin`	Uses what Django already provides
`Use my existing virtual environment`	Prevents AI from creating a new one
`Core feature: Create and delete blog posts`	Focuses on main functionality first
`Ask me questions`	Gets AI to clarify before building

Pillar #3: Core Feature First

Always focus on the main functionality before adding extras.

❌ Don’t ask for colors, styles, and extra features upfront
✅ Get the core working first, then add features

Commands Used

# Create superuser
python manage.py createsuperuser

# Run the server
python manage.py runserver

What is JSON?

JSON (JavaScript Object Notation) is a structured text format that makes data easy to read and use in code.

Plain text (hard to use):

The keyword best AI tools has 1000 searches and is trending...

JSON (easy to use):

{
  "keyword": "best AI tools",
  "searches": 1000,
  "trending": true
}

JSON Anatomy

Part	Example
Field (key)	`"keyword"`
Value	`"best AI tools"`
Pair	`"keyword": "best AI tools"`

Key Takeaway

APIs return data in JSON format because it’s structured and easy to work with in any programming language.

Practical Example : Keyword Research Tool

A keyword research tool powered by two APIs:

Google Suggestions API (free) — get keyword suggestions
Keyword Metrics API (paid) — get search volume, CPC, difficulty

New Concept: Documentation Injection

When using APIs, always inject the documentation into your prompt so AI knows exactly how to use it.

Include:

API endpoint URL
Example response (JSON)

I will use the following API:
[https://suggestqueries.google.com/complete/search?output=toolbar&q=how+to+learn]

Example response:
[<toplevel>
<CompleteSuggestion>
<suggestion data="how to learn english"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="how to learn ai"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="how to learn trading"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="how to learn coding"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="how to learn japanese language"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="how to learn"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="how to learn python"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="how to learn korean language"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="how to learn german language"/>
</CompleteSuggestion>
<CompleteSuggestion>
<suggestion data="how to learn sanskrit"/>
</CompleteSuggestion>
</toplevel>]

The Prompt Structure

I want to build a Python Django app.

The project should be fully modular for easy updates and scalability.

App description:
The app is a keyword research tool powered by two APIs—one for keyword suggestions and one for keyword data.

Phase 1: Build keyword suggestions tool.
Users enter a keyword and we use Google auto suggestions API.

API endpoint: [paste URL]
Example response: [paste JSON]

I don't want any home or landing pages, just the tool page.

Ask me questions to make sure you understood what I want.

For Example API Endpoint and Response click Here.

New Concept: API Keys

Most APIs require a key to:

Identify you
Track your usage
Bill you (for paid APIs)

Store keys in a `.env` file:

Step 1 — Install python-dotenv

bash

pip install python-dotenv

Step 2 — Create .env file in your project root

GST/
├── .env        ← create this file here
├── manage.py
├── config/
└── keywords/

Inside .env write your keys like this:

OPENAI_API=xyz
PAYPAL_API=pqr
GOOGLE_API=abc

Your app reads keys from this file—never hardcode them in your code.

Resource

🔗 RapidAPI.com — Thousands of APIs you can use (and you can sell your own APIs there too)

Key Takeaways

Documentation injection — Always give AI the API endpoint + example response
API keys — Store them in .env file, never in code
Build in phases — Phase 1 (suggestions), then Phase 2 (metrics)

What is an API?

An API (Application Programming Interface) is a way to access data or services from another application—through code instead of a website.

Think of it as: A layer or broker that lets your app talk to other services.

For vibe coding understanding API is very important as you will use in 90% case.

Examples

What you see in browser	What you access via API
Google search suggestions	Same data in structured format
Weather website	Weather data you can use in your app
Scrolling Twitter/X manually	Hundreds of posts read automatically

Real Example: Google Suggestions

In browser: Type “how to learn” → see suggestions dropdown

Via API:

https://suggestqueries.google.com/complete/search?client=toolbar&q=how+to+learn

→ Returns the same suggestions as structured data

Popular APIs

API	What it does
OpenAI API	Access ChatGPT in your app
Stripe / PayPal API	Accept payments
Google Maps API	Add maps and location services
SendGrid API	Send emails
Twilio API	Send SMS messages
X (Twitter) API	Read/post tweets

Key Takeaway

90% of applications are powered by APIs. They let you connect to external services and data, without building everything yourself.

AI Prompting

Garbage in, garbage out.

If you want real value from AI with vibe coding, forget basic prompts. This is where prompt engineering comes in—structuring prompts to get exactly what you want.

Level 1: Basic Prompting (What 99% Do)

Give me 5 titles for a YouTube video about building micro SaaS

❌ Works, but gives generic results with no control over output.

Level 2: Structured Prompting (The Foundation)

Use the 4 Pillars:

Pillar	What it does	Example
Role	Narrows AI focus to a specific field	“You are a YouTube growth strategist and copywriter”
Task	Defines what you want	“Generate high-performing video titles about {topic}”
Context	Provides background info	“Target audience: entrepreneurs. Goal: maximize CTR”
Rules	Controls the output	“Keep under 60 characters. Output only 5 titles as numbered list”

✅ Better results, controlled output format.

Level 3: Data-Driven Prompting (What Makes Your Tool Unique)

Inject your own data, templates, or frameworks into the prompt.

Example: Instead of generic title generation, pass proven YouTube title frameworks:

Use these successful title templates:
- "How I [achieved result] in [timeframe]"
- "[Number] [things] That [benefit]"
- "Why [common belief] Is Wrong"
- "The [adjective] Guide to [topic]"

Generate titles following these patterns.

✅ Output is based on proven formulas you collected—not generic AI responses.

Temperature & Top P Parameters

Parameter	What it controls	Low Values	High Values
Temperature	Creativity level	Predictable, factual (code, Q&A)	Creative (stories, brainstorming)
Top P	Vocabulary range	Focused, limited word choices	Diverse, more options

Default: Temperature 0.7 works for most use cases.

Access these in OpenAI Playground, not available in ChatGPT interface.

Recommended Values by Use Case

Use Case	Temperature	Top P
Code generation	0.0 – 0.3	0.1 – 0.3
Factual Q&A	0.0 – 0.3	0.1 – 0.3
Creative writing	0.7 – 0.9	0.9 – 1.0
Title generation	0.7 – 0.9	0.8 – 1.0
With custom templates	0.5 – 0.7	0.8 – 0.9

Key Takeaway

Level 3 prompting is what makes your AI tool unique:

Collect proven frameworks/templates in your niche
Inject them into your prompts
Your output becomes data-driven, not generic AI fluff

Building an AI App – YouTube Title Generator

A YouTube title generator that:

Takes a video topic as input
Uses OpenAI API to generate 5 title suggestions
Stores the prompt in a separate file for easy updates
Uses custom frameworks (Level 3 prompting)

The Basic AI App Pattern

User Input → Your App → AI API → Response → Display Results

This is the foundation of most AI applications—connect to an AI API, send a prompt, get a response.

AI API Options

Provider	API
OpenAI	ChatGPT API
Anthropic	Claude API
Google	Gemini API

For popular APIs like OpenAI, you don’t need to inject documentation—AI already knows how to use them.

Getting Your OpenAI API Key

Go to platform.openai.com
Navigate to API Keys in the dashboard
Click “Create new secret key”
Copy the key and paste it in your .env file:

OPENAI_API_KEY=your_key_here

Keeping prompts in separate files makes them easy to update without touching code.

Making Your Tool Unique: Inject Custom Frameworks

Instead of generic AI output, inject your own frameworks into the prompt:

Please update the prompt to generate based on the following 
successful YouTube title frameworks:

[paste your frameworks here]

Why this matters: Your tool produces unique output based on proven templates—not generic AI responses.

Understanding Temperature & Top P in Your App

Parameter	Low Values (0-0.3)	High Values (0.7-0.9)
Temperature	Predictable, factual	Creative
Top P	Focused responses	Diverse responses

Pro tip: If using structured templates, use lower temperature (0.5-0.7) so AI follows your templates closely.

Key Learning: Debate with AI

Don’t just accept AI’s suggestions—argue and clarify:

“But in my case, I’m using templates…”
“Why exactly these values?”
“Explain why this is better”

Example from the lecture:

AI suggested temperature 0.8-0.9 for creative titles
After clarifying we use templates, AI adjusted to 0.5-0.7
Small tweaks like this significantly improve output quality

Key Takeaways

AI apps are simple: User input → AI API → Display response
Store prompts in separate files for easy updates
Inject your own data/frameworks to make output unique (Level 3)
Adjust temperature/top P based on your use case
Debate with AI — don’t just accept defaults, question and clarify

Build Step by Step Tool

Step 1 — Create a new folder

Create a folder on Desktop
Name it: youtube-title-generator

Step 2 — Open folder in VS Code

Open VS Code
File → Open Folder → select your folder

Step 3 — Open terminal in VS Code

Terminal → New Terminal

Step 4 — Create virtual environment

bash

python -m venv venv

Step 5 — Activate it

bash

venv\Scripts\activate

You’ll see (venv) appear in terminal ✅

Step 6 — Install Django

bash

pip install django

Step 7 — Get your OpenAI API Key

1. Go to platform.openai.com
2. Click API Keys
3. Click "Create new secret key"
4. Copy the key — save it somewhere safe!

Step 8 — Paste this prompt into Claude Code

I want to build a new Django python app.

use the venv already created.
Django is already installed.

The project structure should be fully modular 
for easy updates and scalability.

My App:
YouTube Title Generator Tool

We will use OpenAI API to take user input 
"video topic" and generate 5 titles.

The prompt should be in a separate file so 
I can update easily.

Create a .env file and tell me what 
keys to add in it.

Ask me questions to make sure you 
understood what I want.

Step 9 — Answer Claude Code’s questions

Claude Code will ask you some questions about your app → just answer them honestly!

Step 10 — Give API key when Claude Code asks

When Claude Code creates the .env file it will tell you what to add. Paste your OpenAI key:

OPENAI_API_KEY=paste-your-key-here

Step 11 — Debate temperature with Claude Code

Ask it:

What is the best temperature and top_p 
for my case? explain why

Then push back:

but I am using templates to generate titles

It will adjust to correct values! ✅

temperature = 0.6
top_p = 0.9

Step 12 — Run the server

bash

python manage.py runserver

Step 13 — Open browser

127.0.0.1:8000

Why Solo Builders Need GitHub

As working with AI for vibe coding, GitHub serves two essential purposes:

Purpose	What It Does
Backup	Your code is stored safely in the cloud. If your computer crashes or you switch devices, your work is protected.
Revert	When AI breaks your code (and it will), you can instantly roll back to a working version.

You can watch below video to learn about GitHub not compulsory, but i suggest you to watch it for vibe coding along side with this article on Github.

Key Concept: Push & Pull

YOUR COMPUTER ←→ GITHUB (Cloud)
     ↑                ↑
   Local           Repository
   Code              (Repo)

Push = Send your code from your computer to GitHub
Pull = Download your code from GitHub to your computer (or a new computer)

Getting Started

Step 1: Download GitHub Desktop

Go to: https://desktop.github.com

Download and install the application for your operating system.

Step 2: Create a GitHub Account

If you don’t have one, sign up at https://github.com (free account works fine).

Step 3: Sign In

Open GitHub Desktop and sign in with your GitHub account.

Creating Your First Repository

Open GitHub Desktop
Click File → New Repository
Give it a name (e.g., “my-first-project”)
Click Create Repository

The repository is now created locally on your computer.

Publishing to GitHub

Click Publish Repository
Keep it set to Private (your code stays hidden from others)
Click Publish

Your code is now backed up to GitHub.

To view it online: Click Repository → View on GitHub

Quick Reference

Action	How to Do It
Create new repo	File → New Repository
Push changes	Click “Push origin” button
View online	Repository → View on GitHub
Find local files	Repository → Show in Explorer/Finder

Two Ways to Use CSS Frameworks

3 Ways to style a button for vibe coding:

Method	Lines of code	Files needed
Raw CSS	~15	2 files
Tailwind	~5	1 file
DaisyUI	~1	1 file

Key rule from the lesson:

Less code = Fewer AI tokens = Less hallucination = Better results! 🏆

Method	How It Works
Local Install	Download and build the framework into your project files
CDN	Load the framework directly from a remote server via a link

CDN = Content Delivery Network — a server on the cloud that hosts libraries and frameworks you can import directly into your code.

Why Use CDN for Vibe Coding Builders?

Faster setup — No build steps or configuration
Simpler prompts — Just tell AI: “Use Tailwind CSS through the CDN”
Less files — No framework files cluttering your project

Prompt Phrase to Remember

When prompting AI, you can say:

“Use Tailwind CSS through the CDN”

This tells AI to include the CDN link instead of setting up a local build process.

When to Use Local vs CDN

Use CDN	Use Local Install
Prototyping & testing	Production apps with performance needs
Learning & experimentation	Large-scale projects
Quick projects	When you need full customization

For our projects in this course, CDN is the way to go—fast and simple.

Build a Web Page Analyzer: Always Start with GitHub

From now on, every project starts the same way in vibe coding:

Open GitHub Desktop
Create a New Repository with your project name
Open in VS Code (or your preferred IDE)
Create virtual environment
Start building

IDE Options

You can use any IDE you prefer. They all work the same way:

IDE	Notes
VS Code + Claude Code	Used in this course
Cursor	VS Code fork with built-in AI
Windsurf	VS Code fork with AI agent
Google Antigravity	New IDE From Google

All these IDEs are built on VS Code—the concepts transfer directly.

The Django Project Starter Prompt

Use this as your template for any new Django web app:

Create a new Python Django web application.

## Tech Stack & Architecture
- Use Django templates and Tailwind CSS through the CDN for the UI
- Build the app in a modular structure for easy updates and maintainability
- Use the built-in Django admin for admin and management tasks
- Use SQLite with Django ORM for the database
- Use my existing virtual environment

## Development Workflow
- Build the application step by step
- First create the project structure and a project plan
- Create a plan.md file with the full project plan
- Add .env file to store important keys & apis (if requires)
- Ask questions before you start

## App Description
[Your app description here]

Time-Saving Tip: Create Django Structure Yourself

Instead of having AI create the basic Django project structure, run this command yourself:

django-admin startproject myproject .

The . at the end creates the project in the current directory.

This saves tokens and time, let AI focus on the actual application logic.

The Most Important Step: Understand Your App Logic First

Before you write anything, before you tell the AI anything, you have to understand exactly what you want.

You need to know:

How the logic flows
What building blocks you’re using
What APIs and services are involved
What libraries you’ll need

Our Example: Webpage Analyzer App

The User Sees

Enter URL → [Magic Happens] → Full Report

What Actually Happens

Step 1: User enters URL
         ↓
Step 2: Scrape the webpage (get HTML code)
         ↓
Step 3: Send HTML to AI for analysis
         ↓
Step 4: Return structured JSON
         ↓
Step 5: Display report in UI

Breaking Down Each Step: What Tools Do We Need?

Step	What Happens	Tools/Libraries
1. Input	User enters URL	Django UI
2. Scrape	Get HTML from webpage	`requests`, `BeautifulSoup`, or scraping API
3. AI Analysis	Send HTML to AI model	SimplerLLM, OpenAI API, etc.
4. Structured Output	Get JSON response	Pydantic, SimplerLLM
5. Display	Show report to user	Django templates + Tailwind

Why Structured JSON Output Matters

When AI returns structured JSON instead of plain text:

Easier to build the UI
Data is predictable and consistent
Each field maps directly to your report sections

Key Takeaway

The difference between struggling for hours and building in minutes:

Understanding your app’s logic and choosing your tools BEFORE you start prompting.

Think through:

What’s the user flow?
What happens at each step?
What library/API handles each step?

Then tell the AI exactly what you need.

Web Scraping – Methods & Limitations

Scraping means extracting the HTML code from any webpage so your application can read and process it. Lets start vibe coding with real project!

Webpage (what users see) → HTML Code (what your app reads)

Two Approaches to Web Scraping

Approach	What It Is	Best For
Python Libraries	Built-in packages you install and run locally	Simple pages, learning, no protection
APIs	Third-party services that handle scraping for you	Protected pages, production apps, scale

Approach 1: Python Libraries

Available Libraries

Library	Type	How It Works
Requests + BeautifulSoup	HTTP request	Fetches HTML directly, parses content
Selenium	Browser automation	Opens real browser, loads page, extracts HTML
Playwright	Browser automation	Modern alternative to Selenium
MechanicalSoup	HTTP + parsing	Combines requests with form handling

Limitations of Python Libraries

When using built-in libraries, you’ll face three main problems:

Limitation	What Happens	Error You’ll See
CAPTCHAs	Page requires human verification	Blocked or incomplete response
Anti-bot Systems	Cloudflare or firewall protection	`403 Forbidden`
IP Blocking	Too many requests from your IP	`429 Too Many Requests` → `403 Forbidden`

There are advanced techniques to bypass these (proxies, rotating user agents), but they require significant setup and maintenance.

Approach 2: Scraping APIs

APIs handle all the hard parts for you—bypassing CAPTCHAs, rotating IPs, and avoiding blocks.

Popular Scraping APIs

Service	Website	Key Feature
Scraping Dog	scrapingdog.com	Markdown output option
Scraper API	scraperapi.com	Premium proxy network

Why Markdown Output Matters

When scraping for AI analysis, request Markdown format instead of HTML:

Format	Size	AI Processing
HTML	Large (includes all tags)	More tokens, harder to parse
Markdown	Smaller (clean text)	Fewer tokens, better for LLMs

Both Scraping Dog and Scraper API support markdown output.

Which Approach Should You Use?

Situation	Recommended Approach
Learning/testing	Python libraries (Requests + BeautifulSoup)
Simple unprotected pages	Python libraries
Protected pages (Cloudflare, etc.)	Scraping APIs
Production application	Scraping APIs
Need markdown output	Scraping APIs

Key Takeaway

Now when you prompt AI to build a scraping feature, you know exactly what to ask for:

“Use Requests and BeautifulSoup to scrape the webpage”

“Use Scraping Dog API to scrape the webpage and return markdown format”

Understanding these building blocks = better prompts = better results.

FallBack – Unified Function Interface

A FallBack or unified function interface is a single function that can use multiple providers underneath while always returning the same output format.

                    ┌─── Provider 1 (Playwright)
scrape_webpage() ───┼─── Provider 2 (Scraping Dog)
                    └─── Provider 3 (Scraper API)
                              │
                              ▼
                      Same Output Format

Why This Matters

Benefit	What It Means
Easy switching	Change providers without changing your app code
No redeployment	Switch providers while your app is running
Failover mechanism	If one provider fails, automatically try the next
Consistent output	Your app logic never breaks because output format stays the same

Failover in Action

Request starts
     │
     ▼
Provider 1 (Playwright) ──── FAILED
     │
     ▼
Provider 2 (Scraper API) ─── FAILED
     │
     ▼
Provider 3 (Scraping Dog) ── SUCCESS ──→ Returns result

Your app keeps working even when individual providers fail.

The Prompt to Build This

I want to build a scraping function with a unified interface.

It should support two providers: Playwright and Scraping Dog.

Requirements:
- Return the same format regardless of the provider
- If failover is true, try the second provider if the first fails

Create this functionality in a dedicated folder with full modular structure.

## Scraping Dog API Docs:
[paste the API code example here]

Key elements:

Specify the providers you want
Request consistent output format
Ask for failover support
Request modular structure (dedicated folder)
Include API documentation

Handling Errors

When you encounter errors like ModuleNotFoundError:

Don’t panic — this is normal
Read the error message (it tells you what’s missing)
Install the missing package, or
Paste the error back to AI and let it fix it

Before Pushing to GitHub: Create .gitignore

Tell AI:

I want to create a .gitignore file for my project.

This file tells GitHub to ignore:

Cache files (__pycache__/)
Environment files (.env) — never push API keys!
Local development files

Push Workflow

After every working feature:

Open GitHub Desktop
Review changed files (should be cleaner with .gitignore)
Write a commit message describing what you added (e.g., “Added scraping logic”)
Click Push

Key Takeaway

The unified function interface pattern:

Makes your code flexible and resilient
Lets you swap providers without breaking anything
Adds automatic failover for production reliability

Use this pattern whenever you integrate external services (scraping, AI models, payment providers, etc.).

Fallback Mechanism in Vibe Coding

What is a Fallback?

Think of it like ordering food 🍕

First try Swiggy → down? Try Zomato → both down? Show error

Your app never fully breaks!

Why You Need It

Without Fallback	With Fallback
One service fails = app crashes	One service fails = tries next automatically
Users see errors	Users don’t even notice
You lose money	App runs 24/7

For AI Service — Copy Paste This Prompt

Add a fallback mechanism to the AI service.

If OpenAI fails, automatically switch to Anthropic Claude.
If Anthropic fails, switch to Google Gemini.

Keep the same output format regardless of which 
provider responds.

Add all API keys in your .env file:

OPENAI_API_KEY=your-key-here
ANTHROPIC_API_KEY=your-key-here
GOOGLE_API_KEY=your-key-here

For Scraping Service — Copy Paste This Prompt

Add a fallback mechanism to the scraping service.

If Scraping Dog fails, automatically switch to Playwright.

Keep the same output format regardless of provider.

Add Scraping Dog key in your .env file:

SCRAPINGDOG_API_KEY=your-key-here

How It Works

Request starts
      ↓
Provider 1 → FAILED
      ↓
Provider 2 → FAILED
      ↓
Provider 3 → SUCCESS ✅

Golden Rule

You only need to understand WHAT you want — Claude Code figures out HOW to build it!

UI Styles for Vibe Coding

What is a UI Style?

Instead of describing how you want your app to look in detail — just tell AI a style name and it does everything! 😄

Available Styles

Style	What it looks like	Best for
Memphis	Colorful, playful, geometric shapes	Fun tools, creative apps
Brutalism	Raw, bold, unconventional	Portfolio, statement sites
Cyberpunk	Dark, neon accents, futuristic	Tech tools, gaming apps
Retro/Win95	Old-school Windows aesthetic	Nostalgic, fun projects
Minimalist	Clean, lots of whitespace	Business, professional tools
Glassmorphism	Frosted glass effect, translucent	Modern, premium feel

Final Prompt Template For Vibe Coding

For vibe coding this below is the perfect template I created which you can copy paste and use it.

Create a new Python Django web application.

## Tech Stack & Architecture
- Use Django templates and Tailwind CSS through the CDN for the UI
- Build the app in a modular structure for easy updates and maintainability
- Use the built-in Django admin for admin and management tasks
- Use SQLite with Django ORM for the database
- Use my existing virtual environment

## Development Workflow
- Build the application step by step
- First create the project structure and a project plan
- Create a plan.md file with the full project plan
- Add .env file to store important keys & apis (if requires)
- Ask questions before you start

## App Description [Your app description here]

## Add Fall back [Your fallback description here]

## Add Style for UI [Your style description here]

Example Template Prompt I used:

Create a new Python Django web application.

## Tech Stack & Architecture
- Use Django templates and Tailwind CSS through the CDN for the UI
- Build the app in a modular structure for easy updates and maintainability
- Use the built-in Django admin for admin and management tasks
- Use SQLite with Django ORM for the database
- Use my existing virtual environment

## Development Workflow
- Build the application step by step
- First create the project structure and a project plan
- Create a plan.md file with the full project plan
- Add .env file to store important keys & apis (if required)
- Ask questions before you start

## App Description
Build a Webpage Analyzer Tool with 2 pages:

Home Page:
- A landing page with headline, header, footer and description
- A button "Start Analyzing" that takes user 
  to the analyzer page

Analyzer Page:
- A URL input form where user enters a website URL
- On submit, scrape the webpage using Scraping Dog API
- Send the content to OpenAI for analysis
- Show results on the same page with:
  title, summary, SEO score, issues 
  and recommendations

## Add Fallback
AI Fallback:
- If OpenAI fails, automatically switch to DeepSeek
- Keep the same output format regardless of 
  which provider responds

Scraping Fallback:
- If Scraping Dog fails, automatically switch 
  to Playwright
- Keep the same output format regardless of provider

## Add Style for UI
- Use Memphis style

If you are using API so make sure to add endpoint + dummy response to prompt while doing vibe coding:

## Scraping Dog API Documentation

Endpoint: https://api.scrapingdog.com/scrape

Always request markdown format for cleaner content.

Example Response:
[paste example response here]

Make sure after project will finish it will ask to add all API keys to .env file so add it and then you can tell Claude to follow below prompt:-

I added the API keys to .env file. 
Now please:
1. Make sure .env is added to .gitignore
2. Create a .gitignore file if not exists
3. Test the project to make sure everything works correctly

Error Pages for Your APP in Vibe Coding

The Problem with Default Error Pages

When users visit a page that doesn’t exist, Django shows its default 404 page.

In debug mode, this reveals technical information:

URL patterns
Django version
Internal paths

This looks unprofessional and can expose security-sensitive information.

Two Error Pages You Need

Error Code	When It Appears	What It Means
404	User visits a URL that doesn’t exist	Page Not Found
500	Something breaks in your code	Internal Server Error

Both should have custom, branded pages that match your site’s design.

The Prompt for Error

I want now to create custom 404 and 500 error pages.

That’s it. Since you’re continuing in the same session, AI already knows your project structure and styling.

Testing Error Pages Locally

Custom error pages only display when debug is off.

To test locally, temporarily update settings.py:

# Change these settings
DEBUG = False
ALLOWED_HOSTS = ['*']

Then refresh your browser and visit a non-existent URL (e.g., /anything-random).

Important: Revert for Development

After testing, change settings back for local development:

DEBUG = True
ALLOWED_HOSTS = []

Keeping DEBUG = False locally will hide helpful error messages while you’re building.

What Good Error Pages Include

404 Page:

Clear “Page Not Found” message
Link back to homepage
Matches your site’s design/style

500 Page:

Friendly “Something went wrong” message
Reassurance (e.g., “We’re working on it”)
Link back to homepage
No technical details exposed

Key Takeaway

Custom error pages are a small detail that makes your application feel polished and professional. They:

Maintain your brand experience even when errors occur
Keep users from seeing confusing technical information
Give users a clear path back to working pages

Always create them before launching to production.

Authentication your App

The Problem with your App now:

Your app is public—anyone can use it. You need:

Users to log in before accessing certain features
A way to identify who’s using your app
Control over who can access what

What is Magic Link Authentication?

Instead of traditional username/password login:

User enters only their email
System sends a magic link to that email
User clicks the link and is logged in automatically

Benefits:

No passwords to remember or reset
No password fields to secure
Simple for users
Popular with modern apps (Slack, Notion, etc.)

How It Works

User enters email
       │
       ▼
System generates secure token (expires in 15 min)
       │
       ▼
Email sent with magic link containing token
       │
       ▼
User clicks link
       │
       ▼
System validates token → User logged in

If it’s a new email, the account is created automatically—no separate signup process.

The Prompt for Authentication Vibe Coding

Add magic link authentication to this project.

## Authentication Flow
- Login page with email input only (no password)
- Generate a secure token that expires after 15 minutes
- New emails automatically create user account

## Email Setup
- Use Resend as email service
- For local development, print emails in terminal

## Requirements
- No user password fields
- Token should be single use
- Keep it simple - no password reset, just magic links

Email Service: Resend

Resend (resend.com) is a developer-friendly email service. I use it for most of cases for vibe coding.

Plan	Emails/Month	Cost
Free	3,000	$0
Pro	50,000+	Paid

The free tier is more than enough when starting out.

Local Development Setup

During development, you don’t want to send real emails. The prompt specifies:

“For local development, print emails in terminal”

When you test locally, the magic link appears in your terminal instead of being sent via email. This makes testing fast and free.

Protecting Pages

When AI asks “Which pages should require authentication?”, specify:

Page	Access
Landing page	Public
Analyzer page	Login required
Results page	Login required

Only protect the pages that need it—keep your homepage accessible.

Testing the Flow

Go to a protected page (e.g., /analyze)
Get redirected to login
Enter your email
Check terminal for the magic link
Copy and paste the link into your browser
You’re now logged in

Hard Refresh Tip

If styles or changes aren’t showing after updates:

Windows/Linux: Ctrl + Shift + R
Mac: Cmd + Shift + R

Or: Right-click the refresh button → “Empty Cache and Hard Reload”

Key Takeaway

Magic link authentication is:

Simpler than traditional auth (no password handling)
More secure (no passwords to leak)
Better UX (users don’t forget passwords)

One prompt adds a complete authentication system to your app.

Token System for App

The Problem

Your app works, but anyone can use it for free. To monetize:

Users need to buy tokens to use your tool
Each operation consumes tokens
When tokens run out, users buy more

Token System Overview

User buys tokens → Tokens added to balance
                         │
                         ▼
User uses tool → Tokens consumed from balance
                         │
                         ▼
Balance reaches zero → User must buy more tokens

Core Functions You Need

Function	Purpose
`add_tokens()`	Add tokens when user purchases
`consume_tokens()`	Deduct tokens when user uses the tool
`get_balance()`	Check current token balance
`get_transactions()`	View transaction history

The Prompt

I want to create a token system for my application.

## Structure
- Create a dedicated tokens folder inside the project
- Export clean functions that can be imported and used anywhere
- Make it fully modular

## Core Functions
- add_tokens
- consume_tokens
- get_balance
- get_transactions

## Critical Requirements
- Handle race conditions: two simultaneous requests must never overdraw the balance

## Note
- I want to be able to assign tokens to users in the Django admin for testing

Critical Concept: Race Conditions

What is a Race Condition?

When two requests happen at the same time, they can both read the same balance before either updates it.

Without Protection (DANGEROUS)

User has 100 tokens, operation costs 80 tokens

Request 1: Reads balance (100) → Subtracts 80 → Saves (20)
Request 2: Reads balance (100) → Subtracts 80 → Saves (20)
                    ↓
         Both requests succeed!
         User spent 160 tokens but only had 100
         Final balance: 20 (should be -60)
         YOU LOST MONEY

With Protection (SAFE)

Request 1: Reads balance (100) → LOCKS → Subtracts 80 → Saves (20) → UNLOCKS
Request 2: WAITS... → Reads balance (20) → Not enough! → REJECTED
                    ↓
         Only one request succeeds
         User can't overdraw
         YOU'RE PROTECTED

Always tell AI to handle race conditions when building token/credit systems.

Building Step by Step

Step 1: Create the Token System

First prompt creates the core token logic with all four functions.

Step 2: Create the User Token Page

Now I want to create a user token page so user can see the balance and transaction history.

This creates a dashboard where users see:

Current balance
Transaction history table

Step 3: Integrate with Your Tool

Finally, let's implement the token system in our web analyzer tool and consume 30 tokens for each operation.

This connects the token system to your actual feature.

Testing with Django Admin

The prompt includes:

“I want to be able to assign tokens to users in the Django admin for testing”

This lets you:

Go to /admin
Find “Token Management”
Add tokens to test accounts manually
Test without needing real payments

Result

After integration:

Token balance shows in navigation
Users see their balance on the tokens page
Each tool use deducts tokens (e.g., 30 tokens per analysis)
Transaction history shows all debits and credits

Key Takeaway

Building modular means adding features is easy:

Token system → Built as standalone module
Token page → Uses the module’s functions
Tool integration → Just calls consume_tokens()

Each piece works independently but combines seamlessly.

Billing System

The Problem

Users run out of tokens and see “Insufficient tokens” error. They need a way to buy more tokens.

Solution: Integrate Stripe to sell token packages.

Why Stripe Checkout (Hosted Page)?

Instead of building payment forms yourself, redirect users to Stripe’s hosted checkout page.

Benefits:

Stripe handles all payment security
PCI compliance built-in
Supports multiple payment methods
You don’t touch sensitive card data

The Prompt

I want to create a modular billing system for my application using Stripe checkout.

## Structure
- Create a dedicated billing folder
- Admin configurable token packages
- Use Stripe checkout hosted page
- Store Stripe keys in environmental variables

## Integration
- Integrate with our existing token system
- Handle race conditions in the Stripe webhook

I will use PayPal for my vibe coding but you can use above stripe because in my country Stripe is not functional:-

I want to create a modular billing system for my application using PayPal checkout.

## Structure
- Create a dedicated billing folder
- Admin configurable token packages
- Use PayPal checkout hosted page
- Store PayPal keys in environmental variables

## Integration
- Integrate with our existing token system
- Handle race conditions in the PayPal webhook

## Note
- Do not set up sandbox testing for now
- Just build the structure and integration
- We will test using the coupon system for now
- Sandbox/live testing will be done later

I will use above command and for test i can create coupon system so i will prompt AI like this below:

I want to add a coupon system to my application.

## Structure
- Create a dedicated coupons folder
- Admin can create coupons in Django admin
- Each coupon has a code, token amount, and expiry date
- One time use per user
- Admin can set max uses per coupon

## Integration
- Integrate with existing token system
- User enters coupon code and gets tokens added to balance
- Show coupon redemption history in user token page

## Note
- This will be used for testing the billing system and also for future marketing campaigns
- Admin can activate or deactivate any coupon anytime
- Make it fully modular

Context Window Note

When you see context usage getting high (e.g., 50%+), start a new session.

This prevents:

Slower responses
Mixed up context
AI confusion

Clear the session before starting a new major feature.

Environment Variables Needed

Add to your .env file:

STRIPE_API_KEY=sk_test_...
STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

Get these from your Stripe Dashboard → Developers → API Keys.

Testing Stripe Locally with Stripe CLI

Since Stripe needs to send webhooks to your app (to confirm payments), you need the Stripe CLI for local testing.

Installation

Windows (PowerShell):

powershell

winget install Stripe.StripeCLI

Mac (Terminal):

brew install stripe/stripe-cli/stripe

Setup Steps

Check installation:

   stripe --version

Login to Stripe:

   stripe login

Follow the URL to authenticate.

Start the webhook listener:

   stripe listen --forward-to localhost:8000/billing/webhook/

Copy the webhook secret it displays and add to your .env file.

Creating Token Packages

Step 1: Create Product in Stripe Dashboard

Go to Stripe Dashboard (in Test Mode)
Products → Add Product
Set name (e.g., “Starter Package”)
Set price (e.g., $5.00)
Select “One time” payment
Save and copy the Price ID (starts with price_)

Step 2: Create Package in Django Admin

Go to /admin
Find “Token Packages” under Billing
Add new package:
- Name: “Starter”
- Token amount: 100
- Price: $5.00
- Stripe Price ID: price_... (paste from Stripe)
- Active: ✓

Testing the Payment Flow

Go to “Buy Tokens” page
Click “Buy” on a package
Redirected to Stripe Checkout
Use Stripe’s test card: 4242 4242 4242 4242
- Any future expiry date
- Any 3-digit CVC
- Any name and zip code
Click “Pay”
Redirected back to your app
Check tokens page—balance should be updated!

Stripe Test Card Numbers

Card Number	Result
`4242 4242 4242 4242`	Successful payment
`4000 0000 0000 0002`	Card declined
`4000 0000 0000 9995`	Insufficient funds

Use these for testing different scenarios.

How the Flow Works

User clicks "Buy" 
       │
       ▼
Redirect to Stripe Checkout
       │
       ▼
User enters payment info
       │
       ▼
Stripe processes payment
       │
       ▼
Stripe sends webhook to your app
       │
       ▼
Your app adds tokens to user's balance
       │
       ▼
User redirected back with updated balance

Key Takeaway

Stripe Checkout makes payments simple:

You don’t handle card data
Stripe manages security and compliance
Webhooks automatically update your system
Test mode lets you verify everything before going live

Combined with your modular token system, users can now buy and use tokens seamlessly.

Security Audit for App

In building any app with vibe coding its important to add security layers to the App.

Important Reality Check

There is no such thing as 100% security. Even big companies get hacked.

Our goal: Protect against common, known vulnerabilities—not become security experts.

Good News: Django Has Built-in Security

Django protects you from common attacks out of the box:

Protection	What It Prevents
SQL Injection	Attackers manipulating database queries
CSRF Protection	Cross-site request forgery attacks
XSS Protection	Cross-site scripting attacks
Clickjacking	UI redressing attacks
Secure Password Hashing	Password theft from database

Using a framework like Django means the basics are already handled.

Security Fix #1: Change the Admin URL

The default /admin URL is known by everyone—attackers will try it first.

The Prompt

I want to change my Django admin URL from /admin to a custom URL stored in .env for security.

Setup

Add to your .env file:

ADMIN_URL=your-secret-admin-path-here

Result: /admin returns 404, but /your-secret-admin-path-here opens admin panel.

Security Fix #2: AI Security Audit

Because your project is modular (separate folders for billing, tokens, scraper, etc.), you can scan each module individually.

Scan Frontend for Exposed Secrets

Scan the frontend code for any exposed API keys, secrets, or sensitive data that should not be public.

Why this matters: AI-generated code sometimes accidentally puts API keys in HTML/JavaScript where anyone can see them (View Page Source).

Scan Each Module

Scan the scraper folder for critical security issues and fix them. Make sure you don't break application functionality.

Repeat for each folder:

scraper/
tokens/
billing/
ai_service/

Common Vulnerability: SSRF (Server-Side Request Forgery)

When scanning, you might see this flagged.

What it is: Attackers send malicious URLs to your server, which your server then requests—potentially accessing internal systems or stealing data.

Fix: Add URL validation to ensure only legitimate URLs are processed.

Pro tip: When you encounter unfamiliar security terms, ask AI to explain them. This is how you learn while building.

Security Fix #3: Django’s Built-in Security Check

Django has a deployment checklist command:

python manage.py check --deploy

This shows warnings about security settings not configured for production.

Common Warnings and Fixes

Warning	What It Means	Fix
`DEBUG should not be True`	Debug mode exposes sensitive info	Set `DEBUG=False` in production
`SECURE_HSTS_SECONDS not set`	Not forcing HTTPS	Enable HSTS settings
`SECURE_SSL_REDIRECT not set`	HTTP allowed	Force HTTPS redirect
`SESSION_COOKIE_SECURE not set`	Cookies sent over HTTP	Secure cookie settings

Fix All Warnings

Copy the warnings and paste to AI:

Fix these Django deployment security warnings:
[paste warnings here]

AI will update your settings with production-safe values.

Important: Test After Every Security Update

Security fixes can sometimes break functionality.

After each update:

Test the application manually
Verify key features still work
If something breaks → Use GitHub to revert changes

Security Settings: Development vs Production

Many security settings only apply in production:

if not DEBUG:
    SECURE_HSTS_SECONDS = 31536000
    SECURE_SSL_REDIRECT = True
    SESSION_COOKIE_SECURE = True
    CSRF_COOKIE_SECURE = True

This way, local development still works normally while production is secured.

Final Check

Run the command again:

python manage.py check --deploy

Goal: Zero warnings before deploying.

Key Takeaways

Django handles basics: SQL injection, CSRF, XSS are covered
Change default admin URL: Don’t use /admin
Scan each module: AI can audit your code for vulnerabilities
Use Django’s check command: python manage.py check --deploy
Test after every fix: Security updates can break things
Learn while fixing: Research unfamiliar security terms
Production vs development: Some settings only apply when DEBUG=False

Moving To Production DB

Now we created our application with Vibe Coding, now lets switch it to SQLite to PostgreSQL.

Why Switch Databases?

During development, we used SQLite—a simple file-based database stored locally.

For production, we need PostgreSQL:

Handles multiple users simultaneously
Better performance at scale
Required by most hosting platforms
Industry standard for production apps

Database Hosting Options

Option	Cost	Best For
Railway	Free trial, then pay-per-use	Starting out, single projects
Digital Ocean	~$13/month	Managed service, reliability
Self-hosted (Coolify)	Server cost only	Multiple projects, cost savings

For this course, we’ll use Railway—free to start and simple to set up.

Setting Up PostgreSQL on Railway

Step 1: Create Database

Go to railway.app
Click “Deploy” → “Database” → “PostgreSQL”
Wait a few seconds for provisioning

Step 2: Get Connection String

Click on your database
Go to “Connect” → “Public Network”
Copy the connection URL

It looks like:

postgresql://username:password@host:port/database

Migrating Your Django App

The Prompt

I want to migrate my database to PostgreSQL with this connection string:

I have nothing to backup – I’m still in development.

The second line tells AI this is a fresh migration, not a data transfer.

Why Django ORM Makes This Easy

Remember the Django ORM (Object-Relational Mapping)?

It’s a layer between your code and the database. When you switch databases:

Your code stays exactly the same
Only the connection settings change
Django handles the differences between SQLite and PostgreSQL

After Migration: Run Commands

AI will tell you to:

Install the PostgreSQL adapter:

   pip install psycopg2-binary

Run migrations:

   python manage.py migrate

This creates all your tables in the new PostgreSQL database.

Important: Fresh Database = Fresh Data

When you migrate the structure (not data):

All your test accounts are gone
Token balances reset
You start with a clean slate

This is fine for going to production—you want fresh data anyway.

Common Issue: HTTPS Redirect Locally

After security setup, you might see your local site not loading.

Cause: You set DEBUG=False which enables HTTPS requirements.

Fix: Set DEBUG=True in .env for local development, then run again.

Security Best Practice: Move Database Credentials to .env

AI might hardcode the database connection in settings.py. This is a security risk.

The Prompt

Please move the database connection parameters from settings to .env

Result in .env:

DB_NAME=railway
DB_USER=postgres
DB_PASSWORD=your_password
DB_HOST=your_host.railway.app
DB_PORT=5432

Result in settings.py:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': os.getenv('DB_NAME'),
        'USER': os.getenv('DB_USER'),
        'PASSWORD': os.getenv('DB_PASSWORD'),
        'HOST': os.getenv('DB_HOST'),
        'PORT': os.getenv('DB_PORT'),
    }
}

Benefits:

Credentials not in your code
Easy to change without editing code
Different values for development vs production

Verifying the Migration

Check Railway dashboard → Your database → “Data” tab
You should see all your Django tables created
Run your app locally and test key features
Note: It may be slightly slower (connecting to remote database)

Key Takeaways

SQLite → PostgreSQL: Required for production
Railway: Free and easy way to get a PostgreSQL database
Django ORM: Makes database switching painless
Fresh migration: Structure transfers, data doesn’t
Credentials in .env: Never hardcode database passwords
Test after migration: Verify everything still works

Publishing The App

Hosting Options

You have many choices for deploying your Django application:

Service	Type	Best For
Railway	Managed platform	Quick deployment, beginners
DigitalOcean App Platform	Managed platform	Scalable apps
Render	Managed platform	Free tier available
PythonAnywhere	Python-specific	Simple Django apps
Coolify	Self-hosted	Full control, multiple projects

The Docker Approach

Instead of learning each platform’s specific setup, we’ll use Docker.

What is Docker? Docker packages your entire application (code, dependencies, settings) into a “container” that runs the same way anywhere.

Your App + Dependencies + Settings = Docker Container
                                           │
                                           ▼
                              Runs on ANY platform

The Prompt

Create a production-ready Dockerfile and docker-compose.yml for my Django project.

## Project Details
- Use PostgreSQL for database
- Use WhiteNoise for static files
- Use Gunicorn for application serving

## Requirements
- Use multi-stage build to keep the image small
- Use environmental variables for configuration
- Expose on port 8000
- Create a .dockerignore file
- Run collectstatic during build
- Keep it simple and well-commented for beginners learning Docker

Key Docker Terms Explained

Term	What It Does
Dockerfile	Instructions to build your container
docker-compose.yml	Defines how multiple services work together
Multi-stage build	Keeps final image small by discarding build tools
WhiteNoise	Serves static files (CSS, JS) efficiently
Gunicorn	Production-grade web server for Python
.dockerignore	Files to exclude from the container

After Docker Files Are Created

Commit to GitHub

   "Updated with Docker"

Push to repository

Now your project can be deployed anywhere that supports Docker.

Deploying to Railway

Step 1: Create New Project

Go to Railway dashboard
Click “Deploy a new project”
Select “GitHub Repo”
Find and select your repository

Step 2: Add Environment Variables

Go to Variables → Raw Editor
Paste your .env contents
Important changes for production:

  DEBUG=False
  ALLOWED_HOSTS=your-app-name.railway.app

Step 3: Generate Domain

Go to Settings → Public Networking
Click “Generate Domain”
Copy the URL and add to ALLOWED_HOSTS

Step 4: Deploy

Railway automatically builds and deploys
Click the URL to see your live app!

If Deployment Fails

Don’t panic—this is normal. Here’s how to debug:

Check logs: Deployments → View Logs
Common issue: Missing packages in requirements.txt
Copy error and ask AI: “What’s wrong with this deployment error?”

Same Process Works Everywhere

Once you have Docker files, deploying to other platforms is nearly identical:

DigitalOcean App Platform:

Create → App Platform → GitHub → Select repo → Add env variables → Deploy

Coolify (Self-hosted):

New Project → GitHub Repo → Select repo → Add env variables → Deploy

Any Docker-compatible host:

Connect GitHub → Add env variables → Deploy

Production Checklist

Before going live, verify:

DEBUG=False in production
ALLOWED_HOSTS includes your domain
All API keys are in environment variables
requirements.txt has all packages
Security audit passed (python manage.py check --deploy)
Custom admin URL configured
Stripe in live mode (not test mode) if accepting payments

🎉 Congratulations!

You’ve built and deployed a complete AI-powered web application:

✅ Django web framework
✅ Web scraping with failover
✅ AI integration with SimplerLLM
✅ Structured JSON responses
✅ User authentication (magic links)
✅ Token system for monetization
✅ Stripe payment integration
✅ Security hardening
✅ Production deployment

Final Advice

“The whole idea behind building with AI is learning while building.”

Do This:

Read the plans before accepting
Understand what AI is doing—don’t just click accept
Research unfamiliar terms—this is how you grow
Build more projects—each one teaches you something new

Don’t Do This:

Don’t blindly accept everything (this is “dummy vibe coding”)
Don’t skip understanding for speed
Don’t give up when errors happen—they’re learning opportunities

What’s Next?

You now have the skills to build any web application you can imagine:

Pick an idea you’re excited about
Plan the logic before prompting
Build modularly step by step
Test thoroughly at each stage
Deploy and iterate

The patterns you learned in this course apply to any project. Now go build something amazing!

I hope you loved this Vibe Coding guide with all notes and commands and videos included.

Frontend Components (HTML, CSS, JavaScript)

Python for Vibe Coding

How to Install Claude Code in VS Code

Step 1: Install Claude Code CLI

Step 2: Install Git (Windows Only)

Step 3: Install the Claude Code VS Code Extension

Quick Terms You Saw

Modularity + AI = Power

The Rule to Remember

Understanding Packages

What is a Package?

Popular Python Packages

How to Install Packages

Virtual Environments

The Problem: Package Version Conflicts

The Solution: Virtual Environments

Commands Reference

Check installed package version:

Install a specific version:

Create a virtual environment:

Activate the virtual environment:

Key Takeaway

Resource

Databases & Django ORM

What is a Database?

What is an ORM?

Django in Action (Demo)

Running a Django Project

Django Built-in Features (Demo)

Creating Users

Useful Commands

Building a Simple Blog

The Prompt You can Use

Why This Prompt Works

Pillar #3: Core Feature First

Commands Used

What is JSON?

JSON Anatomy

Key Takeaway

Practical Example : Keyword Research Tool

New Concept: Documentation Injection

The Prompt Structure

New Concept: API Keys

Store keys in a .env file:

Resource

Key Takeaways

What is an API?

Examples

Real Example: Google Suggestions

Popular APIs

Key Takeaway

AI Prompting

Level 1: Basic Prompting (What 99% Do)

Level 2: Structured Prompting (The Foundation)

Level 3: Data-Driven Prompting (What Makes Your Tool Unique)

Temperature & Top P Parameters

Recommended Values by Use Case

Key Takeaway

Building an AI App – YouTube Title Generator

The Basic AI App Pattern

AI API Options

Getting Your OpenAI API Key

Making Your Tool Unique: Inject Custom Frameworks

Understanding Temperature & Top P in Your App

Key Learning: Debate with AI

Key Takeaways

Build Step by Step Tool

Why Solo Builders Need GitHub

Key Concept: Push & Pull

Getting Started

Step 1: Download GitHub Desktop

Step 2: Create a GitHub Account

Step 3: Sign In

Creating Your First Repository

Publishing to GitHub

Quick Reference

Two Ways to Use CSS Frameworks

Why Use CDN for Vibe Coding Builders?

Prompt Phrase to Remember

When to Use Local vs CDN

Store keys in a `.env` file: