7 Portfolio Project Yang Boleh Dibina Dengan Vibe Coding

Ramai pelajar dan beginner programmer di Malaysia sekarang mula belajar coding dengan bantuan AI. Trend ini dipanggil portfolio project vibe coding, di mana anda bina projek secara relaks menggunakan tools seperti ChatGPT, Claude atau Cursor AI tanpa perlu hafal syntax dari awal. Masalahnya, ramai yang tahu nak prompt AI tapi tak tahu projek apa patut dibina untuk tunjukkan skill sebenar kepada recruiter atau pensyarah.

Artikel ini saya tulis berdasarkan pengalaman mendampingi pelajar kolej dan client yang mahukan simple web app atau automation tool. Saya akan senaraikan 7 projek portfolio yang praktikal, boleh siap dalam masa singkat, dan paling penting, tunjukkan yang anda faham cara satukan AI dengan logik coding biasa.

Kenapa Portfolio Project Vibe Coding Penting

Recruiter hari ini tidak cuma cari orang yang boleh taip code. Mereka cari orang yang boleh selesaikan masalah. Bila anda tunjukkan portfolio project vibe coding, anda buktikan yang anda tahu gabungkan AI tools dengan akal sendiri. Ini nilai tambah yang besar.

Untuk pelajar FYP, projek begini juga membantu sebab supervisor selalu tanya “apa contribution awak?”. Kalau awak boleh terangkan bagaimana awak guide AI untuk bina feature tertentu, itu sudah cukup menunjukkan understanding.

Cara Vibe Coding Berbeza Dengan Traditional Coding

Dulu kita belajar variable, loop, function dulu baru bina benda. Sekarang, dengan vibe coding, kita mulakan dengan idea, kemudian AI bantu hasilkan draft code. Kita pula peranan sebagai reviewer dan integrator.

Traditional Coding	Vibe Coding
Belajar syntax dulu	Bina idea dulu, code kemudian
Slow iteration	Fast prototyping
Anda tulis semua	AI draft, anda refine
Susah untuk beginner start	Mudah untuk beginner start

7 Projek Portfolio Yang Boleh Anda Bina

1. Personal Finance Dashboard

Dashboard ini boleh track income dan expense bulanan. Anda boleh guna HTML, CSS dan sedikit JavaScript. Minta AI bantu buat chart menggunakan library seperti Chart.js.

Feature praktikal:

Input untuk tambah transaksi
Dropdown kategori
Bar chart vs pie chart
LocalStorage supaya data kekal walaupun refresh

Projek ini tunjukkan anda faham DOM manipulation dan data visualization. Untuk beginner, ini cukup solid.

2. Web App Tempahan Bilik Mesyuarat

Guna Laravel atau Node.js untuk bina simple booking system. Admin boleh approve, user boleh pilih slot waktu.

Kenapa projek ini bagus? Sebab ia ada CRUD (Create, Read, Update, Delete). Recruiter suka tengok calon yang faham aliran data dari frontend ke database.

Tips: Jangan minta AI tulis semua sekaligus. Minta AI buat migration database dulu, lepas itu controller, lepas itu view. Step by step.

3. Automation Tool Untuk WhatsApp Reminder

Guna Python atau Node.js dengan API Twilio untuk hantar reminder. Contoh: reminder bayar bil, reminder meeting.

Ini projek yang ramai client Malaysia cari. Biasanya mereka penat ingat manual. Automation tool tunjukkan anda boleh selesaikan masalah operational.

Amaran: Jangan spam orang dengan WhatsApp blast. Pastikan ada opt-in dari user. Salah guna API boleh menyebabkan akaun kena ban.

4. Inventory Tracker Untuk Kedai Kecil

Boleh bina guna WordPress dengan plugin Custom Post Type, atau bina sendiri dengan Flutter untuk mobile.

Feature asas:

Scan barcode atau input manual
Alert bila stok rendah
Export ke CSV

Projek ni dekat dengan realiti perniagaan tempatan. Kalau awak tunjuk kat interviee, mereka nampak awak faham pain point SME.

5. AI Chatbot FAQ Untuk Kedai Online

Guna API daripada ChatGPT atau Claude. Bina chatbot yang jawab soalan lazim pelanggan.

Jangan salah sangka yang ini susah. Dengan vibe coding, anda boleh dapat working prototype dalam 1 hari. Yang penting ialah prompt engineering dan error handling bila API down.

6. Student Assignment Tracker

Web app untuk pelajar catat deadline. Boleh guna Firebase sebagai backend supaya senang.

Login dengan Google
Add task dengan due date
Notification email

Projek ni sesuai untuk FYP yang scope tidak terlalu besar tapi complete.

7. Resume Builder With PDF Export

Guna library jsPDF atau HTML to PDF. User isi borang, terus jana resume.

Ini projek yang boleh awak deploy percuma kat Vercel atau Netlify. Tunjukkan awak tahu deployment, bukan sahaja coding.

Common Mistakes Bila Buat Portfolio Project Vibe Coding

Saya selalu nampak beginner buat kesilapan sama. Senaraikan di bawah supaya awak elak.

Tidak faham code yang AI bagi – Awak kena baca dan tanya balik AI kalau tak faham. Jangan copy paste buta.
Tiada backup – Guna Git dari hari pertama. Jangan tunggu error baru nak menangis.
Over promise – Jangan bina 10 feature tapi semua tidak siap. Baik 3 feature tapi kemas.
Tidak deploy – Portfolio yang hanya jalan di localhost kurang impress. Deploy lah sekurang-kurangnya ke free hosting.
Plagiarize template – Tukar warna, tukar struktur sikit. Jangan guna macam itu sahaja.

Tips & Best Practices

Beberapa perkara yang saya sarankan kepada pelajar yang saya mentor:

Guna Cursor AI atau VS Code dengan extension AI. Senang nak trace error.
Setiap projek wajib ada README. Terangkan apa, kenapa, dan bagaimana.
Rakam video demo. Recruiter malas nak clone repo. Video 2 minit cukup.
Belajar asas dulu. Vibe coding bukan shortcut untuk tidak belajar logic.
Host code di GitHub. Itu portofolio digital anda.

DIY Checklist Sebelum Mula

Sebelum awak buka ChatGPT, semak senarai ini:

Adakah saya tahu masalah yang nak selesaikan?
Adakah saya ada akaun GitHub?
Adakah saya pilih satu stack (contoh: HTML+JS atau Laravel)?
Adakah saya allocate masa 2 minggu per projek?
Adakah saya sedia tanya AI bila error, bukan give up?

Bila DIY Sudah Tidak Berbaloi

Vibe coding bagus untuk belajar. Tapi ada situasi di mana awak patut dapatkan bantuan:

FYP anda perlu lulus senate dan ada scope kompleks seperti IoT atau blockchain. Coach boleh cepatkan faham.
Client minta sistem untuk syarikat dan ada SLA. Ini bukan tempat experiment.
Awak dah 3 minggu stuck dekat same error. Professional troubleshoot jimat masa.

Jika awak pelajar yang mahukan guidance struktur, boleh lihat kelas coaching vibe coding yang kami sediakan. Kadang kala having someone review code awak lebih berharga dari 10 tutorial YouTube.

Untuk yang dapat tugasan FYP dan tidak tahu nak start, servis bina simple programming project boleh jadi jalan tengah. Bukan untuk submit orang lain punya kerja, tapi untuk dapat rujukan yang betul.

Projek Yang Patut Dielak

Ada projek yang saya sarankan awak jangan buat sebagai beginner vibe coder:

System perbankan penuh – terlalu berisiko dan susah
Clone Netflix dengan semua feature – scope terlalu besar
AI yang claim boleh diagnose penyakit – bahaya dan tidak etikal

Lebih baik buat projek kecil tapi complete dan deploy. Itu lagi berkesan.

Contoh Mini Case Study

Saya pernah bantu seorang pelajar diploma. Dia nak buat FYP pasal inventory. Dia guna vibe coding dengan Claude. Mula-mula dia minta “buat inventory system”. Claude bagi code Laravel panjang. Dia tak faham. Bila saya ajar pecahkan kepada migration, seeder, controller, barulah dia nampak cerita.

Hasilnya? Dia dapat A-. Bukan sebab code sempurna, tapi sebab dia boleh terangkan architecture depan panel. Itu kuasa vibe coding bila difahami betul.

Summary

Membina portfolio project vibe coding bukan tentang tunjuk yang awak pandai suruh AI. Ia tentang tunjuk yang awak pandai gunakan AI sebagai alat. 7 projek di atas boleh awak mula minggu ini. Pilih satu, siapkan, deploy, rekod video. Ulang untuk projek kedua.

Jangan lupa, asas coding tetap penting. AI tidak ganti thinking anda. Jika awak rasa perlu panduan dari orang yang dah lalui jalan ni, hubungi kami di lamanrasmi hub. Kadang kala satu sesi coaching boleh elak awak bazir 2 bulan.