Masuk /
Daftar
Our Happy Students
Review setelah bergabung di kelas Full-Stack JavaScript Developer 2021: Website Top Up Voucher Game
Kelas Online
Full-Stack JavaScript Developer 2021: Website Top Up Voucher Game
Learn complete JavaScript and become Full-Stack Web Developer
Release date August 2021
Last updated October 2024
Member
4,336 enrolled
Tingkatan
Sertifikat
Konsultasi
Develop Your Skills
MERN Stack adalah pengembangan website dari Front-End sampai Back-End dengan memakai satu bahasa pemrograman yaitu Javascript. MERN adalah singkatan beberapa teknologi pengembangan yang powerful: M untuk MongoDB (Database); E untuk Express (Framework); R untuk ReactJS (FE); dan N untuk NextJS (FE) dan NodeJS (core BE).
Faktanya, Javascript telah dikenal sangat populer dan fleksibel karena dapat digunakan bersamaan dengan bahasa pemrograman lain. Mampu bekerja pada sisi FE dan BE sekaligus, Javascript dapat menciptakan tampilan website menarik dan mengatur logika data dengan baik. Di dunia pemrograman, Javascript telah banyak memberikan bermanfaat selama 25 tahun, dan memahami Javascript melalui kelas ini dapat menjadi investasi yang berharga untuk karir Anda sebagai Developer dalam jangka panjang.
Pada kelas ini, kita akan membuat project yang kompleks berupa website top up game “STORE GG”. Materi dimulai dari sisi FE antara lain mengubah template HTML desain yang sudah kita slicing ke dalam NextJS. Untuk mengelola data berskala besar dengan mudah, library component akan diatur sesuai prinsip Atomic Design. Pada sisi BE, framework utama NodeJS digunakan untuk proses routing, middleware, database integration hingga testing. CRUD (Create, Read, Update, Delete) juga akan digunakan untuk mengatur konten database sesuai kebutuhan. Lalu integrasi API diimplementasikan pada kedua sisi guna memungkinkan akses data pada satu server yang sama. Setelah selesai, project disimpan di GitHub dan diunggah ke platform real-time untuk memudahkan update data di kemudian hari.
Kelas ini cocok bagi Anda yang ingin mendalami pengembangan website dengan Javascript. Dengan mengetahui keseluruhan prosesnya dengan baik dan benar, kita dapat meningkatkan skill sebagai Developer dan tentunya aplikasi yang dihasilkan kedepannya akan semakin berkualitas. Agar belajar lebih mudah, harap pahami terlebih dulu fundamental Javascript, React, dan Database. Dan silahkan juga bertanya kepada Mentor ahli kami di grup konsultasi. Daftar sekarang dan sampai jumpa di kelas!
Sneak Peek
Key Points
Mendeploy project ke Vercel (Front-End) dan Heroku (Back-End)
Mengintegrasikan NodeJS REST API dengan ReactJS (NextJS)
Membuat fitur Sign Up dan Sign In
Membuat CRUD yang mencakup login dengan JWT
Membuat Storybook untuk membangun component library pada React
Mengolah database dengan MongoDB
Melakukan konversi HTML ke NextJS
Memahami pengembangan website secara utuh (Front-End dan Back-End)
Designed For
Anda yang ingin menjadi Full-Stack Developer
Anda yang ingin menjadi Javascript Developer
Anda yang ingin membangun portofolio web yang scalable dan menjual
Anda yang ingin membangun fitur Register dan Login pada website
Anda yang ingin membangun website dengan high quality design
Anda yang ingin menguasai pengembangan website
Course Lessons
Learn With Expert
Elfin Sanjaya
Full-Stack Developer
(37.6K)
Prawito Hudoro
Full-Stack Developer
(35.6K)
.png)
Angga Risky
Full-Stack Developer
(413.2K)
Rifan Hilmie
Full-Stack Developer
Materi yang lengkap dan terstruktur memudahkan saya untuk memahami materi secara komprehensif read more
Belum ada review
Tools Pendukung
Lengkapi semua pendukung di bawah sebelum belajar
#BeyondPremium
Tampaknya kelas ini sedang menutup pendaftaran baru.
Silahkan menunggu pendaftaran batch selanjutnya.
Silahkan menunggu pendaftaran batch selanjutnya.
Similar Courses
Full-Stack Web Developer
Rp 390,000
(10,938)
(5,753)
.png)
.png)
Full-Stack Web Developer: Toko Online
Rp 550,000
(5,401)
Full-Stack JavaScript Developer 2021: Website Top Up Voucher Game
Learn complete JavaScript and become Full-Stack Web Developer
-
Perkenalan Mentor Product Designer Angga1 minutes
-
Perkenalan Mentor Prawito1 minutes
-
Installasi NextJS dan Project Structure4 minutes -
Installasi Storybook3 minutes
-
Eslint Setup3 minutes
-
VSCode Setup (Extensions & Shortcut)5 minutes
-
Convert HTML to React Introduction4 minutes
-
Convert Landing Page20 minutes
-
Convert Detail Page7 minutes
-
Convert Checkout Page3 minutes
-
Convert Completed Checkout3 minutes
-
Convert Sign In Page3 minutes
-
Convert Sign Up Page2 minutes
-
Convert Sign Up Photo Page2 minutes
-
Convert Sign Up Success Page2 minutes
-
Convert 404 Page2 minutes
-
Convert Member Overview Page5 minutes
-
Convert Member Transactions Page3 minutes
-
Convert Member Transaction Detail Page3 minutes
-
Convert Member Edit Profile2 minutes
-
Atomic Design Structure Introduction9 minutes
-
Refactor Navbar to Organisms21 minutes
-
Refactor Login Navbar Component10 minutes
-
Refactor Main Banner Component5 minutes
-
Refactor Transaction Step Component12 minutes
-
Refactor Featured Game Component12 minutes
-
Refactor Reached, Story, Footer5 minutes
-
Refactor Detail Page7 minutes
-
Refactor Checkout Page7 minutes
-
Refactor Authentication Page8 minutes
-
Refactor Member Sidebar16 minutes
-
Refactor Overview Content18 minutes
-
Refactor Edit Profile12 minutes
-
Refactor Member Transaction13 minutes
-
Refactor Member Transaction Detail7 minutes
-
Storybook Introduction5 minutes
-
Component Input Stories10 minutes
-
Global Style di Storybook5 minutes
-
Molecules Stories14 minutes
-
Mengenal NodeJS1 minutes
-
Konfigurasi dan Instalasi NodeJS3 minutes
-
Mengenal NPM2 minutes
-
Membuat projek baru7 minutes
-
Membuat module3 minutes
-
Module NPM4 minutes
-
Membuat Scripts di package.json2 minutes
-
Menangani routing3 minutes
-
Framework di NodeJS2 minutes
-
Kesimpulan1 minutes
-
Mengenal framework ExpressJS5 minutes
-
Routing pada ExpressJS17 minutes
-
Middleware pada Express JS5 minutes
-
Kesimpulan1 minutes
-
Instalasi dan konfigurasi MongoDB5 minutes
-
Query dasar MongoDB13 minutes
-
Kesimpulan1 minutes
-
Konfigurasi MongoDB & ExpressJS4 minutes
-
Menerapkan MongoDB kedalam ExpressJS (CRUD) - PART 17 minutes
-
Menerapkan MongoDB kedalam ExpressJS (CRUD) - PART 29 minutes
-
Mengenal ODM pada MongoDB→Part 110 minutes
-
Mengenal ODM pada MongoDB→Part 26 minutes
-
Menerapkan Mongoose pada ExpressJS11 minutes
-
Kesimpulan1 minutes
-
Membuat project baru dengan Express Generator dan konfigurasi awal→Part 110 minutes
-
Membuat project baru dengan Express Generator dan konfigurasi awal→Part26 minutes
-
Instalasi adminLTE dan konfigurasi template admin12 minutes
-
Convert adminLTE kedalam halaman kategori8 minutes
-
Mengelola halaman kategori (CRUD)→ Create12 minutes
-
Mengelola halaman kategori (CRUD)→Read4 minutes
-
Mengelola halaman kategori (CRUD)→ Update10 minutes
-
Mengelola halaman kategori (CRUD)→Delete3 minutes
-
Notif (connect-flash, express-session) & Title Dinamis11 minutes
-
Mengelola halaman nominal (CRUD)→Craete11 minutes
-
Mengelola halaman nominal (CRUD)→Read2 minutes
-
Mengelola halaman nominal (CRUD)→Update4 minutes
-
Mengelola halaman nominal (CRUD)→Delete2 minutes
-
Mengelola halaman voucher (CRUD)→Part 1 Create14 minutes
-
Mengelola halaman voucher (CRUD)→Part 2 Create11 minutes
-
Mengelola halaman voucher (CRUD)→Read9 minutes
-
Mengelola halaman voucher (CRUD)→ Update12 minutes
-
Mengelola halaman voucher (CRUD)→Delete2 minutes
-
Mengelola halaman voucher (CRUD)→ Update Status3 minutes
-
Mengelola halaman bank (CRUD)→ Create7 minutes
-
Mengelola halaman bank (CRUD) Part 2 Read2 minutes
-
Mengelola halaman bank (CRUD) Part 3 Update4 minutes
-
Mengelola halaman bank (CRUD) Part 4 Delete1 minutes
-
Mengelola halaman payment (CRUD) Part 1 Create8 minutes
-
Mengelola halaman payment (CRUD) Part 2 Read3 minutes
-
Mengelola halaman payment (CRUD) Part 3 Update5 minutes
-
Mengelola halaman payment (CRUD) Part 4 Delete1 minutes
-
Mengelola halaman signin admin4 minutes
-
Action signin admin dan middleware auth17 minutes
-
Membuat logout, menampilkan user yang login dan title dinamis9 minutes
-
Mengelola halaman transaksi24 minutes
-
Konfirmasi Transaksi dan Tolak Transaksi4 minutes
-
Mengelola halaman beranda11 minutes
-
Review halaman admin3 minutes
-
Membuat api landing page10 minutes
-
Membuat api detail page5 minutes
-
Membuat api signup17 minutes
-
Membuat api category2 minutes
-
Membuat api signin8 minutes
-
Membuat api checkout24 minutes
-
Membuat api history transaksi9 minutes
-
Membuat api detail history transaksi4 minutes
-
Membuat api dashbaord8 minutes
-
Membuat api read profile5 minutes
-
Membuat api ubah profile14 minutes
-
Membuat dokumentasi api dengan postman dan Install cors4 minutes
-
Simpan projek kedalam github4 minutes
-
Deploy ke Heroku20 minutes
-
Menjalankan API documentation di Postman4 minutes
-
Sample Integration di NextJS13 minutes
-
Membuat configurasi API services12 minutes
-
Membuat API data types6 minutes
-
Setup routing dinamis voucher detail7 minutes
-
Integrasi Voucher Detail11 minutes
-
Setup Nominal dan Payment Component11 minutes
-
Integrasi Nominal dan Payment9 minutes
-
Setup Number Format4 minutes
-
Membuat Voucher Data Types5 minutes
-
Setup Sign-Up Form14 minutes
-
Mendapatkan Value Select Option10 minutes
-
Upload Photo dan Integrasi Sign-Up19 minutes
-
Validasi Sign-up dan Error Modal12 minutes
-
Integrasi Sign-In Page17 minutes
-
Refactor pemanggilan API11 minutes
-
Memporses JWT (JSON Web Token)16 minutes
-
Membuat Kondisi Login di Navbar12 minutes
-
Membuat Fungsi Logout8 minutes
-
Menghandle private Route di NextJS17 minutes
-
Memperbaiki URL avatar4 minutes
-
Setup Data Checkout8 minutes
-
Setup Data Checkout Part 214 minutes
-
Global Toast5 minutes
-
Integrasi Game Item6 minutes
-
Purchase and Payment Info12 minutes
-
Mempersiapkan data untuk API Checkout8 minutes
-
Integrasi Checkout API13 minutes
-
Memperbaiki Routing Setelah Checkout4 minutes
-
Setup private route member4 minutes
-
Integrasi Sidebar Profile User5 minutes
-
Integrasi Member Overview Category10 minutes
-
Integrasi Latest Transaction9 minutes
-
Merapikan integrasi Member Overview13 minutes
-
Private Route Member Transaction8 minutes
-
Integrasi Total Transaction8 minutes
-
Integrasi Table Transaction7 minutes
-
Maping data API ke Table Integration9 minutes
-
Setup Dynamic Routes5 minutes
-
Membuat Service Transaction Detail11 minutes
-
Integrasi Item detail dan Purchase detail8 minutes
-
Integrasi Payment Information5 minutes
-
Setup Local Data untuk Form Profile7 minutes
-
Setup Form dan Upload Image6 minutes
-
Integrasi Edit Profile8 minutes
-
Update Voucher Page ( getStaticPaths & getStaticProps )13 minutes
-
Bug Fix Checkout Page4 minutes
-
Setup Basic SEO6 minutes
-
Local Build and Checking16 minutes
-
Save Project to Github Repository4 minutes
-
Deploy Project ke Vercel5 minutes
Develop Your Skills
MERN Stack adalah pengembangan website dari Front-End sampai Back-End dengan memakai satu bahasa pemrograman yaitu Javascript. MERN adalah singkatan beberapa teknologi pengembangan yang powerful: M untuk MongoDB (Database); E untuk Express (Framework); R untuk ReactJS (FE); dan N untuk NextJS (FE) dan NodeJS (core BE).
Faktanya, Javascript telah dikenal sangat populer dan fleksibel karena dapat digunakan bersamaan dengan bahasa pemrograman lain. Mampu bekerja pada sisi FE dan BE sekaligus, Javascript dapat menciptakan tampilan website menarik dan mengatur logika data dengan baik. Di dunia pemrograman, Javascript telah banyak memberikan bermanfaat selama 25 tahun, dan memahami Javascript melalui kelas ini dapat menjadi investasi yang berharga untuk karir Anda sebagai Developer dalam jangka panjang.
Pada kelas ini, kita akan membuat project yang kompleks berupa website top up game “STORE GG”. Materi dimulai dari sisi FE antara lain mengubah template HTML desain yang sudah kita slicing ke dalam NextJS. Untuk mengelola data berskala besar dengan mudah, library component akan diatur sesuai prinsip Atomic Design. Pada sisi BE, framework utama NodeJS digunakan untuk proses routing, middleware, database integration hingga testing. CRUD (Create, Read, Update, Delete) juga akan digunakan untuk mengatur konten database sesuai kebutuhan. Lalu integrasi API diimplementasikan pada kedua sisi guna memungkinkan akses data pada satu server yang sama. Setelah selesai, project disimpan di GitHub dan diunggah ke platform real-time untuk memudahkan update data di kemudian hari.
Kelas ini cocok bagi Anda yang ingin mendalami pengembangan website dengan Javascript. Dengan mengetahui keseluruhan prosesnya dengan baik dan benar, kita dapat meningkatkan skill sebagai Developer dan tentunya aplikasi yang dihasilkan kedepannya akan semakin berkualitas. Agar belajar lebih mudah, harap pahami terlebih dulu fundamental Javascript, React, dan Database. Dan silahkan juga bertanya kepada Mentor ahli kami di grup konsultasi. Daftar sekarang dan sampai jumpa di kelas!
read more
Learn With Expert
Key Points
-
Mendeploy project ke Vercel (Front-End) dan Heroku (Back-End)
-
Mengintegrasikan NodeJS REST API dengan ReactJS (NextJS)
-
Membuat fitur Sign Up dan Sign In
-
Membuat CRUD yang mencakup login dengan JWT
-
Membuat Storybook untuk membangun component library pada React
-
Mengolah database dengan MongoDB
-
Melakukan konversi HTML ke NextJS
-
Memahami pengembangan website secara utuh (Front-End dan Back-End)
Created For
-
Anda yang ingin menjadi Full-Stack Developer
-
Anda yang ingin menjadi Javascript Developer
-
Anda yang ingin membangun portofolio web yang scalable dan menjual
-
Anda yang ingin membangun fitur Register dan Login pada website
-
Anda yang ingin membangun website dengan high quality design
-
Anda yang ingin menguasai pengembangan website
For Your Career
Akses Selamanya
Belajar lebih santai & produktif
Assets & Grup Private
Diskusi belajar agar lebih terarah
Sertifikat & Portfolio
Gunakan untuk modal bekerja
4,336
Happy Students
Happy Students
Uray M Y
Full-Stack Developer
terbaik
Yoga Febriatala
Full-Stack Developer
Mantap
Prastowo Adi
Full-Stack Developer
mantap
Rifan Hilmie
Full-Stack Developer
Materi yang lengkap dan terstruktur memudahkan saya untuk memahami materi secara komprehensif
Ihwanul Hakim
Full-Stack Developer
Nice
FADLY MUHAMMAD
Lifetime Learner
Mantap
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.
