Di Level 1 kamu baru masak di dapur minjem. Di Level 2, saatnya kamu buka restoran beneran: ruang makan yang mewah (frontend modern), dapur serba canggih (backend API), gudang bahan makanan anti basi (database cloud Supabase), kurir pengantaran otomatis (CI/CD & deployment), sampai mesin kasir yang narik duit beneran (integrasi pembayaran Stripe 💳). Semua materi ini adalah kurasi resmi dari Easy-Vibe lengkap dengan ringkasan dual bahasa dan bumbu humor lokal. Selamat bereksperimen! 😄🍳 In Level 1 you merely cooked in a borrowed kitchen. In Level 2, it's time to open a real restaurant: a classy dining hall (modern frontend), a state-of-the-art kitchen (backend APIs), an infallible cloud pantry (Supabase database), automated fast delivery (CI/CD & cloud deployment), and a cash register that collects real money (Stripe payment integration 💳). All modules are curated directly from Easy-Vibe with bilingual summaries and lighthearted humor. Enjoy the ride! 😄🍳
Frontend = semua yang dilihat, disentuh, dan dipencet pengguna. Kalau tampilannya kayak web tahun 2002, orang bakal kabur sebelum nyobain fitur hebatmu. 🪑 Frontend = everything users see, touch, and click. If it looks like a web page from 2002, users will bounce before trying your killer features. 🪑
Mulai dari NanoBanana: cara bikin agen produksi grafis massal berbasis AI agar produkmu punya identitas visual unik. Starting from NanoBanana: build an AI visual asset production agent giving your products high-definition branding.
FE 02 · DASAR DESAIN ↗Prinsip kontras, spasi, hierarki visual, dan tipografi dasar. Bikin web enak dilihat tanpa harus kuliah DKV 4 tahun. Contrast, whitespace, visual hierarchy, and typography basics. Make your app look polished without a 4-year design degree.
FE 03 · PROTOTYPING ↗Alat desain industri untuk menggambar wireframe & mockup interaktif sebelum minta AI menerjemahkannya ke baris kode. Industry design tools for wireframes & interactive mockups before asking AI to translate them to code.
FE 04 · DESAIN SISTEM ↗Membangun Design System konsisten: palet warna, variasi tombol, dan komponen berulang untuk banyak aplikasi sekaligus. Build scalable Design Systems: consistent colors, button states, and reusable components across multiple apps.
FE 05 · PROMPT SKILLS ↗Trik prompt sakti & agen skills khusus agar hasil rancangan AI tidak terasa seperti "template murahan yang seragam". Prompting tricks & dedicated agent skills so AI code doesn't look like an uninspired generic template.
FE 06 · EKSEKUSI ↗Metode akurat mengubah tangkapan layar (screenshot) dan file Figma menjadi kode HTML/React yang hidup dan responsif. Accurate pipelines to translate screenshots and Figma designs into clean, responsive HTML/React code.
FE 07 · KOMPONEN PRO ↗Gunakan pustaka komponen siap pakai (shadcn/ui, Tailwind, Radix) layaknya main Lego: cepat, estetik, dan standar industri. Leverage ready-made libraries (shadcn/ui, Tailwind, Radix) like Lego blocks: ultra-fast, accessible, and enterprise-grade.
Backend = tempat data disimpan, akun diverifikasi, transaksi diproses, dan server dijalankan. Pengguna tidak melihatnya, tapi jika mati... panik seketika! 🍳 Backend = where data lives, users authenticate, transactions settle, and servers run. Invisible to users, but when it fails... total chaos! 🍳
Tinggalkan localStorage yang fana. Bangun tabel relasional Postgres, atur hak akses Row Level Security, dan simpan data permanen. Leave ephemeral localStorage behind. Build Postgres relational tables, configure Row Level Security, and persist user data.
BE 02 · API DESIGN ↗Bikin "pelayan restoran" handal: REST API, validasi request, penanganan error cerdas, dan dokumentasi otomatis. Build your resilient API layer: REST endpoints, request validation, error boundaries, and auto-generated docs.
BE 03 · VERSION CONTROL ↗Bikin save-point proyek layaknya checkpoint di game. Branching, commit rapi, resolve conflict, dan kolaborasi tanpa rasa takut. Create project save points just like gaming checkpoints. Branching, clean commits, conflict resolution, and fearless collaboration.
BE 04 · DEPLOY PAAS ↗Cara paling praktis menyulap kode lokal jadi website berdomain publik yang siap diakses siapa pun di seluruh dunia. The smoothest route to turn local code into a globally accessible live website with custom domains.
BE 05 · VPS DEPLOY ↗Kendali penuh di server Linux pribadi: Nginx reverse proxy, SSL HTTPS gratis via Let's Encrypt, firewall, dan systemd daemon. Full ownership of your Linux server: Nginx reverse proxy, free Let's Encrypt SSL HTTPS, firewalls, and systemd services.
BE 06 · CLI TOOLS ↗Gunakan terminal command-line bertenaga agen AI untuk membaca seluruh repo, menjalankan pengujian, dan refactor skala besar. Harness terminal-based AI agents to read whole codebases, execute automated tests, and execute large refactors.
BE 07 · MONETISASI ↗Kunci pembeda hobi vs bisnis mandiri: Stripe Checkout, webhook event, verifikasi pembayaran aman, dan sistem lisensi. The barrier between hobby and viable business: Stripe Checkout, webhook triggers, secure payment events, and customer subscriptions.
Hubungkan aplikasi kustommu dengan kemampuan Retrieval-Augmented Generation (RAG) tanpa harus membangun pipeline embedding manual yang rumit. Connect your app with Retrieval-Augmented Generation (RAG) without hand-rolling complex vector embedding infrastructure.
Teori tanpa karya nyata itu seperti resep tanpa makanan. Pilih proyek sesuai bidang impianmu dan buktikan kemampuanmu! 🏆 Theory without projects is like recipes without meals. Pick projects aligned with your goals and build proof-of-work! 🏆
Aplikasi interaktif yang memadukan gambar AI bergerak dan obrolan karakter magis seperti di film Harry Potter. Interactive canvas blending AI character generation and dynamic motion portraits reminiscent of Hogwarts lore.
PROYEK 02 · CAPSTONE SAAS ↗Proyek pamungkas Level 2: aplikasi bisnis AI lengkap dengan registrasi user, database kuota, dashboard, dan checkout pembayaran. The Level 2 capstone: commercial AI app complete with user auth, quota tracking, dashboards, and paid checkout.
PROYEK 03 · EDUKASI ↗Platform simulasi ujian digital, scoring otomatis, manajemen bank soal, dan dashboard rekap nilai siswa. Digital exam simulator featuring auto-grading, question banks, and admin analytics dashboards.
PROYEK 04 · GENERATIF ↗Landing page & antarmuka generator gambar canggih dengan filter gaya, preview instan, dan galeri komunitas. Sleek landing page & generative image studio with style presets, instant previews, and community showcase.
PROYEK 05 · AI AGENT ↗Bangun platform tempat pengguna bisa meracik prompt agent mereka sendiri dan mempublikasikannya sebagai chatbot siap pakai. Build a modular workspace where users assemble custom AI agents and publish shareable chatbots.
PROYEK 06 · PRODUCTIVITY ↗Agen cerdas penyusun jadwal liburan harian, estimasi budget, rekomendasi rute terpadu, dan ekspor ke PDF. Intelligent itinerary planner calculating day-by-day routes, estimated budgets, and printable vacation guides.
PROYEK 07 · ENTERPRISE ↗Eksplorasi backend Java/Spring Boot: algoritma filtering rekomendasi film, relational schema, dan arsitektur enterprise. Java/Spring Boot ecosystem exploration: movie recommendation algorithms, relational schemas, and enterprise patterns.
PROYEK 08 · ARSITEKTUR ↗Pemisahan service katalog produk, service keranjang belanja, dan service order secara modular dan tahan banting. Modular microservices architecture splitting catalog, shopping cart, and order processing services.
PROYEK 09 · DATA & GO ↗Pemrosesan data berkecepatan tinggi dengan bahasa Go (Golang), disajikan ke dashboard visual chart interaktif. High-concurrency data crunching in Go (Golang) paired with dynamic real-time traffic charts and interactive heatmaps.
Jalur kilat menuju produk komersial:
1. Kuasai Backend 1 (Supabase) + Backend 2 (API) untuk fondasi data.
2. Kerjakan Proyek 2 (SaaS Copywriting) dari nol.
3. Sambungkan Backend 7 (Stripe) dan deploy via Backend 4 (Vercel/Zeabur).
Frontend bisa dipercantik sambil jalan menggunakan Frontend 7 (Modern Component Libraries). Produk jalan > produk sempurna! 💪 Express path to a commercial product:
1. Master Backend 1 (Supabase) + Backend 2 (API) for data plumbing.
2. Build Project 2 (AI Copywriting SaaS) end to end.
3. Hook up Backend 7 (Stripe) and deploy through Backend 4 (Vercel/Zeabur).
Polish UI incrementally using Frontend 7 (Modern Component Libraries). Shipped product > perfect idea! 💪