Kelas Online Gratis
Vibe Coding Next JS Supabase Midtrans Mini Desa Digital
Released date March 2026
Last updated March 2026
Member
692 enrolled
Lesson Type
Ebook Only
Tingkatan
Sertifikat
Konsultasi
-70 lessons (11.13 hours)
Develop Your Skills
Kelas Vibe Coding Dashboard Desa Digital ini cocok banget buat kamu yang mau belajar cara membangun aplikasi web modern dari nol tanpa harus hafal ribuan baris kode sendirian.
Di kelas ini, kamu akan belajar pendekatan vibe coding — cara kerja baru di mana kamu berkolaborasi dengan AI (Claude) sebagai partner coding, bukan menggantikan proses belajar, tapi justru mempercepat dan memperdalam pemahaman kamu secara signifikan.
Materi kelas ini sangat lengkap dan terstruktur. Mulai dari perancangan database di Supabase dengan Row Level Security (RLS) biar data aman per user, setup autentikasi sistem login manager desa, sampai arsitektur Next.js 15 App Router dengan pola Server Component dan Client Component yang benar. Kamu juga akan belajar cara nulis prompt yang efektif ke Claude di VSCode supaya hasil kode-nya langsung presisi dan siap pakai.
Project utama di kelas ini adalah membangun Dashboard Desa Digital — aplikasi manajemen lengkap untuk petugas desa yang berisi fitur manajemen data Kepala Keluarga dan anggota, program bantuan sosial dengan sistem validasi duplikasi penerima, kalender kegiatan desa dengan sistem peserta dan waitlist otomatis, serta alur surat administrasi dari pengajuan warga hingga generate PDF resmi dengan kop surat desa.
Yang paling seru, kamu juga akan mengintegrasikan payment gateway Midtrans Snap untuk sistem retribusi online lengkap dengan webhook, verifikasi signature, dan laporan keuangan visual menggunakan recharts. Di sisi UI, kamu akan bangun loading skeleton, empty state, toast notification, dan tampilan yang mobile-responsive — semua hal yang membedakan aplikasi latihan biasa dengan aplikasi yang benar-benar terasa profesional.
Project ini bisa langsung kamu jadikan portfolio nyata saat melamar kerja sebagai full stack developer, atau bahkan bisa ditawarkan ke pemerintah desa di sekitar kamu sebagai solusi digitalisasi administrasi. Teknologi yang dipakai pun modern dan relevan di industri: Next.js 15, TypeScript, Supabase PostgreSQL, Tailwind CSS, Midtrans, Resend Email, dan deploy ke Vercel.
Key Points
Belajar vibe coding dari nol — kolaborasi dengan Claude AI di VSCode untuk bangun aplikasi web modern secara efisien dan tetap paham logika kodenya
Membangun project nyata Dashboard Desa Digital: manajemen KK, bansos, kegiatan desa, surat PDF otomatis, dan retribusi online dengan Midtrans Snap.
Menguasai stack modern: Next.js 15, TypeScript, Supabase PostgreSQL, Row Level Security, webhook, notifikasi email, grafik recharts, deploy Vercel
Project siap jadi portfolio full stack developer atau ditawarkan ke pemerintah desa solusi digitalisasi administrasi yang fungsional dan siap pakai
Designed For
Pemula yang ingin belajar coding dengan bantuan AI tanpa harus hafal sintaks dari nol.
Developer yang ingin upgrade skill ke stack modern Next.js, Supabase, dan TypeScript.
Freelancer yang butuh project siap pakai untuk ditawarkan ke klien atau pemerintah desa.
Fresh graduate yang ingin punya portfolio aplikasi nyata untuk melamar kerja sebagai full stack developer.
Course Lessons
Videos language: Bahasa Indonesia (Auto-translation available)
Learn With Expert
Angga Risky S
Full-Stack Developer
Start to Invest 100%
Langkah yang tepat untuk berinvestasi kepada
ilmu pengetahuan
yang
baru di bidang IT
Basic - Rp 0
Akses dan pelajari kelas Starter secara gratis tanpa sertifikat
Bayar 0 rupiah
Akses kelas selamanya
Plus - Rp 50,000
Unlock benefit lainnya yang bisa
didapatkan di kelas
Starter
Sekali bayar saja
Akses kelas selamanya
Sertifikat kelas
Claude AI-Assisted Laravel 12 Sampe Mahir: Web Online Course
Vibe Coding Next JS Supabase Midtrans Mini Desa Digital
Videos language: Bahasa Indonesia (Auto-translation available)
-
Apa Itu Vibe CodingEbook 2 minutes
-
Install Semua yang DibutuhkanEbook 2 minutes
-
SupabaseEbook 2 minutes
-
MidtransEbook 2 minutes
-
Project Next JS dengan ClaudeEbook 5 minutes
-
Design Database Desa DigitalEbook 4 minutes
-
Migration DatabaseEbook 3 minutes
-
Setup AuthEbook 7 minutes
-
Bikin Halaman LoginEbook 6 minutes
-
Belajar Row Level SecurityEbook 6 minutes
-
DashboardEbook 11 minutes
-
Overview PageEbook 12 minutes
-
Routes ProtectionEbook 8 minutes
-
Reusable Components Table ModalEbook 9 minutes
-
Data Keluarga PageEbook 15 minutes
-
Form Tambah DataEbook 12 minutes
-
Details Page KK dan AnggotaEbook 17 minutes
-
Bansos ManagementEbook 22 minutes
-
Form Input BansosEbook 25 minutes
-
Event ListEbook 18 minutes
-
Event FormEbook 35 minutes
-
Sistem Request SuratEbook 30 minutes
-
Generate PDF otomatisEbook 25 minutes
-
Notifikasi Surat via EmailEbook 24 minutes
-
Manajemen Tagihan RetribusiEbook 32 minutes
-
Integrasi MidtransEbook 23 minutes
-
History dan Laporan KeuanganEbook 19 minutes
-
Loading States dan Error HandlingEbook 24 minutes
-
Responsive Mobile DesignEbook 23 minutes
-
Query OptimizationEbook 22 minutes
-
ENV dan SecurityEbook 11 minutes
-
Persiapan DeploymentEbook 13 minutes
-
Deploy ke VercelEbook 11 minutes
-
Tips Debugging pake ClaudeEbook 17 minutes
-
Penutup dan SaranEbook 7 minutes
-
Lesson 6 SQL Migration: 7 Tabel DataEbook 11 minutes
-
Lesson 7 SQL Dummy DataEbook 11 minutes
-
Lesson 8 Trigger Auto-Create ProfileEbook 11 minutes
-
Lesson 9 Halaman LoginEbook 11 minutes
-
Lesson 10 Row Level Security (RLS) PEbook 3 minutes
-
Lesson 11 Layout Dashboard UtamaEbook 7 minutes
-
Lesson 12 Halaman Dashboard OverviewEbook 3 minutes
-
Lesson 13 Middleware Proteksi RouteEbook 3 minutes
-
Lesson 14 Komponen ReusableEbook 3 minutes
-
Lesson 15 Halaman Daftar Data KeluargaEbook 3 minutes
-
Lesson 16 Form Tambah dan Edit DataEbook 3 minutes
-
Lesson 17Detail KK Manajemen AnggotaEbook 3 minutes
-
SQL Tambahan Tabel Notifikasi TriggerEbook 2 minutes
-
Lesson 18 Halaman Manajemen BansosEbook 3 minutes
-
Lesson 19 Form Input Penerima BansosEbook 3 minutes
-
SQL Tabel Peserta Kegiatan WaitlistEbook 3 minutes
-
Lesson 20 Halaman Kegiatan KalenderEbook 3 minutes
-
Lesson 21 Form Kegiatan dan ManagementEbook 3 minutes
-
Detail KegiatanEbook 3 minutes
-
Modal Add PesertaEbook 3 minutes
-
Setup Awal Install Library StorageEbook 10 minutes
-
Antrian Surat PageEbook 5 minutes
-
Modal Tolak SuratEbook 5 minutes
-
Template SuratEbook 3 minutes
-
API routesEbook 5 minutes
-
Email NotifikasiEbook 6 minutes
-
Install AwalEbook 4 minutes
-
Manajemen RetribusiEbook 4 minutes
-
Form Tagihan BaruEbook 3 minutes
-
Integrasi Midtrans PaymentEbook 3 minutes
-
Riwayat TransaksiEbook 4 minutes
-
OptimizationEbook 5 minutes
-
Responsive MobileEbook 4 minutes
-
Pagination Hook ReusableEbook 4 minutes
-
Database Index LengkapEbook 4 minutes
Kelas Vibe Coding Dashboard Desa Digital ini cocok banget buat kamu yang mau belajar cara membangun aplikasi web modern dari nol tanpa harus hafal ribuan baris kode sendirian.
Di kelas ini, kamu akan belajar pendekatan vibe coding — cara kerja baru di mana kamu berkolaborasi dengan AI (Claude) sebagai partner coding, bukan menggantikan proses belajar, tapi justru mempercepat dan memperdalam pemahaman kamu secara signifikan.
Materi kelas ini sangat lengkap dan terstruktur. Mulai dari perancangan database di Supabase dengan Row Level Security (RLS) biar data aman per user, setup autentikasi sistem login manager desa, sampai arsitektur Next.js 15 App Router dengan pola Server Component dan Client Component yang benar. Kamu juga akan belajar cara nulis prompt yang efektif ke Claude di VSCode supaya hasil kode-nya langsung presisi dan siap pakai.
Project utama di kelas ini adalah membangun Dashboard Desa Digital — aplikasi manajemen lengkap untuk petugas desa yang berisi fitur manajemen data Kepala Keluarga dan anggota, program bantuan sosial dengan sistem validasi duplikasi penerima, kalender kegiatan desa dengan sistem peserta dan waitlist otomatis, serta alur surat administrasi dari pengajuan warga hingga generate PDF resmi dengan kop surat desa.
Yang paling seru, kamu juga akan mengintegrasikan payment gateway Midtrans Snap untuk sistem retribusi online lengkap dengan webhook, verifikasi signature, dan laporan keuangan visual menggunakan recharts. Di sisi UI, kamu akan bangun loading skeleton, empty state, toast notification, dan tampilan yang mobile-responsive — semua hal yang membedakan aplikasi latihan biasa dengan aplikasi yang benar-benar terasa profesional.
Project ini bisa langsung kamu jadikan portfolio nyata saat melamar kerja sebagai full stack developer, atau bahkan bisa ditawarkan ke pemerintah desa di sekitar kamu sebagai solusi digitalisasi administrasi. Teknologi yang dipakai pun modern dan relevan di industri: Next.js 15, TypeScript, Supabase PostgreSQL, Tailwind CSS, Midtrans, Resend Email, dan deploy ke Vercel.
read more-
Belajar vibe coding dari nol — kolaborasi dengan Claude AI di VSCode untuk bangun aplikasi web modern secara efisien dan tetap paham logika kodenya
-
Membangun project nyata Dashboard Desa Digital: manajemen KK, bansos, kegiatan desa, surat PDF otomatis, dan retribusi online dengan Midtrans Snap.
-
Menguasai stack modern: Next.js 15, TypeScript, Supabase PostgreSQL, Row Level Security, webhook, notifikasi email, grafik recharts, deploy Vercel
-
Project siap jadi portfolio full stack developer atau ditawarkan ke pemerintah desa solusi digitalisasi administrasi yang fungsional dan siap pakai
-
Pemula yang ingin belajar coding dengan bantuan AI tanpa harus hafal sintaks dari nol.
-
Developer yang ingin upgrade skill ke stack modern Next.js, Supabase, dan TypeScript.
-
Freelancer yang butuh project siap pakai untuk ditawarkan ke klien atau pemerintah desa.
-
Fresh graduate yang ingin punya portfolio aplikasi nyata untuk melamar kerja sebagai full stack developer.
Happy Students
Pertanyaan Umum
Langkah yang tepat untuk berinvestasi kepada
ilmu
pengetahuan yang baru di bidang IT