Language: English | 简体中文 | 繁體中文 | 日本語

Vibe Coding Crash Course

An interactive tutorial site that teaches absolute beginners how to code with AI assistance (Vibe Coding). 12 lessons, built-in AI teaching assistant, and a prompt playground that generates real HTML/CSS/JS.

---

Features

• Structured curriculum — 12 lessons from concepts to hands-on practice
• AI teaching assistant — Ask questions anytime, get instant answers
• Prompt Playground — Describe what you want, get runnable HTML/CSS/JS code
• Multi-model support — Claude, OpenAI, DeepSeek, and any OpenAI-compatible API

Quick Start

Auto setup (recommended)

bash scripts/setup.sh

Manual

npm install
cp .env.example .env
# Edit .env with your API key
npm run dev

Open http://localhost:3000 to start learning.

Detailed setup guide for beginners: SETUP_GUIDE.md

Model Configuration

Supports three AI providers, configured via .env:

DeepSeek (recommended for users in China)

AI_PROVIDER=openai-compatible
AI_MODEL=deepseek-chat
AI_API_KEY=sk-...
AI_BASE_URL=https://api.deepseek.com/v1

Anthropic Claude

AI_PROVIDER=anthropic
AI_MODEL=claude-sonnet-4-20250514
ANTHROPIC_API_KEY=sk-ant-...

OpenAI or compatible

AI_PROVIDER=openai
AI_MODEL=gpt-4o
OPENAI_API_KEY=sk-...

Tech Stack

• Next.js 16 + React 19 + TypeScript
• Tailwind CSS v4
• AI SDK — unified multi-model interface
• Lucide React — icons
• react-markdown — content rendering

Project Structure

app/
  api/agent/route.ts      # AI streaming chat API
  lesson/[id]/page.tsx    # Lesson detail page
  page.tsx                # Home page
  layout.tsx              # Root layout
components/
  ChatInterface.tsx       # AI chat component
  PromptPlayground.tsx    # Code generation sandbox
  LessonNavigator.tsx     # Course navigation sidebar
lib/
  lessons.ts              # Course data
scripts/
  setup.sh                # Auto setup script

Customizing Lessons

Edit lib/lessons.ts to modify or add lessons. Content supports Markdown.

Related

• myBlog — Author's personal blog, more articles on vibe coding

License

MIT

---

Language / 语言 / 言語

English | 简体中文 | 繁體中文 | 日本語