🔥

VIBENGODING.ID

Platform Belajar Vibe Coding Gratis

Website edukasi vibe coding bahasa Indonesia. Berisi courses gratis, tools developer, dan panduan lengkap coding dengan AI. Dibangun dengan Next.js 16, Tailwind CSS v4, dan NextAuth.

1 Maret 20254 steps5 promptsClaude Code, Cursor
Next.js 16React 19TypeScriptTailwind CSS v4NextAuthFramer Motion

Fitur Utama

✦6 courses gratis dengan 60+ lessons
✦Sistem auth dengan Google via NextAuth
✦Lesson viewer dengan progress tracking
✦PromptKit integration sebagai sub-app
✦SEO optimized dengan JSON-LD structured data
✦Responsive dark mode UI dengan grain texture
✦Google Analytics 4 tracking

Master Prompt1 PROMPT = ALL

Satu prompt yang langsung build seluruh VIBENGODING.ID

Copy prompt ini ke Claude Code / Cursor / ChatGPT dan dia akan langsung eksekusi semua plan — dari setup project, bikin semua komponen, sampai fitur lengkap. Gak perlu step-by-step, langsung jadi.

104 baris597 kataEksekusi langsung

Step-by-Step + Prompts

Inisialisasi project Next.js 16 dengan App Router, Tailwind CSS v4, dan NextAuth v5 untuk Google login.

Buat design system dark mode dengan warna merah (#E50914) dan layout landing page lengkap.

Build sistem courses dengan data-driven approach. Setiap course punya lessons, dan setiap lesson punya konten lengkap.

Optimasi SEO dengan metadata, JSON-LD structured data, sitemap, robots.txt, dan Open Graph images.

Pelajaran & Tips

💡Next.js 16 App Router + Tailwind v4 dengan @theme inline sangat powerful
💡NextAuth v5 beta masih sering berubah — pin versi spesifik
💡JSON-LD structured data penting untuk SEO education sites
💡Typing animation di hero section sangat meningkatkan engagement
💡Grain texture overlay bikin dark mode terasa premium
nextjsreacttypescripttailwindauthseoeducationcourses
Semua ProjectBeranda