Akses Selamanya
Masuk /
Daftar
Kelas Online
Mastering Next JS 2026: Build E-Sim Website
Released date March 2026
Last updated March 2026
Member
2 enrolled
Lesson Type
Video Only
Tingkatan
Sertifikat
Konsultasi
59 lessons (9.33 hours)
Develop Your Skills
Kelas ini membahas studi kasus pengembangan website e-SIM Roamio dengan fokus utama pada Frontend Development dan alur bisnis yang realistis. Kamu akan belajar bagaimana membangun sebuah aplikasi modern mulai dari tampilan, state, hingga integrasi API—tanpa bergantung pada backend sungguhan.
Pendekatan yang digunakan di kelas ini sangat cocok untuk frontend developer, karena kamu akan berlatih membangun fitur menggunakan mock API. Dengan cara ini, kamu bisa memahami workflow frontend secara menyeluruh, bahkan ketika backend belum tersedia—sebuah kondisi yang sangat sering terjadi di dunia kerja.
Di kelas ini, kamu akan membangun aplikasi e-SIM dari nol, mencakup:
- Landing page produk e-SIM
- Daftar paket dan detail produk
- Flow pembelian hingga checkout
- Simulasi pembayaran
- Simulasi email notifikasi ke user
- Semua fitur dibangun dengan fokus pada UI, UX, dan flow aplikasi, bukan sekadar tampilan statis.
Kelas ini menggunakan stack modern yang umum dipakai di industri:
- Next.js sebagai framework frontend utama
- Tailwind CSS untuk styling cepat dan konsisten
- Mock Service Worker (MSW) untuk simulasi API dan data
- Stripe untuk simulasi alur pembayaran
- Resend untuk simulasi pengiriman email ke user
- Catatan penting: integrasi API dilakukan menggunakan mock MSW, sehingga kelas ini fokus ke frontend dan workflow, bukan implementasi backend production.
Setelah menyelesaikan kelas ini, kamu akan memiliki:
- Aplikasi e-SIM berbasis frontend dengan flow lengkap
- Pengalaman integrasi API menggunakan MSW
- Pemahaman workflow frontend tanpa backend real
- Project studi kasus yang layak masuk portfolio
- Insight bagaimana frontend bekerja dalam konteks bisnis digital
Key Points
Menyusun struktur project Next.js untuk aplikasi nyata
Mengelola state dan data dari mock API
Membuat UI modern menggunakan Tailwind
Mensimulasikan integrasi pembayaran menggunakan stripe
Memahami alur checkout dan user journey
Mensimulasikan email notifikasi setelah transaksi
Mengikuti workflow frontend seperti di tim profesional
Designed For
Frontend developer yang ingin naik level lewat studi kasus nyata
Pemula yang sudah memahami dasar React atau Next.js
UI/UX designer yang ingin memahami implementasi desain ke aplikasi
Developer yang ingin membangun portfolio berbasis studi kasus
Siapa pun yang ingin memahami alur frontend modern secara praktis
Course Lessons
Videos language: Bahasa Indonesia (Auto-translation available)
Learn With Expert
Febri Wardhana
Frontend Developer
(446)
Tools Pendukung
Lengkapi semua pendukung di bawah sebelum belajar
Visual Studio Code
Software
GitHub
Software
Figma
Software
Tailwind CSS
Software
Next JS
Software
Low Risk, High Return
Investasi kepada diri kita sendiri memberikan
leverage kuat untuk
masa depan karir kita
Selamanya
Rp 690,000
Miliki kelas Premium secara permanen dan bangun sebuah projek nyata
Akses kelas selamanya
Premium rewards
Career consultation
Assets & group konsultasi
Sertifikat kelulusan
Lowongan magang dan kerja
Recommended for You
.png)
Furnice Architecture Elementor Kit
Rp
320,000
Rp
32,000
(5)
Trilink - Construcition Site Figma Template UI Kit
Rp
150,000
Rp
50,000
(4)
Verve - AI Chat Assistant Figma Template UI Kit
Rp
150,000
Rp
50,000
(3)
.png)
Timbercamp - Camping Site Landing Page Figma Template UI Kit
Rp
150,000
Rp
45,000
(3)
Pertanyaan Umum
Langkah yang tepat untuk berinvestasi kepada
ilmu
pengetahuan yang baru di bidang IT
Tingkatan kelas Premium yang kami miliki dibangun untuk All Levels
yang memberartikan bahwa cocok untuk seluruh
tingkatan. Kami juga menyarankan calon member untuk
mengikuti kelas Starter (gratis) terlebih dahulu sebagai permulaan.
Sertifikat kelulusan kelas hanya tersedia pada kelas Premium. Dan
untuk mendapatkannya, para member diwajibkan untuk
menyelesaikan seluruh materi kelas dan juga Quiz
yang telah disediakan oleh mentor.
Salah satu benefit unggulan kami adalah group
konsultasi yang diberikan sebagai bonus untuk member
yang telah mengikuti kelas Premium di platform BuildWithAngga.
Silakan menghubungi Admin untk mendapatkan akses pada group
tersebut.
Kami mengizinkan member yang telah mengikuti kelas Premium untuk
menjual kembali projek kelas kepada klien, perusahaan, etc. Syarat
utamanya adalah dengan memodifikasi sedikitnya yaitu
30% dari original project buatan mentor kelas tersebut.
Kami melarang member menjual atau membagikan hak akses kelas Premium
kepada orang lain yang tidak terdaftar pada kelas tersebut. Mari
kita support creators Indonesia dengan cara membeli
kelas secara resmi dan satu akun hanya untuk satu pengguna saja.
Kami tidak memperbolehkan member menjual kembali materi kelas di
BuildWithAngga. Kami siap melanjutkan kepada proses
hukum apabila Anda terbukti benar memperjualbelikan kelas
kami secara ilegal.
Mastering Next JS 2026: Build E-Sim Website
Videos language: Bahasa Indonesia (Auto-translation available)
-
Initialize ProjectVideo 4 minutes -
Initialize StorybookVideo 7 minutes
-
Setup Tailwind Theme ColorVideo 3 minutes
-
Setup Tailwind FontVideo 10 minutes
-
Slicing Button 1Video 11 minutes
-
Slicing Button 2Video 9 minutes
-
Slicing NavbarVideo 15 minutes
-
Slicing InputVideo 9 minutes
-
Slicing Hero Section 1Video 8 minutes
-
Slicing Hero Section 2Video 13 minutes
-
Slicing Country List 1Video 13 minutes
-
Slicing Country List 2Video 9 minutes
-
Slicing Country List 3Video 3 minutes
-
Slicing Step SectionVideo 11 minutes
-
Slicing Testimonial Section 1Video 13 minutes
-
Slicing Testimonial Section 2Video 13 minutes
-
Slicing FAQ 1Video 12 minutes
-
Slicing FAQ 2Video 8 minutes
-
Slicing FAQ 3Video 12 minutes
-
Slicing Footer Section 1Video 12 minutes
-
Slicing Footer Section 2Video 9 minutes
-
Finalize Slicing Home PageVideo 12 minutes
-
Slicing Hero Checkout 1Video 7 minutes
-
Slicing Hero Checkout 2Video 14 minutes
-
Slicing Hero Checkout 3Video 10 minutes
-
Slicing Hero Checkout 4Video 5 minutes
-
Slicing Hero Checkout 5Video 5 minutes
-
Slicing Hero Checkout 6Video 15 minutes
-
Slicing Hero Checkout 7Video 11 minutes
-
Slicing Hero Checkout 8Video 7 minutes
-
Finalize Checkout PageVideo 6 minutes
-
Slicing Login Page 1Video 11 minutes
-
Slicing Login Page 2Video 10 minutes
-
Slicing Register PageVideo 4 minutes
-
Initialize & Setup MSW 1Video 9 minutes
-
Initialize React Query & AxiosVideo 5 minutes
-
Initialize & Setup MSW 2Video 8 minutes
-
Integration Country List API 1Video 8 minutes
-
Integration Country List API 2Video 8 minutes
-
Mockup Country List APIVideo 8 minutes
-
Integration Product Detail APIVideo 9 minutes
-
Mockup Product Detail API 1Video 11 minutes
-
Mockup Product Detail API 2Video 9 minutes
-
Integration Country Detail API 1Video 8 minutes
-
Integration Login API 1Video 13 minutes
-
Integration Register APIVideo 9 minutes
-
Finalize Auth Page RedirectVideo 6 minutes
-
Integration Checkout APIVideo 11 minutes
-
Integration Country List API 3Video 7 minutes
-
Integration Country Detail API 2Video 12 minutes
-
Integration Country Detail API 3Video 8 minutes
-
Integration Login API 2Video 9 minutes
-
Setup & Integration StripeVideo 12 minutes
-
Slicing Success PageVideo 12 minutes
-
Slicing Email Template 1Video 14 minutes
-
Integration Resend 1Video 10 minutes
-
Setup & Integration Stripe 2Video 8 minutes
-
Slicing Email Template 2Video 14 minutes
-
Integration Resend 2Video 11 minutes
Member
2
Lesson Type
Video Only
Tingkatan
Sertifikat
Konsultasi
Develop Your Skills
Kelas ini membahas studi kasus pengembangan website e-SIM Roamio dengan fokus utama pada Frontend Development dan alur bisnis yang realistis. Kamu akan belajar bagaimana membangun sebuah aplikasi modern mulai dari tampilan, state, hingga integrasi API—tanpa bergantung pada backend sungguhan.
Pendekatan yang digunakan di kelas ini sangat cocok untuk frontend developer, karena kamu akan berlatih membangun fitur menggunakan mock API. Dengan cara ini, kamu bisa memahami workflow frontend secara menyeluruh, bahkan ketika backend belum tersedia—sebuah kondisi yang sangat sering terjadi di dunia kerja.
Di kelas ini, kamu akan membangun aplikasi e-SIM dari nol, mencakup:
- Landing page produk e-SIM
- Daftar paket dan detail produk
- Flow pembelian hingga checkout
- Simulasi pembayaran
- Simulasi email notifikasi ke user
- Semua fitur dibangun dengan fokus pada UI, UX, dan flow aplikasi, bukan sekadar tampilan statis.
Kelas ini menggunakan stack modern yang umum dipakai di industri:
- Next.js sebagai framework frontend utama
- Tailwind CSS untuk styling cepat dan konsisten
- Mock Service Worker (MSW) untuk simulasi API dan data
- Stripe untuk simulasi alur pembayaran
- Resend untuk simulasi pengiriman email ke user
- Catatan penting: integrasi API dilakukan menggunakan mock MSW, sehingga kelas ini fokus ke frontend dan workflow, bukan implementasi backend production.
Setelah menyelesaikan kelas ini, kamu akan memiliki:
- Aplikasi e-SIM berbasis frontend dengan flow lengkap
- Pengalaman integrasi API menggunakan MSW
- Pemahaman workflow frontend tanpa backend real
- Project studi kasus yang layak masuk portfolio
- Insight bagaimana frontend bekerja dalam konteks bisnis digital
read more
Learn With Expert
Key Points
-
Menyusun struktur project Next.js untuk aplikasi nyata
-
Mengelola state dan data dari mock API
-
Membuat UI modern menggunakan Tailwind
-
Mensimulasikan integrasi pembayaran menggunakan stripe
-
Memahami alur checkout dan user journey
-
Mensimulasikan email notifikasi setelah transaksi
-
Mengikuti workflow frontend seperti di tim profesional
Created For
-
Frontend developer yang ingin naik level lewat studi kasus nyata
-
Pemula yang sudah memahami dasar React atau Next.js
-
UI/UX designer yang ingin memahami implementasi desain ke aplikasi
-
Developer yang ingin membangun portfolio berbasis studi kasus
-
Siapa pun yang ingin memahami alur frontend modern secara praktis
For Your Career
Akses Selamanya
Belajar lebih santai & produktif
Assets & Grup Private
Diskusi belajar agar lebih terarah
Sertifikat & Portfolio
Gunakan untuk modal bekerja
2
Happy Students
Happy Students
Belum ada review
Tools Pendukung
Pertanyaan Umum
Langkah yang tepat untuk berinvestasi kepada
ilmu
pengetahuan yang baru di bidang IT
Tingkatan kelas Premium yang kami miliki dibangun untuk All Levels
yang memberartikan bahwa cocok untuk seluruh
tingkatan. Kami juga menyarankan calon member untuk
mengikuti kelas Starter (gratis) terlebih dahulu sebagai permulaan.
Sertifikat kelulusan kelas hanya tersedia pada kelas Premium. Dan
untuk mendapatkannya, para member diwajibkan untuk
menyelesaikan seluruh materi kelas dan juga Quiz
yang telah disediakan oleh mentor.
Salah satu benefit unggulan kami adalah group
konsultasi yang diberikan sebagai bonus untuk member
yang telah mengikuti kelas Premium di platform BuildWithAngga.
Silakan menghubungi Admin untk mendapatkan akses pada group
tersebut.
Kami mengizinkan member yang telah mengikuti kelas Premium untuk
menjual kembali projek kelas kepada klien, perusahaan, etc. Syarat
utamanya adalah dengan memodifikasi sedikitnya yaitu
30% dari original project buatan mentor kelas tersebut.
Kami melarang member menjual atau membagikan hak akses kelas Premium
kepada orang lain yang tidak terdaftar pada kelas tersebut. Mari
kita support creators Indonesia dengan cara membeli
kelas secara resmi dan satu akun hanya untuk satu pengguna saja.
Kami tidak memperbolehkan member menjual kembali materi kelas di
BuildWithAngga. Kami siap melanjutkan kepada proses
hukum apabila Anda terbukti benar memperjualbelikan kelas
kami secara ilegal.
