[JALUR BELAJAR B2]4 MODUL PEMBELAJARAN PRAKTIS

Rekayasa Frontend Reaktif (React/Next.js) & Interaksi 3D WebGL

Membangun Pengalaman Web Imersif: Server Components, Motion & Three.js 60fps

Kuasai model mental React 19, arsitektur Next.js 16 App Router (Server vs Client Components & SSR Metadata), koreografi scroll GSAP/Lenis, dan grafika 3D WebGL.

[TARGET PEMBELAJAR]

Frontend developer yang ingin meningkatkan portofolio ke standar studio rekayasa kreatif kelas dunia.

[PROYEK CAPSTONE AKHIR JALUR]

SINTESIS PRAKTIK

Showcase Produk 3D Interaktif dengan Dynamic SSR Open Graph

Membangun aplikasi Next.js 16 App Router yang merender model 3D GLB responsif dan kartu pratinjau sosial otomatis untuk WhatsApp dan Twitter.

[SILABUS KURIKULUM BERURUTAN // 4 MODUL MANDIRI]

URL PUBLIK & DAPAT DIBAGIKAN

1[B2-M1]Menengah⏱ 35 Mnt Baca + 50 Mnt Praktik

Model Mental React 19: State, Props, Re-rendering & Komposisi

Pahami bagaimana React 19 menyinkronkan state dengan DOM, peran immutability, pemisahan container vs presentational component, dan optimalisasi render.

Artefak Dibangun: Komponen kalkulator interaktif terisolasi `CounterIslands.tsx`.

BUKA MODUL→Lulus ≥ 80 Poin

2[B2-M2]Menengah⏱ 40 Mnt Baca + 60 Mnt Praktik

Next.js App Router: Server vs Client Components, Routing & SSR Metadata

Pelajari cara memisahkan Server Components (Zero-Bundle Size) dan Client Components ('use client'), menghasilkan kartu Open Graph dinamis, dan menghubungkan REST API.

Artefak Dibangun: Fitur kalkulator estimator layanan interaktif dengan SSR Open Graph di Next.js 16.

BUKA MODUL→Lulus ≥ 80 Poin

3[B2-M3]Menengah⏱ 35 Mnt Baca + 55 Mnt Praktik

Koreografi Scroll & Motion Terukur dengan GSAP dan Lenis

Pelajari integrasi smooth scrolling Lenis dengan timeline GSAP, paralaks bermakna, dan penanganan ketat mode prefers-reduced-motion.

Artefak Dibangun: Skrip koreografi `smooth-scroll-scene.js`.

BUKA MODUL→Lulus ≥ 80 Poin

4[B2-M4]Mahir⏱ 45 Mnt Baca + 70 Mnt Praktik

Pengantar 3D WebGL di Browser: Three.js Scene, Kamera & GLTF

Pelajari fondasi grafika komputer di browser: Scene, PerspectiveCamera, WebGLRenderer, pemuatan model .glb lokal, dan pembersihan memori GPU.

Artefak Dibangun: Kanvas 3D mandiri `minimal-three-scene.html`.

BUKA MODUL→Lulus ≥ 80 Poin