Beranda / Pelatihan /Fullstack Web & Cloud Engineering

bootcampPemula - MenengahProgram Unggulan

Fullstack Web & Cloud Engineering

Arsitektur frontend modern, sistem backend terdistribusi, dan cloud deployment praktis

Program intensif yang dirancang untuk membekali peserta dengan fondasi rekayasa perangkat lunak modern: dari arsitektur frontend dengan Vue 3 / Nuxt, perancangan API RESTful & PostgreSQL, integrasi database realtime Supabase, hingga automasi CI/CD dan cloud deployment.

Daftar Kelas Ini Lihat Rincian Silabus

Durasi Total

12 Minggu (120 Jam)

Jadwal Sesi

Selasa & Kamis (19:30 - 21:30 WIB) + Sesi Proyek Sabtu

Metode Belajar

Live Online & Mentoring 1-on-1

Investasi / Biaya

Beasiswa Penuh / Terbuka

Teknologi yang Diajarkan:

Vue.jsNuxt 3TypeScriptTailwind CSSSupabasePostgreSQLNode.jsDockerGit & GitHub

TARGET KOMPETENSI

Apa yang Akan Anda Kuasai?

Setiap lulusan diarahkan untuk memiliki pemahaman konseptual yang kokoh dan kapabilitas eksekusi teknis tingkat produksi.

Menguasai ekosistem modern JavaScript & TypeScript tingkat lanjut

Mampu merancang basis data relasional & skema PostgreSQL performa tinggi

Membangun aplikasi fullstack produksi dari nol hingga deployment awan

Menghasilkan 3 proyek portofolio berstandar industri siap presentasi

SILABUS & RENCANA PEMBELAJARAN

Modul Kurikulum Lengkap

Struktur pembelajaran modul per minggu dari fondasi dasar hingga capstone project skala industri.

Modul 01

Modul 01: Fondasi Rekayasa Web, JavaScript Modern & TypeScript Dasar

Minggu 1-2 · 20 Jam▾

Membangun dasar berpikir komputasional, struktur data modern di JavaScript (ES6+), type safety dengan TypeScript, dan standar code formatting dengan ESLint.

Pokok Bahasan Materi:

Ekosistem Web Modern & Runtime JavaScript (Node.js & Bun)

TypeScript Fundamentals: Types, Interfaces, Generics & Utility Types

Asynchronous Programming: Promises, Async/Await & Event Loop

Git Workflow: Feature branching, Pull Requests, Code Review, Semantic Versioning

Output Capstone / Praktikum:

CLI Tool & Package TypeScript untuk manipulasi data terstruktur dengan unit test.

Modul 02

Modul 02: Arsitektur Komponen Reaktif dengan Vue 3 & Nuxt 3

Minggu 3-4 · 20 Jam▾

Mendalami Composition API, Reactivity System, State Management dengan Pinia, File-based Routing di Nuxt 3, dan Server-Side Rendering (SSR).

Pokok Bahasan Materi:

Vue 3 Composition API: ref, computed, watch, provide/inject

Nuxt 3 Architecture: Server Routes, Middlewares, Plugins, Composables

Global State Management dengan Pinia & Persistence Pattern

Optimasi Rendering: SSR, Hydration, Lazy Loading, Asset Bundling

Output Capstone / Praktikum:

Aplikasi Dashboard Admin Interaktif dengan multi-role routing dan state persistence.

Modul 03

Modul 03: Desain Sistem & Antarmuka Responsif Berstandar Swiss Neo-Brutalism

Minggu 5-6 · 20 Jam▾

Menerapkan prinsip desain antarmuka internasional, tipografi terstruktur, Tailwind CSS utility-first, dan integrasi komponen shadcn-vue / reka-ui.

Pokok Bahasan Materi:

Prinsip Swiss Style & Neo-Brutalist Layouts: Kontras Tinggi & Tipografi Grid

Tailwind CSS v4: Custom Tokens, Fluid Layouts, Dynamic Viewport (`100dvh`)

Komponen Aksesibel (shadcn-vue / Reka UI / Radix): Dialog, Table, Form, Drawer

Aksesibilitas Web (WCAG AA) & Keyboard Navigation Navigation Flow

Output Capstone / Praktikum:

Desain Sistem Komponen Lengkap dengan Storybook / Dokumentasi Interaktif.

Modul 04

Modul 04: Backend API, Otentikasi & Database PostgreSQL / Supabase

Minggu 7-8 · 20 Jam▾

Merancang basis data relasional ternormalisasi, schema migrations, Row Level Security (RLS), OAuth / Email Auth, dan Realtime subscriptions.

Pokok Bahasan Materi:

Database Modeling & Relational Schema Design di PostgreSQL

Supabase Deep Dive: Database, Auth (PKCE Flow), Storage, Edge Functions

Row Level Security (RLS) Policies & Role-based Data Access Control

REST API Design & Server Endpoints di Nitro / Nuxt Server

Output Capstone / Praktikum:

Sistem Manajemen Data & Portofolio Lengkap dengan Otentikasi & RLS Aman.

Modul 05

Modul 05: Keamanan Aplikasi, Pengujian & Kinerja Skala Tinggi

Minggu 9-10 · 20 Jam▾

Menerapkan praktik sanitasi input, rate limiting, perlindungan CSRF/XSS, automated testing dengan Vitest, dan audit performa Core Web Vitals.

Pokok Bahasan Materi:

Web Security Best Practices: OWASP Top 10, Turnstile, Rate Limiting Middleware

Automated Unit & Integration Testing dengan Vitest

Core Web Vitals Audit: LCP, INP, CLS & Caching Strategies

SEO Optimization: Dynamic Open Graph Image Generation & Structured Data JSON-LD

Output Capstone / Praktikum:

Paket Pengujian Otomatis & Security Hardening pada Aplikasi Web Produksi.

Modul 06

Modul 06: Capstone Project: Membangun Aplikasi Skala Produksi & CI/CD Cloud

Minggu 11-12 · 20 Jam▾

Mengerjakan proyek akhir riil dari tahap perancangan hingga deployment ke cloud hosting (Cloudflare Pages, Vercel, VPS Docker) dengan CI/CD otomatis.

Pokok Bahasan Materi:

Containerization dengan Docker & Multi-stage Builds

Automated CI/CD Pipeline dengan GitHub Actions

Serverless Deployment ke Cloudflare / Edge Infrastructure

Final Capstone Showcase & Code Review bersama Mentor Industri

Output Capstone / Praktikum:

Capstone Project: Aplikasi Web Produksi Terdistribusi Siap Diluncurkan ke Pengguna.

KETENTUAN AWAL

Prasyarat Peserta

Dasar algoritma & logika pemrograman dasar
Koneksi internet stabil & laptop/PC (RAM min. 8GB disarankan)
Komitmen belajar 8-10 jam per minggu

PROFIL PESERTA

Untuk Siapa Program Ini?

Siswa SMK Kejuruan Rekayasa Perangkat Lunak (RPL)
Mahasiswa Ilmu Komputer / Sistem Informasi / Teknik Informatika
Career Switcher yang ingin berkarir sebagai Software Engineer

BAHAN AJAR & MODUL

Materi Pembelajaran Terkait

modul Akses Terbuka

Buku Panduan: Clean Architecture & Type Safety di Ekosistem TypeScript

Panduan komprehensif menyusun struktur folder yang rapi, pemisahan layer logika bisnis dengan antarmuka, serta aturan type safety di TypeScript.

45 Halaman PDF Unduh / Buka

source_code Akses Terbuka

Starter Template: Nuxt 3 + Supabase + Tailwind CSS 4 + Shadcn

Boilerplate produksi siap pakai dengan autentikasi PKCE, modul database, dark mode, dan library komponen terkonfigurasi.

Repositori GitHub Unduh / Buka

cheatsheet Akses Terbuka

Cheatsheet: Swiss Neo-Brutalism UI & WCAG AA Contrast Rules

Rujukan cepat ukuran font hierarchy, rumus kontras warna 4.5:1, dynamic viewport (`min-h-[100dvh]`), dan anti-slop frontend checklist.

1 Lembar Rujukan Cepat

PENDAFTARAN RESMI

Formulir Masuk: Fullstack Web & Cloud Engineering

Lengkapi formulir di bawah ini untuk proses registrasi dan wawancara orientasi program.