Vibe Coding for Fun & Profit

Core Concepts

"Vibe coding" is an AI-native coding paradigm where you describe what you want in natural language and let AI generate the code. The shift is from writing code line-by-line to curating AI-generated output.

AI Foundations

Concept	Description
LLMs	Large Language Models power code generation (Claude, GPT-4o)
Tools & Loops	AI reads files, runs commands, iterates on feedback
Context Engineering	Writing effective prompts and `agents.md` / `claude.md` files
Workflow Evolution	From manual coding to AI-assisted to fully AI-driven

IDE Hands-On

Compare the major AI coding IDEs:

Tool	Strengths	Best For
Cursor	Deep context awareness, inline editing	Daily development
Copilot	GitHub integration, VS Code native	Enterprise teams
Codex CLI	Terminal-native, agentic actions	Automation scripts
Claude Code	Full project context, checkpoints	Complex codebases

Building a Kanban App

# In Cursor or Claude Code CLI, you can prompt:
"Create a full-stack Kanban board with FastAPI backend and vanilla JS frontend.
Include: drag-and-drop, add/delete columns, persist to SQLite."

# The AI will generate:
# backend/main.py - FastAPI routes
# frontend/index.html - Drag-and-drop UI
# backend/models.py - SQLite models

Multi-Model Environments

YOLO Mode — Let AI run commands autonomously
Responsible Coding — Always review AI-generated code for security
Cross-Model Collaboration — Switch between Claude, GPT-4o, and local models

Full-Stack Workflows

Build commercial MVPs quickly: FastAPI + Docker + SQLite + a modern frontend.

# FastAPI setup
pip install fastapi uvicorn sqlalchemy
# Dockerfile
FROM python:3.11
COPY . /app
RUN pip install -r requirements.txt
CMD ["uvicorn", "main:app", "--host", "0.0.0.0"]

✏️ Exercise: Use Claude Code CLI or Cursor to build a Kanban board app. Start with "Create a Kanban board with FastAPI backend and HTML/CSS/JS frontend." Iterate by adding drag-and-drop, local persistence, and column management. Use Docker to containerize the final product.