Vercel untuk Vibe 102

Apa ini

Ini checkpoint Vibe 102 untuk jadikan mini app live di internet.

Guna Vercel reference kalau perlu explanation yang lebih detail.

Kenapa penting

Untuk Vibe 102, deployment ialah share step selepas app sudah jalan di localhost.

Public URL buktikan mini app boleh run di luar laptop dan boleh submit ke KrackedDevs showcase atau project page.

Apa nak buat

Langkah 1 - Check GitHub dulu

Sebelum buka Vercel, confirm:

My latest code is pushed to GitHub.
I can see project-brief.md in the GitHub repository.
I can see package.json in the GitHub repository.
Localhost worked before I pushed.
The app passed add, update, delete, refresh, and mobile-width checks.

Kalau mana-mana tidak betul, balik ke GitHub Checkpoint.

Langkah 2 - Buat ini manual dalam browser

Step ini perlukan kamu, bukan AI agent:

1. Buka vercel.com.
2. Log in dengan GitHub.
3. Click Add New atau New Project.
4. Pilih Import Git Repository.
5. Pilih repository untuk mini app ini.
6. Kalau Vercel minta GitHub access, approve access untuk repository ini.
7. Keep detected Vite framework settings.
8. Click Deploy.

Jangan paste Vercel tokens, GitHub tokens, atau private keys ke dalam AI chat.

Langkah 3 - Tunggu build

Vercel akan install dependencies, build project, dan create live URL.

Kalau build berjaya, buka live URL.

Kalau build gagal, jangan terus click deploy berulang kali. Copy build error dan guna prompt di bawah.

Langkah 4 - Test live app

Buka live URL dan check:

1. App load.
2. Design masih match project-brief.md.
3. Add berfungsi.
4. Update atau mark berfungsi.
5. Delete berfungsi.
6. Refresh kekalkan saved items dalam browser ini.
7. App readable pada mobile width.
8. Live URL itu ialah link yang kamu akan share.

Rule finish:

Kalau belum live dan belum check, belum ready untuk share.

Kalau Vercel build gagal

Guna prompt ini:

My Vibe 102 Vercel deployment failed.

GitHub repository:
[paste repo link]

Build error:
[paste exact Vercel build error]

What worked before:
Localhost worked before I pushed.
The app could add, update, delete, and save with localStorage.

Help me identify the smallest fix.
Do not ask for tokens, passwords, private keys, or environment secrets.

Selepas AI cadangkan fix, buat fix secara local, test localhost semula, push ke GitHub, dan biar Vercel redeploy.

Mistake biasa

• Pilih GitHub repository yang salah.
• Deploy sebelum GitHub ada code terkini.
• Ignore build error dan click deploy lagi.
• Tukar framework settings tanpa faham kenapa.
• Lupa localStorage data ialah browser-local, bukan shared antara device.
• Share live URL sebelum check sendiri.