# Vibe Coding — Bahan Mengajar

> **Dokumentasi induk projek.** Baca ini dulu sebelum sambung apa-apa kerja.
> Dijana oleh AI — dikemaskini 2026-05-19.

---

## 📖 Gambaran Projek

Projek ini adalah **bahan pengajaran lengkap** untuk kelas "Vibe Coding" — pembelajaran AI-assisted development untuk pelajar zero coding experience. Menggunakan Claude Code dan Codex sebagai tools utama.

**Format:** HTML interaktif (dark theme) + DOCX untuk cetakan

**Bahasa:** Bahasa Melayu sepenuhnya

**Sasaran:** Pengajar yang mengajar AI-assisted coding kepada beginner

---

## 🎯 Vision, Mission & Goals

### Vision
Menjadikan AI-assisted coding boleh diakses oleh SEMUA orang — bukan sekadar developer profesional.

### Mission
Menyediakan bahan pengajaran berkualiti tinggi dalam Bahasa Melayu yang membolehkan sesiapa sahaja mengajar dan belajar "Vibe Coding" — seni membina aplikasi dengan AI sebagai rakan kreatif.

### Goals
1. **8 fasa kurikulum** dari zero → full-stack web app
2. **37+ modul HTML** — interaktif, dark theme, boleh guna terus
3. **2 workflow** — untuk pengajar dan pelajar
4. **1 handbook induk** — 100+ halaman rujukan lengkap
5. **Rujukan tools** — MCP Servers & Skills dalam ekosistem Claude Code

---

## 🏗️ Architecture Projek

```
Bahan Mengajar - Vibe Coding/
│
├── README.md                          ← ANDA DI SINI
├── plugin-reference.html              ← Rujukan MCP & Skills (awal projek)
│
├── modul/                             ← 📚 BAHAN PENGAJARAN UTAMA
│   ├── index.html                     ← Portal navigasi semua fasa
│   ├── workflow-mengajar.html         ← Workflow untuk pengajar (S.E.D.A.P)
│   ├── workflow-vibe-coding.html      ← Workflow untuk pelajar (7 langkah v2)
│   │
│   ├── setup/                         ← Panduan instalasi
│   │   ├── install-claude-code.html
│   │   └── install-codex.html
│   │
│   ├── fasa-01-pengenalan/             ← 4 fail per fasa
│   ├── fasa-02-prompting/              ← (panduan pengajar,
│   ├── fasa-03-landing-page/           ←  modul pelajar,
│   ├── fasa-04-tools-skills/           ←  latihan,
│   ├── fasa-05-portfolio/              ←  rujukan)
│   ├── fasa-06-supabase/
│   ├── fasa-07-dashboard/
│   ├── fasa-08-deployment/
│   │
│   └── lampiran/                      ← Sijil & prompt library
│       ├── sijil.html
│       └── prompt-library.html
│
├── handbook/index.html  ← 📖 Buku induk 100 halaman
├── handbook/handbook.docx  ← 📖 Versi cetak
│
├── docs/superpowers/                  ← 📋 Dokumen perancangan
│   ├── specs/
│   │   └── 2026-05-19-vibe-coding-modules-design.md
│   └── plans/
│       └── 2026-05-19-vibe-coding-modules.md
│
└── vibe-coding-handbook/              ← 🔬 DeepDoc workspace (internal)
```

---

## 🔑 Konsep Utama

### 8 Fasa Kurikulum (Linear Progression)

| Fasa | Topik | Tools Fokus | Tempoh |
|------|-------|-------------|--------|
| 1 🔰 | Pengenalan & Setup | Claude + Codex | 2-3 jam |
| 2 ✍️ | Seni Prompting | Claude + Codex | 2-3 jam |
| 3 🏗️ | Projek Landing Page | Claude + Codex | 3-4 jam |
| 4 🔧 | Kenali Tools & Skills | Claude Code | 3-4 jam |
| 5 🎨 | Multi-Page Portfolio | Claude + Codex | 3-4 jam |
| 6 🗄️ | Database & Backend | Claude + Codex | 3-4 jam |
| 7 🚀 | Full Stack Dashboard | Claude + Codex | 4-6 jam |
| 8 🌍 | Production & Deployment | Claude + Codex | 2-3 jam |

**Jumlah: 22-30 jam**

### 7 Langkah Workflow Vibe Coding (Pelajar)

1. 💡 **Idea + Fikir Dulu** — 5 soalan wajib sebelum buka AI
2. 🧠 **Brainstorm dengan AI** — perbincangan 2 hala
3. 🤖 **Prompt Helper** — AI tulis prompt untuk AI Coder
4. ✍️ **Prompt / Execute** — hantar ke AI Coder
5. 🔍 **Review** — semak output, jangan terima bulat-bulat
6. 🔄 **Iterate** — refine sehingga puas hati
7. 🚀 **Ship** — deploy, kongsi, raikan

### 3 Fasa Workflow Mengajar (Pengajar)

1. 📋 **Sebelum Kelas** — persediaan & bahan
2. 🎯 **Semasa Kelas** — S.E.D.A.P (Setup, Explain, Demo, Aksi, Periksa)
3. ✅ **Selepas Kelas** — refleksi & penambahbaikan

---

## 🛠️ Tech Stack Projek Ini

| Komponen | Teknologi |
|----------|-----------|
| Content format | HTML5 + CSS3 + Vanilla JS |
| Styling | Dark theme custom (CSS variables) |
| Interactivity | Vanilla JS (tiada framework) |
| Data persistence | localStorage (checklist progress) |
| PDF/DOCX export | Pandoc (HTML → DOCX) |
| Version control | Git (jika digunakan) |
| Hosting | Mana-mana static file server |

---

## 📊 Saiz Projek

| Metrik | Nilai |
|--------|-------|
| Jumlah fail HTML | 40+ |
| Jumlah baris kod | ~35,000+ |
| Saiz keseluruhan | ~1.5 MB+ |
| Halaman handbook | 100 (2,910 baris) |
| Checklist interaktif | 80+ items |

---

## 🔄 Cara Sambung Kerja

1. **Buka `modul/index.html`** — portal utama untuk navigasi
2. **Buka spesifikasi** — `docs/superpowers/specs/2026-05-19-vibe-coding-modules-design.md`
3. **Buka pelan** — `docs/superpowers/plans/2026-05-19-vibe-coding-modules.md`
4. **Guna AI:** Minta Claude Code baca README ini dulu sebelum sambung kerja:

```
/claude "Baca README.md dalam projek ini. Fahamkan struktur, 
fasa, dan apa yang dah siap. Kemudian saya akan beritahu 
apa nak buat seterusnya."
```

---

## 📝 Golden Rules Vibe Coding (Diamalkan dalam Projek Ini)

1. **Sentiasa minta AI buat documentation** — setiap kali selesai kerja
2. **Documentation dulu, baru coding** — AI tulis doc → anda semak → AI execute
3. **Prompt Helper Pattern** — guna AI untuk tulis prompt untuk AI lain
4. **Satu fail, satu tanggungjawab** — setiap HTML ada fungsi jelas
5. **Dark theme konsisten** — semua guna CSS variables yang sama
6. **Iterate, jangan perfeksi** — ship dulu, refine kemudian

---

*Dokumen ini dijana oleh Claude Code sebagai sebahagian daripada "Documentation Discipline" — golden rule Vibe Coding.*